@kolkov/angular-editor 3.0.4 → 3.1.0

package/fesm2022/kolkov-angular-editor.mjs

@@ -1,23 +1,20 @@
 import * as i0 from '@angular/core';
-import { DOCUMENT, Inject, Injectable, EventEmitter, forwardRef, HostListener, ViewChild, Output, HostBinding, Input, Component, SecurityContext, ContentChild, Attribute, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i1 from '@angular/common/http';
-import * as i3 from '@angular/forms';
+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 * as i2 from '@angular/platform-browser';
-import * as i1$1 from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class AngularEditorService {
-    http;
-    doc;
-    savedSelection;
-    selectedText;
-    uploadUrl;
-    uploadWithCredentials;
-    constructor(http, doc) {
-        this.http = http;
-        this.doc = doc;
-    }
+    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
@@ -96,9 +93,6 @@ class AngularEditorService {
                 this.selectedText = sel.toString();
             }
         }
-        else if (this.doc.getSelection && this.doc.createRange) {
-            this.savedSelection = document.createRange();
-        }
         else {
             this.savedSelection = null;
         }
@@ -116,14 +110,8 @@ class AngularEditorService {
                 sel.addRange(this.savedSelection);
                 return true;
             }
-            else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
-                // this.savedSelection.select();
-                return true;
-            }
-        }
-        else {
-            return false;
         }
+        return false;
     }
     /**
      * setTimeout used for execute 'saveSelection' method in next event loop iteration
@@ -132,7 +120,11 @@ class AngularEditorService {
         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');
@@ -162,14 +154,189 @@ class AngularEditorService {
     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) {
-        let newTag = this.selectedText;
-        if (customClass) {
-            const tagName = customClass.tag ? customClass.tag : 'span';
-            newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
+        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);
@@ -199,6 +366,7 @@ class AngularEditorService {
         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>
@@ -210,6 +378,7 @@ class AngularEditorService {
             sub.unsubscribe();
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     nextNode(node) {
         if (node.hasChildNodes()) {
             return node.firstChild;
@@ -224,9 +393,11 @@ class AngularEditorService {
             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) {
@@ -254,16 +425,19 @@ class AngularEditorService {
         }
         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.apply(nodes, this.getRangeSelectedNodes(sel.getRangeAt(i), true));
+                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()) {
@@ -271,6 +445,7 @@ class AngularEditorService {
         }
         parent.removeChild(el);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     removeSelectedElements(tagNames) {
         const tagNamesArray = tagNames.toLowerCase().split(',');
         this.getSelectedNodes().forEach((node) => {
@@ -281,15 +456,12 @@ class AngularEditorService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorService, deps: [{ token: i1.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorService });
+    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: "20.3.13", ngImport: i0, type: AngularEditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
+        }] });
 
 const angularEditorConfig = {
     editable: true,
@@ -332,16 +504,14 @@ function isDefined(value) {
 }
 
 class AeSelectComponent {
-    elRef;
-    r;
     options = [];
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    isHidden;
+    isHidden = false;
     selectedOption;
     disabled = false;
     optionId = 0;
     get label() {
-        return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
+        return this.selectedOption && Object.prototype.hasOwnProperty.call(this.selectedOption, 'label') ? this.selectedOption.label : 'Select';
     }
     opened = false;
     get value() {
@@ -351,10 +521,8 @@ class AeSelectComponent {
     // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
     changeEvent = new EventEmitter();
     labelButton;
-    constructor(elRef, r) {
-        this.elRef = elRef;
-        this.r = r;
-    }
+    elRef = inject(ElementRef);
+    r = inject(Renderer2);
     ngOnInit() {
         this.selectedOption = this.options[0];
         if (isDefined(this.isHidden) && this.isHidden) {
@@ -395,12 +563,14 @@ class AeSelectComponent {
     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) => {
@@ -412,13 +582,15 @@ class AeSelectComponent {
             this.optionId = index;
         }
     }
-    onChange = () => {
-    };
-    onTouched = () => {
-    };
+    // 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;
     }
@@ -463,35 +635,40 @@ class AeSelectComponent {
         // 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: "20.3.13", ngImport: i0, type: AeSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: [
+    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    <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n          *ngFor=\"let item of options; let i = index\"\n          [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n          (mousedown)=\"optionSelect(item, $event)\">\n          {{item.label}}\n    </span>\n    <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\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"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ae-select', providers: [
                         {
@@ -499,8 +676,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                             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    <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n          *ngFor=\"let item of options; let i = index\"\n          [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n          (mousedown)=\"optionSelect(item, $event)\">\n          {{item.label}}\n    </span>\n    <span class=\"dropdown-item\" *ngIf=\"!options.length\">No items for select</span>\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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { options: [{
+                    ], 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,
@@ -524,29 +701,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 
 class AeButtonComponent {
     iconName = '';
-    constructor() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: AeButtonComponent, isStandalone: false, selector: "ae-button, button[aeButton]", inputs: { iconName: "iconName" }, host: { properties: { "tabIndex": "-1", "type": "\"button\"" }, classAttribute: "angular-editor-button" }, ngImport: i0, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\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</ng-container>\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    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: "20.3.13", ngImport: i0, type: AeButtonComponent, decorators: [{
+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',
-                        '[tabIndex]': '-1',
-                        '[type]': '"button"',
-                    }, standalone: false, template: "<ng-container *ngIf=\"iconName; else contentTemplate\">\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</ng-container>\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\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"] }]
-        }], ctorParameters: () => [], propDecorators: { iconName: [{
+                        '[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: "20.3.13", ngImport: i0, type: AeToolbarSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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"] });
+    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: "20.3.13", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
+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'
@@ -554,17 +729,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
         }], ctorParameters: () => [] });
 
 class AeToolbarComponent {
-    r;
-    editorService;
-    er;
-    doc;
     htmlMode = false;
     linkSelected = false;
     block = 'default';
     fontName = 'Times New Roman';
     fontSize = '3';
-    foreColour;
-    backColor;
+    foreColour = '';
+    backColor = '';
     headings = [
         {
             label: 'Heading 1',
@@ -638,10 +809,8 @@ class AeToolbarComponent {
         }
     ];
     customClassId = '-1';
-    // eslint-disable-next-line no-underscore-dangle, id-blacklist, id-match
-    _customClasses;
+    _customClasses = [];
     customClassList = [{ label: '', value: '' }];
-    // uploadUrl: string;
     tagMap = {
         BLOCKQUOTE: 'indent',
         A: 'link'
@@ -649,10 +818,10 @@ class AeToolbarComponent {
     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;
+    id = '';
+    uploadUrl = '';
     upload;
-    showToolbar;
+    showToolbar = false;
     fonts = [{ label: '', value: '' }];
     set customClasses(classes) {
         if (classes) {
@@ -671,18 +840,17 @@ class AeToolbarComponent {
             this.fontSize = value;
         }
     }
-    hiddenButtons;
+    hiddenButtons = [];
     execute = new EventEmitter();
     myInputFile;
     get isLinkButtonDisabled() {
-        return this.htmlMode || !Boolean(this.editorService.selectedText);
-    }
-    constructor(r, editorService, er, doc) {
-        this.r = r;
-        this.editorService = editorService;
-        this.er = er;
-        this.doc = doc;
+        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
@@ -736,6 +904,7 @@ class AeToolbarComponent {
                     if (x instanceof Element) {
                         return x.className === y.class;
                     }
+                    return false;
                 });
                 if (node !== undefined) {
                     if (found === false) {
@@ -767,9 +936,9 @@ class AeToolbarComponent {
      * insert URL link
      */
     insertUrl() {
-        let url = 'https:\/\/';
+        let url = 'https://';
         const selection = this.editorService.savedSelection;
-        if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
+        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');
@@ -777,9 +946,9 @@ class AeToolbarComponent {
                 url = href;
             }
         }
