@kolkov/angular-editor 3.0.0-beta.2 → 3.0.1

package/fesm2022/kolkov-angular-editor.mjs

@@ -0,0 +1,1360 @@
+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 { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/platform-browser';
+import * as i1$1 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;
+    }
+    /**
+     * Executed command from editor header buttons exclude toggleEditorMode
+     * @param command string from triggerCommand
+     * @param value
+     */
+    executeCommand(command, value) {
+        const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
+        if (commands.includes(command)) {
+            this.doc.execCommand('formatBlock', false, command);
+            return;
+        }
+        this.doc.execCommand(command, false, value);
+    }
+    /**
+     * Create URL link
+     * @param url string from UI prompt
+     */
+    createLink(url) {
+        if (!url.includes('http')) {
+            this.doc.execCommand('createlink', false, url);
+        }
+        else {
+            const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
+            this.insertHtml(newUrl);
+        }
+    }
+    /**
+     * insert color either font or background
+     *
+     * @param color color to be inserted
+     * @param where where the color has to be inserted either text/background
+     */
+    insertColor(color, where) {
+        const restored = this.restoreSelection();
+        if (restored) {
+            if (where === 'textColor') {
+                this.doc.execCommand('foreColor', false, color);
+            }
+            else {
+                this.doc.execCommand('hiliteColor', false, color);
+            }
+        }
+    }
+    /**
+     * Set font name
+     * @param fontName string
+     */
+    setFontName(fontName) {
+        this.doc.execCommand('fontName', false, fontName);
+    }
+    /**
+     * Set font size
+     * @param fontSize string
+     */
+    setFontSize(fontSize) {
+        this.doc.execCommand('fontSize', false, fontSize);
+    }
+    /**
+     * Create raw HTML
+     * @param html HTML string
+     */
+    insertHtml(html) {
+        const isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
+        if (!isHTMLInserted) {
+            throw new Error('Unable to perform the operation');
+        }
+    }
+    /**
+     * save selection when the editor is focussed out
+     */
+    saveSelection = () => {
+        if (this.doc.getSelection) {
+            const sel = this.doc.getSelection();
+            if (sel.getRangeAt && sel.rangeCount) {
+                this.savedSelection = sel.getRangeAt(0);
+                this.selectedText = sel.toString();
+            }
+        }
+        else if (this.doc.getSelection && this.doc.createRange) {
+            this.savedSelection = document.createRange();
+        }
+        else {
+            this.savedSelection = null;
+        }
+    };
+    /**
+     * restore selection when the editor is focused in
+     *
+     * saved selection when the editor is focused out
+     */
+    restoreSelection() {
+        if (this.savedSelection) {
+            if (this.doc.getSelection) {
+                const sel = this.doc.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(this.savedSelection);
+                return true;
+            }
+            else if (this.doc.getSelection /*&& this.savedSelection.select*/) {
+                // this.savedSelection.select();
+                return true;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    /**
+     * setTimeout used for execute 'saveSelection' method in next event loop iteration
+     */
+    executeInNextQueueIteration(callbackFn, timeout = 1e2) {
+        setTimeout(callbackFn, timeout);
+    }
+    /** check any selection is made or not */
+    checkSelection() {
+        const selectedText = this.savedSelection.toString();
+        if (selectedText.length === 0) {
+            throw new Error('No Selection Made');
+        }
+        return true;
+    }
+    /**
+     * Upload file to uploadUrl
+     * @param file The file
+     */
+    uploadImage(file) {
+        const uploadData = new FormData();
+        uploadData.append('file', file, file.name);
+        return this.http.post(this.uploadUrl, uploadData, {
+            reportProgress: true,
+            observe: 'events',
+            withCredentials: this.uploadWithCredentials,
+        });
+    }
+    /**
+     * Insert image with Url
+     * @param imageUrl The imageUrl.
+     */
+    insertImage(imageUrl) {
+        this.doc.execCommand('insertImage', false, imageUrl);
+    }
+    setDefaultParagraphSeparator(separator) {
+        this.doc.execCommand('defaultParagraphSeparator', false, separator);
+    }
+    createCustomClass(customClass) {
+        let newTag = this.selectedText;
+        if (customClass) {
+            const tagName = customClass.tag ? customClass.tag : 'span';
+            newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
+        }
+        this.insertHtml(newTag);
+    }
+    insertVideo(videoUrl) {
+        if (videoUrl.match('www.youtube.com')) {
+            this.insertYouTubeVideoTag(videoUrl);
+        }
+        if (videoUrl.match('vimeo.com')) {
+            this.insertVimeoVideoTag(videoUrl);
+        }
+    }
+    insertYouTubeVideoTag(videoUrl) {
+        const id = videoUrl.split('v=')[1];
+        const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
+        const thumbnail = `
+      <div style='position: relative'>
+        <a href='${videoUrl}' target='_blank'>
+          <img src="${imageUrl}" alt="click to watch"/>
+          <img style='position: absolute; left:200px; top:140px'
+          src="https://img.icons8.com/color/96/000000/youtube-play.png"/>
+        </a>
+      </div>`;
+        this.insertHtml(thumbnail);
+    }
+    insertVimeoVideoTag(videoUrl) {
+        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>
+        <a href='${videoUrl}' target='_blank'>
+          <img src="${imageUrl}" alt="${data.title}"/>
+        </a>
+      </div>`;
+            this.insertHtml(thumbnail);
+            sub.unsubscribe();
+        });
+    }
+    nextNode(node) {
+        if (node.hasChildNodes()) {
+            return node.firstChild;
+        }
+        else {
+            while (node && !node.nextSibling) {
+                node = node.parentNode;
+            }
+            if (!node) {
+                return null;
+            }
+            return node.nextSibling;
+        }
+    }
+    getRangeSelectedNodes(range, includePartiallySelectedContainers) {
+        let node = range.startContainer;
+        const endNode = range.endContainer;
+        let rangeNodes = [];
+        // Special case for a range that is contained within a single node
+        if (node === endNode) {
+            rangeNodes = [node];
+        }
+        else {
+            // Iterate nodes until we hit the end container
+            while (node && node !== endNode) {
+                rangeNodes.push(node = this.nextNode(node));
+            }
+            // Add partially selected nodes at the start of the range
+            node = range.startContainer;
+            while (node && node !== range.commonAncestorContainer) {
+                rangeNodes.unshift(node);
+                node = node.parentNode;
+            }
+        }
+        // Add ancestors of the range container, if required
+        if (includePartiallySelectedContainers) {
+            node = range.commonAncestorContainer;
+            while (node) {
+                rangeNodes.push(node);
+                node = node.parentNode;
+            }
+        }
+        return rangeNodes;
+    }
+    getSelectedNodes() {
+        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));
+            }
+        }
+        return nodes;
+    }
+    replaceWithOwnChildren(el) {
+        const parent = el.parentNode;
+        while (el.hasChildNodes()) {
+            parent.insertBefore(el.firstChild, el);
+        }
+        parent.removeChild(el);
+    }
+    removeSelectedElements(tagNames) {
+        const tagNamesArray = tagNames.toLowerCase().split(',');
+        this.getSelectedNodes().forEach((node) => {
+            if (node.nodeType === 1 &&
+                tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
+                // Remove the node and replace it with its children
+                this.replaceWithOwnChildren(node);
+            }
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+const angularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    height: 'auto',
+    minHeight: '0',
+    maxHeight: 'auto',
+    width: 'auto',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: true,
+    showToolbar: true,
+    placeholder: 'Enter text here...',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    fonts: [
+        { class: 'arial', name: 'Arial' },
+        { class: 'times-new-roman', name: 'Times New Roman' },
+        { class: 'calibri', name: 'Calibri' },
+        { class: 'comic-sans-ms', name: 'Comic Sans MS' }
+    ],
+    uploadUrl: 'v1/image',
+    uploadWithCredentials: false,
+    sanitize: true,
+    toolbarPosition: 'top',
+    outline: true,
+    /*toolbarHiddenButtons: [
+      ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
+      ['heading', 'fontName', 'fontSize', 'color'],
+      ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
+      ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
+      ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
+      ['link', 'unlink', 'image', 'video']
+    ]*/
+};
+
+function isDefined(value) {
+    return value !== undefined && value !== null;
+}
+
+class AeSelectComponent {
+    elRef;
+    r;
+    options = [];
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isHidden;
+    selectedOption;
+    disabled = false;
+    optionId = 0;
+    get label() {
+        return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
+    }
+    opened = false;
+    get value() {
+        return this.selectedOption.value;
+    }
+    hidden = 'inline-block';
+    // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
+    changeEvent = new EventEmitter();
+    labelButton;
+    constructor(elRef, r) {
+        this.elRef = elRef;
+        this.r = r;
+    }
+    ngOnInit() {
+        this.selectedOption = this.options[0];
+        if (isDefined(this.isHidden) && this.isHidden) {
+            this.hide();
+        }
+    }
+    hide() {
+        this.hidden = 'none';
+    }
+    optionSelect(option, event) {
+        //console.log(event.button, event.buttons);
+        if (event.buttons !== 1) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.setValue(option.value);
+        this.onChange(this.selectedOption.value);
+        this.changeEvent.emit(this.selectedOption.value);
+        this.onTouched();
+        this.opened = false;
+    }
+    toggleOpen(event) {
+        // event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.opened = !this.opened;
+    }
+    onClick($event) {
+        if (!this.elRef.nativeElement.contains($event.target)) {
+            this.close();
+        }
+    }
+    close() {
+        this.opened = false;
+    }
+    get isOpen() {
+        return this.opened;
+    }
+    writeValue(value) {
+        if (!value || typeof value !== 'string') {
+            return;
+        }
+        this.setValue(value);
+    }
+    setValue(value) {
+        let index = 0;
+        const selectedEl = this.options.find((el, i) => {
+            index = i;
+            return el.value === value;
+        });
+        if (selectedEl) {
+            this.selectedOption = selectedEl;
+            this.optionId = index;
+        }
+    }
+    onChange = () => {
+    };
+    onTouched = () => {
+    };
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.labelButton.nativeElement.disabled = isDisabled;
+        const div = this.labelButton.nativeElement;
+        const action = isDisabled ? 'addClass' : 'removeClass';
+        this.r[action](div, 'disabled');
+        this.disabled = isDisabled;
+    }
+    handleKeyDown($event) {
+        if (!this.opened) {
+            return;
+        }
+        // console.log($event.key);
+        // if (KeyCode[$event.key]) {
+        switch ($event.key) {
+            case 'ArrowDown':
+                this._handleArrowDown($event);
+                break;
+            case 'ArrowUp':
+                this._handleArrowUp($event);
+                break;
+            case 'Space':
+                this._handleSpace($event);
+                break;
+            case 'Enter':
+                this._handleEnter($event);
+                break;
+            case 'Tab':
+                this._handleTab($event);
+                break;
+            case 'Escape':
+                this.close();
+                $event.preventDefault();
+                break;
+            case 'Backspace':
+                this._handleBackspace();
+                break;
+        }
+        // } else if ($event.key && $event.key.length === 1) {
+        // this._keyPress$.next($event.key.toLocaleLowerCase());
+        // }
+    }
+    _handleArrowDown($event) {
+        if (this.optionId < this.options.length - 1) {
+            this.optionId++;
+        }
+    }
+    _handleArrowUp($event) {
+        if (this.optionId >= 1) {
+            this.optionId--;
+        }
+    }
+    _handleSpace($event) {
+    }
+    _handleEnter($event) {
+        this.optionSelect(this.options[this.optionId], $event);
+    }
+    _handleTab($event) {
+    }
+    _handleBackspace() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [
+            {
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ae-select', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AeSelectComponent),
+                            multi: true,
+                        }
+                    ], standalone: false, template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <svg>\n      <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n    </svg>\n  </button>\n  <span class=\"ae-picker-options\">\n    <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: [{
+                type: Input
+            }], isHidden: [{
+                type: Input,
+                args: ['hidden']
+            }], hidden: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], changeEvent: [{
+                type: Output,
+                args: ['change']
+            }], labelButton: [{
+                type: ViewChild,
+                args: ['labelButton', { static: true }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class AeButtonComponent {
+    iconName = '';
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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: [{
+                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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ae-toolbar-set, [aeToolbarSet]', host: {
+                        'class': 'angular-editor-toolbar-set'
+                    }, standalone: false, template: "<ng-content></ng-content>\n", styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"] }]
+        }], ctorParameters: () => [] });
+
+class AeToolbarComponent {
+    r;
+    editorService;
+    er;
+    doc;
+    htmlMode = false;
+    linkSelected = false;
+    block = 'default';
+    fontName = 'Times New Roman';
+    fontSize = '3';
+    foreColour;
+    backColor;
+    headings = [
+        {
+            label: 'Heading 1',
+            value: 'h1',
+        },
+        {
+            label: 'Heading 2',
+            value: 'h2',
+        },
+        {
+            label: 'Heading 3',
+            value: 'h3',
+        },
+        {
+            label: 'Heading 4',
+            value: 'h4',
+        },
+        {
+            label: 'Heading 5',
+            value: 'h5',
+        },
+        {
+            label: 'Heading 6',
+            value: 'h6',
+        },
+        {
+            label: 'Paragraph',
+            value: 'p',
+        },
+        {
+            label: 'Predefined',
+            value: 'pre'
+        },
+        {
+            label: 'Standard',
+            value: 'div'
+        },
+        {
+            label: 'default',
+            value: 'default'
+        }
+    ];
+    fontSizes = [
+        {
+            label: '1',
+            value: '1',
+        },
+        {
+            label: '2',
+            value: '2',
+        },
+        {
+            label: '3',
+            value: '3',
+        },
+        {
+            label: '4',
+            value: '4',
+        },
+        {
+            label: '5',
+            value: '5',
+        },
+        {
+            label: '6',
+            value: '6',
+        },
+        {
+            label: '7',
+            value: '7',
+        }
+    ];
+    customClassId = '-1';
+    // eslint-disable-next-line no-underscore-dangle, id-blacklist, id-match
+    _customClasses;
+    customClassList = [{ label: '', value: '' }];
+    // uploadUrl: string;
+    tagMap = {
+        BLOCKQUOTE: 'indent',
+        A: 'link'
+    };
+    select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
+    buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
+        'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
+    id;
+    uploadUrl;
+    upload;
+    showToolbar;
+    fonts = [{ label: '', value: '' }];
+    set customClasses(classes) {
+        if (classes) {
+            this._customClasses = classes;
+            this.customClassList = this._customClasses.map((x, i) => ({ label: x.name, value: i.toString() }));
+            this.customClassList.unshift({ label: 'Clear Class', value: '-1' });
+        }
+    }
+    set defaultFontName(value) {
+        if (value) {
+            this.fontName = value;
+        }
+    }
+    set defaultFontSize(value) {
+        if (value) {
+            this.fontSize = value;
+        }
+    }
+    hiddenButtons;
+    execute = new EventEmitter();
+    myInputFile;
+    get isLinkButtonDisabled() {
+        return this.htmlMode || !Boolean(this.editorService.selectedText);
+    }
+    constructor(r, editorService, er, doc) {
+        this.r = r;
+        this.editorService = editorService;
+        this.er = er;
+        this.doc = doc;
+    }
+    /**
+     * Trigger command from editor header buttons
+     * @param command string from toolbar buttons
+     */
+    triggerCommand(command) {
+        this.execute.emit(command);
+    }
+    /**
+     * highlight editor buttons when cursor moved or positioning
+     */
+    triggerButtons() {
+        if (!this.showToolbar) {
+            return;
+        }
+        this.buttons.forEach(e => {
+            const result = this.doc.queryCommandState(e);
+            const elementById = this.doc.getElementById(e + '-' + this.id);
+            if (result) {
+                this.r.addClass(elementById, 'active');
+            }
+            else {
+                this.r.removeClass(elementById, 'active');
+            }
+        });
+    }
+    /**
+     * trigger highlight editor buttons when cursor moved or positioning in block
+     */
+    triggerBlocks(nodes) {
+        if (!this.showToolbar) {
+            return;
+        }
+        this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
+        let found = false;
+        this.select.forEach(y => {
+            const node = nodes.find(x => x.nodeName === y);
+            if (node !== undefined && y === node.nodeName) {
+                if (found === false) {
+                    this.block = node.nodeName.toLowerCase();
+                    found = true;
+                }
+            }
+            else if (found === false) {
+                this.block = 'default';
+            }
+        });
+        found = false;
+        if (this._customClasses) {
+            this._customClasses.forEach((y, index) => {
+                const node = nodes.find(x => {
+                    if (x instanceof Element) {
+                        return x.className === y.class;
+                    }
+                });
+                if (node !== undefined) {
+                    if (found === false) {
+                        this.customClassId = index.toString();
+                        found = true;
+                    }
+                }
+                else if (found === false) {
+                    this.customClassId = '-1';
+                }
+            });
+        }
+        Object.keys(this.tagMap).map(e => {
+            const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
+            const node = nodes.find(x => x.nodeName === e);
+            if (node !== undefined && e === node.nodeName) {
+                this.r.addClass(elementById, 'active');
+            }
+            else {
+                this.r.removeClass(elementById, 'active');
+            }
+        });
+        this.foreColour = this.doc.queryCommandValue('ForeColor');
+        this.fontSize = this.doc.queryCommandValue('FontSize');
+        this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
+        this.backColor = this.doc.queryCommandValue('backColor');
+    }
+    /**
+     * insert URL link
+     */
+    insertUrl() {
+        let url = 'https:\/\/';
+        const selection = this.editorService.savedSelection;
+        if (selection && selection.commonAncestorContainer.parentElement.nodeName === 'A') {
+            const parent = selection.commonAncestorContainer.parentElement;
+            if (parent.href !== '') {
+                url = parent.href;
+            }
+        }
+        url = prompt('Insert URL link', url);
+        if (url && url !== '' && url !== 'https://') {
+            this.editorService.createLink(url);
+        }
+    }
+    /**
+     * insert Video link
+     */
+    insertVideo() {
+        this.execute.emit('');
+        const url = prompt('Insert Video link', `https://`);
+        if (url && url !== '' && url !== `https://`) {
+            this.editorService.insertVideo(url);
+        }
+    }
+    /** insert color */
+    insertColor(color, where) {
+        this.editorService.insertColor(color, where);
+        this.execute.emit('');
+    }
+    /**
+     * set font Name/family
+     * @param foreColor string
+     */
+    setFontName(foreColor) {
+        this.editorService.setFontName(foreColor);
+        this.execute.emit('');
+    }
+    /**
+     * set font Size
+     * @param fontSize string
+     */
+    setFontSize(fontSize) {
+        this.editorService.setFontSize(fontSize);
+        this.execute.emit('');
+    }
+    /**
+     * toggle editor mode (WYSIWYG or SOURCE)
+     * @param m boolean
+     */
+    setEditorMode(m) {
+        const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
+        if (m) {
+            this.r.addClass(toggleEditorModeButton, 'active');
+        }
+        else {
+            this.r.removeClass(toggleEditorModeButton, 'active');
+        }
+        this.htmlMode = m;
+    }
+    /**
+     * Upload image when file is selected.
+     */
+    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));
+            }
+            else if (this.uploadUrl) {
+                this.editorService.uploadImage(file).subscribe((response) => this.watchUploadImage(response, event));
+            }
+            else {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const fr = e.currentTarget;
+                    this.editorService.insertImage(fr.result.toString());
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    }
+    watchUploadImage(response, event) {
+        const { imageUrl } = response.body;
+        this.editorService.insertImage(imageUrl);
+        event.srcElement.value = null;
+    }
+    /**
+     * Set custom class
+     */
+    setCustomClass(classId) {
+        if (classId === '-1') {
+            this.execute.emit('clear');
+        }
+        else {
+            this.editorService.createCustomClass(this._customClasses[+classId]);
+        }
+    }
+    isButtonHidden(name) {
+        if (!name) {
+            return false;
+        }
+        if (!(this.hiddenButtons instanceof Array)) {
+            return false;
+        }
+        let result;
+        for (const arr of this.hiddenButtons) {
+            if (arr instanceof Array) {
+                result = arr.find(item => item === name);
+            }
+            if (result) {
+                break;
+            }
+        }
+        return result !== undefined;
+    }
+    focus() {
+        this.execute.emit('focus');
+        console.log('focused');
+    }
+    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]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", 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: [{
+                type: Input
+            }], uploadUrl: [{
+                type: Input
+            }], upload: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], fonts: [{
+                type: Input
+            }], customClasses: [{
+                type: Input
+            }], defaultFontName: [{
+                type: Input
+            }], defaultFontSize: [{
+                type: Input
+            }], hiddenButtons: [{
+                type: Input
+            }], execute: [{
+                type: Output
+            }], myInputFile: [{
+                type: ViewChild,
+                args: ['fileInput', { static: true }]
+            }] } });
+
+class AngularEditorComponent {
+    r;
+    editorService;
+    doc;
+    sanitizer;
+    cdRef;
+    autoFocus;
+    onChange;
+    onTouched;
+    modeVisual = true;
+    showPlaceholder = false;
+    disabled = false;
+    focused = false;
+    touched = false;
+    changed = false;
+    focusInstance;
+    blurInstance;
+    id = '';
+    config = angularEditorConfig;
+    placeholder = '';
+    tabIndex;
+    html;
+    textArea;
+    editorWrapper;
+    editorToolbar;
+    customButtonsTemplateRef;
+    executeCommandFn = this.executeCommand.bind(this);
+    viewMode = new EventEmitter();
+    /** emits `blur` event when focused out from the textarea */
+    // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
+    blurEvent = new EventEmitter();
+    /** emits `focus` event when focused in to the textarea */
+    // eslint-disable-next-line @angular-eslint/no-output-rename, @angular-eslint/no-output-native
+    focusEvent = new EventEmitter();
+    tabindex = -1;
+    onFocus() {
+        this.focus();
+    }
+    constructor(r, editorService, doc, sanitizer, cdRef, defaultTabIndex, autoFocus) {
+        this.r = r;
+        this.editorService = editorService;
+        this.doc = doc;
+        this.sanitizer = sanitizer;
+        this.cdRef = cdRef;
+        this.autoFocus = autoFocus;
+        const parsedTabIndex = Number(defaultTabIndex);
+        this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
+    }
+    ngOnInit() {
+        this.config.toolbarPosition = this.config.toolbarPosition ? this.config.toolbarPosition : angularEditorConfig.toolbarPosition;
+    }
+    ngAfterViewInit() {
+        if (isDefined(this.autoFocus)) {
+            this.focus();
+        }
+    }
+    onPaste(event) {
+        if (this.config.rawPaste) {
+            event.preventDefault();
+            const text = event.clipboardData.getData('text/plain');
+            document.execCommand('insertHTML', false, text);
+            return text;
+        }
+    }
+    /**
+     * Executed command from editor header buttons
+     * @param command string from triggerCommand
+     * @param value
+     */
+    executeCommand(command, value) {
+        this.focus();
+        if (command === 'focus') {
+            return;
+        }
+        if (command === 'toggleEditorMode') {
+            this.toggleEditorMode(this.modeVisual);
+        }
+        else if (command !== '') {
+            if (command === 'clear') {
+                this.editorService.removeSelectedElements(this.getCustomTags());
+                this.onContentChange(this.textArea.nativeElement);
+            }
+            else if (command === 'default') {
+                this.editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre');
+                this.onContentChange(this.textArea.nativeElement);
+            }
+            else {
+                this.editorService.executeCommand(command, value);
+            }
+            this.exec();
+        }
+    }
+    /**
+     * focus event
+     */
+    onTextAreaFocus(event) {
+        if (this.focused) {
+            event.stopPropagation();
+            return;
+        }
+        this.focused = true;
+        this.focusEvent.emit(event);
+        if (!this.touched || !this.changed) {
+            this.editorService.executeInNextQueueIteration(() => {
+                this.configure();
+                this.touched = true;
+            });
+        }
+    }
+    /**
+     * @description fires when cursor leaves textarea
+     */
+    onTextAreaMouseOut(event) {
+        this.editorService.saveSelection();
+    }
+    /**
+     * blur event
+     */
+    onTextAreaBlur(event) {
+        /**
+         * save selection if focussed out
+         */
+        this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
+        if (typeof this.onTouched === 'function') {
+            this.onTouched();
+        }
+        if (event.relatedTarget !== null) {
+            const parent = event.relatedTarget.parentElement;
+            if (!parent.classList.contains('angular-editor-toolbar-set') && !parent.classList.contains('ae-picker')) {
+                this.blurEvent.emit(event);
+                this.focused = false;
+            }
+        }
+    }
+    /**
+     *  focus the text area when the editor is focused
+     */
+    focus() {
+        if (this.modeVisual) {
+            this.textArea.nativeElement.focus();
+        }
+        else {
+            const sourceText = this.doc.getElementById('sourceText' + this.id);
+            sourceText.focus();
+            this.focused = true;
+        }
+    }
+    /**
+     * Executed from the contenteditable section while the input property changes
+     * @param element html element from contenteditable
+     */
+    onContentChange(element) {
+        let html = '';
+        if (this.modeVisual) {
+            html = element.innerHTML;
+        }
+        else {
+            html = 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);
+            if ((!html) !== this.showPlaceholder) {
+                this.togglePlaceholder(this.showPlaceholder);
+            }
+        }
+        this.changed = true;
+    }
+    /**
+     * Set the function to be called
+     * when the control receives a change event.
+     *
+     * @param fn a function
+     */
+    registerOnChange(fn) {
+        this.onChange = e => (e === '<br>' ? fn('') : fn(e));
+    }
+    /**
+     * Set the function to be called
+     * when the control receives a touch event.
+     *
+     * @param fn a function
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Write a new value to the element.
+     *
+     * @param value value to be executed when there is a change in contenteditable
+     */
+    writeValue(value) {
+        if ((!value || value === '<br>' || value === '') !== this.showPlaceholder) {
+            this.togglePlaceholder(this.showPlaceholder);
+        }
+        if (value === undefined || value === '' || value === '<br>') {
+            value = null;
+        }
+        this.refreshView(value);
+    }
+    /**
+     * refresh view/HTML of the editor
+     *
+     * @param value html string from the editor
+     */
+    refreshView(value) {
+        const normalizedValue = value === null ? '' : value;
+        this.r.setProperty(this.textArea.nativeElement, 'innerHTML', normalizedValue);
+        return;
+    }
+    /**
+     * toggles placeholder based on input string
+     *
+     * @param value A HTML string from the editor
+     */
+    togglePlaceholder(value) {
+        if (!value) {
+            this.r.addClass(this.editorWrapper.nativeElement, 'show-placeholder');
+            this.showPlaceholder = true;
+        }
+        else {
+            this.r.removeClass(this.editorWrapper.nativeElement, 'show-placeholder');
+            this.showPlaceholder = false;
+        }
+    }
+    /**
+     * Implements disabled state for this element
+     *
+     * @param isDisabled Disabled flag
+     */
+    setDisabledState(isDisabled) {
+        const div = this.textArea.nativeElement;
+        const action = isDisabled ? 'addClass' : 'removeClass';
+        this.r[action](div, 'disabled');
+        this.disabled = isDisabled;
+    }
+    /**
+     * toggles editor mode based on bToSource bool
+     *
+     * @param bToSource A boolean value from the editor
+     */
+    toggleEditorMode(bToSource) {
+        let oContent;
+        const editableElement = this.textArea.nativeElement;
+        if (bToSource) {
+            oContent = this.r.createText(editableElement.innerHTML);
+            this.r.setProperty(editableElement, 'innerHTML', '');
+            this.r.setProperty(editableElement, 'contentEditable', false);
+            const oPre = this.r.createElement('pre');
+            this.r.setStyle(oPre, 'margin', '0');
+            this.r.setStyle(oPre, 'outline', 'none');
+            const oCode = this.r.createElement('code');
+            this.r.setProperty(oCode, 'id', 'sourceText' + this.id);
+            this.r.setStyle(oCode, 'display', 'block');
+            this.r.setStyle(oCode, 'white-space', 'pre-wrap');
+            this.r.setStyle(oCode, 'word-break', 'keep-all');
+            this.r.setStyle(oCode, 'outline', 'none');
+            this.r.setStyle(oCode, 'margin', '0');
+            this.r.setStyle(oCode, 'background-color', '#fff5b9');
+            this.r.setProperty(oCode, 'contentEditable', true);
+            this.r.appendChild(oCode, oContent);
+            this.focusInstance = this.r.listen(oCode, 'focus', (event) => this.onTextAreaFocus(event));
+            this.blurInstance = this.r.listen(oCode, 'blur', (event) => this.onTextAreaBlur(event));
+            this.r.appendChild(oPre, oCode);
+            this.r.appendChild(editableElement, oPre);
+            // ToDo move to service
+            this.doc.execCommand('defaultParagraphSeparator', false, 'div');
+            this.modeVisual = false;
+            this.viewMode.emit(false);
+            oCode.focus();
+        }
+        else {
+            if (this.doc.querySelectorAll) {
+                this.r.setProperty(editableElement, 'innerHTML', editableElement.innerText);
+            }
+            else {
+                oContent = this.doc.createRange();
+                oContent.selectNodeContents(editableElement.firstChild);
+                this.r.setProperty(editableElement, 'innerHTML', oContent.toString());
+            }
+            this.r.setProperty(editableElement, 'contentEditable', true);
+            this.modeVisual = true;
+            this.viewMode.emit(true);
+            this.onContentChange(editableElement);
+            editableElement.focus();
+        }
+        this.editorToolbar.setEditorMode(!this.modeVisual);
+    }
+    /**
+     * toggles editor buttons when cursor moved or positioning
+     *
+     * Send a node array from the contentEditable of the editor
+     */
+    exec() {
+        this.editorToolbar.triggerButtons();
+        let userSelection;
+        if (this.doc.getSelection) {
+            userSelection = this.doc.getSelection();
+            this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
+        }
+        let a = userSelection.focusNode;
+        const els = [];
+        while (a && a.id !== 'editor') {
+            els.unshift(a);
+            a = a.parentNode;
+        }
+        this.editorToolbar.triggerBlocks(els);
+    }
+    configure() {
+        this.editorService.uploadUrl = this.config.uploadUrl;
+        this.editorService.uploadWithCredentials = this.config.uploadWithCredentials;
+        if (this.config.defaultParagraphSeparator) {
+            this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
+        }
+        if (this.config.defaultFontName) {
+            this.editorService.setFontName(this.config.defaultFontName);
+        }
+        if (this.config.defaultFontSize) {
+            this.editorService.setFontSize(this.config.defaultFontSize);
+        }
+    }
+    getFonts() {
+        const fonts = this.config.fonts ? this.config.fonts : angularEditorConfig.fonts;
+        return fonts.map(x => {
+            return { label: x.name, value: x.name };
+        });
+    }
+    getCustomTags() {
+        const tags = ['span'];
+        this.config.customClasses.forEach(x => {
+            if (x.tag !== undefined) {
+                if (!tags.includes(x.tag)) {
+                    tags.push(x.tag);
+                }
+            }
+        });
+        return tags.join(',');
+    }
+    ngOnDestroy() {
+        if (this.blurInstance) {
+            this.blurInstance();
+        }
+        if (this.focusInstance) {
+            this.focusInstance();
+        }
+    }
+    filterStyles(html) {
+        html = html.replace('position: fixed;', '');
+        return html;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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: [
+            {
+                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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'angular-editor', encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AngularEditorComponent),
+                            multi: true
+                        },
+                        AngularEditorService
+                    ], standalone: false, template: "<div\n  class=\"angular-editor\"\n  #angularEditor\n  [style.width]=\"config.width\"\n  [style.minWidth]=\"config.minWidth\"\n  [ngClass]=\"{\n     'bottom': config.toolbarPosition === 'bottom'\n     }\"\n>\n  <angular-editor-toolbar\n    #editorToolbar\n    [id]=\"id\"\n    [uploadUrl]=\"config.uploadUrl\"\n    [upload]=\"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: [{
+                    type: Attribute,
+                    args: ['tabindex']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['autofocus']
+                }] }], propDecorators: { id: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], html: [{
+                type: Output
+            }], textArea: [{
+                type: ViewChild,
+                args: ['editor', { static: true }]
+            }], editorWrapper: [{
+                type: ViewChild,
+                args: ['editorWrapper', { static: true }]
+            }], editorToolbar: [{
+                type: ViewChild,
+                args: ['editorToolbar']
+            }], customButtonsTemplateRef: [{
+                type: ContentChild,
+                args: ["customButtons"]
+            }], viewMode: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output,
+                args: ['blur']
+            }], focusEvent: [{
+                type: Output,
+                args: ['focus']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+class AngularEditorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AngularEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule, FormsModule, ReactiveFormsModule
+                    ],
+                    declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
+                    exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of angular-editor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AeButtonComponent, AeSelectComponent, AeToolbarComponent, AeToolbarSetComponent, AngularEditorComponent, AngularEditorModule, AngularEditorService };
+//# sourceMappingURL=kolkov-angular-editor.mjs.map