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

package/fesm2015/kolkov-angular-editor.mjs

@@ -1,1325 +0,0 @@
-import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, Input, EventEmitter, forwardRef, HostBinding, Output, ViewChild, HostListener, SecurityContext, Attribute, ContentChild, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i1 from '@angular/common/http';
-import * as i6 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@angular/platform-browser';
-
-class AngularEditorService {
-    constructor(http, doc) {
-        this.http = http;
-        this.doc = doc;
-        /**
-         * save selection when the editor is focussed out
-         */
-        this.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;
-            }
-        };
-    }
-    /**
-     * 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');
-        }
-    }
-    /**
-     * 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);
-            }
-        });
-    }
-}
-AngularEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, deps: [{ token: i1.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-AngularEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ 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 AeToolbarSetComponent {
-    constructor() {
-    }
-}
-AeToolbarSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AeToolbarSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeToolbarSetComponent, 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: "13.4.0", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-toolbar-set, [aeToolbarSet]', host: {
-                        'class': 'angular-editor-toolbar-set'
-                    }, 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: function () { return []; } });
-
-class AeButtonComponent {
-    constructor() {
-        this.iconName = '';
-    }
-}
-AeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeButtonComponent, 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:#555555}:host.angular-editor-button:disabled>.color-label.background{background:#555555}: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"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-button, button[aeButton]', host: {
-                        'class': 'angular-editor-button',
-                        '[tabIndex]': '-1',
-                        '[type]': '"button"',
-                    }, 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:#555555}:host.angular-editor-button:disabled>.color-label.background{background:#555555}: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: function () { return []; }, propDecorators: { iconName: [{
-                type: Input
-            }] } });
-
-class AeSelectComponent {
-    constructor(elRef, r) {
-        this.elRef = elRef;
-        this.r = r;
-        this.options = [];
-        this.disabled = false;
-        this.optionId = 0;
-        this.opened = false;
-        this.hidden = 'inline-block';
-        // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
-        this.changeEvent = new EventEmitter();
-        this.onChange = () => {
-        };
-        this.onTouched = () => {
-        };
-    }
-    get label() {
-        return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
-    }
-    get value() {
-        return this.selectedOption.value;
-    }
-    ngOnInit() {
-        this.selectedOption = this.options[0];
-        if (isDefined(this.isHidden) && this.isHidden) {
-            this.hide();
-        }
-    }
-    hide() {
-        this.hidden = 'none';
-    }
-    optionSelect(option, event) {
-        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;
-        }
-    }
-    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() {
-    }
-}
-AeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-AeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeSelectComponent, 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    <button 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          (click)=\"optionSelect(item, $event)\">\n          {{item.label}}\n    </button>\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%,#ffffff 100%)}.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%,#ffffff 100%)}.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-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;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"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-select', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AeSelectComponent),
-                            multi: true,
-                        }
-                    ], 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    <button 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          (click)=\"optionSelect(item, $event)\">\n          {{item.label}}\n    </button>\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%,#ffffff 100%)}.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%,#ffffff 100%)}.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-bottom:5px;padding-top:5px;padding-left:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;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: function () { return [{ 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 AeToolbarComponent {
-    constructor(r, editorService, er, doc) {
-        this.r = r;
-        this.editorService = editorService;
-        this.er = er;
-        this.doc = doc;
-        this.htmlMode = false;
-        this.linkSelected = false;
-        this.block = 'default';
-        this.fontName = 'Times New Roman';
-        this.fontSize = '3';
-        this.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: 'Heading 7',
-                value: 'h7',
-            },
-            {
-                label: 'Paragraph',
-                value: 'p',
-            },
-            {
-                label: 'Predefined',
-                value: 'pre'
-            },
-            {
-                label: 'Standard',
-                value: 'div'
-            },
-            {
-                label: 'default',
-                value: 'default'
-            }
-        ];
-        this.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',
-            }
-        ];
-        this.customClassId = '-1';
-        this.customClassList = [{ label: '', value: '' }];
-        // uploadUrl: string;
-        this.tagMap = {
-            BLOCKQUOTE: 'indent',
-            A: 'link'
-        };
-        this.select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
-        this.buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
-            'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
-        this.fonts = [{ label: '', value: '' }];
-        this.execute = new EventEmitter();
-    }
-    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;
-        }
-    }
-    get isLinkButtonDisabled() {
-        return this.htmlMode || !Boolean(this.editorService.selectedText);
-    }
-    /**
-     * 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');
-    }
-}
-AeToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarComponent, deps: [{ token: i0.Renderer2 }, { token: AngularEditorService }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-AeToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AeToolbarComponent, 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 .default{font-size:16px}.select-heading .h1{font-size:24px}.select-heading .h2{font-size:20px}.select-heading .h3{font-size:16px}.select-heading .h4{font-size:15px}.select-heading .h5{font-size:14px}.select-heading .h6{font-size:13px}.select-heading .div,.select-heading .pre{font-size:12px}}.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}\n"], components: [{ type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]" }, { type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: ["iconName"] }, { type: AeSelectComponent, selector: "ae-select", inputs: ["options", "hidden"], outputs: ["change"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AeToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-editor-toolbar, ae-toolbar, div[aeToolbar]', 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 .default{font-size:16px}.select-heading .h1{font-size:24px}.select-heading .h2{font-size:20px}.select-heading .h3{font-size:16px}.select-heading .h4{font-size:15px}.select-heading .h5{font-size:14px}.select-heading .h6{font-size:13px}.select-heading .div,.select-heading .pre{font-size:12px}}.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}\n"] }]
-        }], ctorParameters: function () {
-        return [{ 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 {
-    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;
-        this.modeVisual = true;
-        this.showPlaceholder = false;
-        this.disabled = false;
-        this.focused = false;
-        this.touched = false;
-        this.changed = false;
-        this.id = '';
-        this.config = angularEditorConfig;
-        this.placeholder = '';
-        this.executeCommandFn = this.executeCommand.bind(this);
-        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
-        this.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
-        this.focusEvent = new EventEmitter();
-        this.tabindex = -1;
-        const parsedTabIndex = Number(defaultTabIndex);
-        this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
-    }
-    onFocus() {
-        this.focus();
-    }
-    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;
-    }
-}
-AngularEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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 });
-AngularEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AngularEditorComponent, 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($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"], components: [{ type: AeToolbarComponent, selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]", inputs: ["id", "uploadUrl", "upload", "showToolbar", "fonts", "customClasses", "defaultFontName", "defaultFontSize", "hiddenButtons"], outputs: ["execute"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-editor', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AngularEditorComponent),
-                            multi: true
-                        },
-                        AngularEditorService
-                    ], 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($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: function () {
-        return [{ 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 {
-}
-AngularEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AngularEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent] });
-AngularEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AngularEditorModule, imports: [[
-            CommonModule, FormsModule, ReactiveFormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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