-        url = prompt('Insert URL link', url);
-        if (url && url !== '' && url !== 'https://') {
-            this.editorService.createLink(url);
+        const promptUrl = prompt('Insert URL link', url);
+        if (promptUrl && promptUrl !== '' && promptUrl !== 'https://') {
+            this.editorService.createLink(promptUrl);
         }
     }
     /**
@@ -830,20 +999,31 @@ class AeToolbarComponent {
     /**
      * 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) => this.watchUploadImage(response, event));
+                this.upload(file).subscribe((response) => {
+                    if (response instanceof HttpResponse) {
+                        this.watchUploadImage(response, event);
+                    }
+                });
             }
             else if (this.uploadUrl) {
-                this.editorService.uploadImage(file).subscribe((response) => this.watchUploadImage(response, event));
+                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;
-                    this.editorService.insertImage(fr.result.toString());
+                    if (fr.result !== null) {
+                        this.editorService.insertImage(fr.result.toString());
+                    }
                     // Reset input value to allow re-uploading the same file
                     event.target.value = null;
                 };
@@ -851,9 +1031,13 @@ class AeToolbarComponent {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchUploadImage(response, event) {
-        const { imageUrl } = response.body;
-        this.editorService.insertImage(imageUrl);
+        const body = response.body;
+        if (body) {
+            const { imageUrl } = body;
+            this.editorService.insertImage(imageUrl);
+        }
         event.srcElement.value = null;
     }
     /**
@@ -874,6 +1058,7 @@ class AeToolbarComponent {
         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) {
@@ -888,16 +1073,13 @@ class AeToolbarComponent {
     focus() {
         this.execute.emit('focus');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AeToolbarComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\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  <div *ngIf=\"_customClasses\" 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  <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", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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]" }] });
+    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: "20.3.13", ngImport: i0, type: AeToolbarComponent, decorators: [{
+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: "<div class=\"angular-editor-toolbar\" *ngIf=\"showToolbar\">\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  <div *ngIf=\"_customClasses\" 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  <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", 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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: AngularEditorService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { id: [{
+            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
@@ -923,11 +1105,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             }] } });
 
 class AngularEditorComponent {
-    r;
-    editorService;
-    doc;
-    sanitizer;
-    cdRef;
     autoFocus;
     onChange;
     onTouched;
@@ -937,16 +1114,20 @@ class AngularEditorComponent {
     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;
-    html;
+    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();
@@ -960,12 +1141,15 @@ class AngularEditorComponent {
     onFocus() {
         this.focus();
     }
-    constructor(r, editorService, doc, sanitizer, cdRef, defaultTabIndex, autoFocus) {
-        this.r = r;
-        this.editorService = editorService;
-        this.doc = doc;
-        this.sanitizer = sanitizer;
-        this.cdRef = cdRef;
+    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;
@@ -981,10 +1165,11 @@ class AngularEditorComponent {
     onPaste(event) {
         if (this.config.rawPaste) {
             event.preventDefault();
-            const text = event.clipboardData.getData('text/plain');
+            const text = event.clipboardData?.getData('text/plain') ?? '';
             document.execCommand('insertHTML', false, text);
             return text;
         }
+        return undefined;
     }
     /**
      * Executed command from editor header buttons
@@ -1046,11 +1231,11 @@ class AngularEditorComponent {
          */
         this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
         if (typeof this.onTouched === 'function') {
-            this.onTouched();
+            (this.onTouched)();
         }
         if (event.relatedTarget !== null) {
             const parent = event.relatedTarget.parentElement;
-            if (!parent.classList.contains('angular-editor-toolbar-set') && !parent.classList.contains('ae-picker')) {
+            if (!parent?.classList.contains('angular-editor-toolbar-set') && !parent?.classList.contains('ae-picker')) {
                 this.blurEvent.emit(event);
                 this.focused = false;
             }
@@ -1074,19 +1259,15 @@ class AngularEditorComponent {
      * @param element html element from contenteditable
      */
     onContentChange(element) {
-        let html = '';
-        if (this.modeVisual) {
-            html = element.innerHTML;
-        }
-        else {
-            html = element.innerText;
-        }
+        let html = this.modeVisual ? element.innerHTML : element.innerText;
         if ((!html || html === '<br>')) {
             html = '';
         }
         if (typeof this.onChange === 'function') {
-            this.onChange(this.config.sanitize || this.config.sanitize === undefined ?
-                this.sanitizer.sanitize(SecurityContext.HTML, html) : html);
+            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);
             }
@@ -1099,8 +1280,9 @@ class AngularEditorComponent {
      *
      * @param fn a function
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnChange(fn) {
-        this.onChange = e => (e === '<br>' ? fn('') : fn(e));
+        this.onChange = (e) => (e === '<br>' ? fn('') : fn(e));
     }
     /**
      * Set the function to be called
@@ -1108,6 +1290,7 @@ class AngularEditorComponent {
      *
      * @param fn a function
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -1116,6 +1299,7 @@ class AngularEditorComponent {
      *
      * @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);
@@ -1247,8 +1431,8 @@ class AngularEditorComponent {
         this.editorToolbar.triggerBlocks(els);
     }
     configure() {
-        this.editorService.uploadUrl = this.config.uploadUrl;
-        this.editorService.uploadWithCredentials = this.config.uploadWithCredentials;
+        this.editorService.uploadUrl = this.config.uploadUrl ?? '';
+        this.editorService.uploadWithCredentials = this.config.uploadWithCredentials ?? false;
         if (this.config.defaultParagraphSeparator) {
             this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
         }
@@ -1260,14 +1444,14 @@ class AngularEditorComponent {
         }
     }
     getFonts() {
-        const fonts = this.config.fonts ? this.config.fonts : angularEditorConfig.fonts;
+        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 => {
+        (this.config.customClasses ?? []).forEach(x => {
             if (x.tag !== undefined) {
                 if (!tags.includes(x.tag)) {
                     tags.push(x.tag);
@@ -1288,17 +1472,17 @@ class AngularEditorComponent {
         html = html.replace('position: fixed;', '');
         return html;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: DOCUMENT }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }, { token: 'autofocus', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: [
+    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]=\"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      [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 });
+        ], 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: "20.3.13", ngImport: i0, type: AngularEditorComponent, decorators: [{
+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: [
                         {
@@ -1307,11 +1491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                             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]=\"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      [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: i0.Renderer2 }, { type: AngularEditorService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    ], 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: [{
@@ -1356,11 +1537,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
             }] } });
 
 class AngularEditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", 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: "20.3.13", ngImport: i0, type: AngularEditorModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
+    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: "20.3.13", ngImport: i0, type: AngularEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [