import * as i0 from '@angular/core';
import { DOCUMENT, Inject, Injectable, Component, EventEmitter, Output, Input, HostListener, ViewChild, Directive, TemplateRef, ViewChildren, forwardRef, HostBinding, ViewEncapsulation, SecurityContext, ContentChild, Attribute, ElementRef, NgModule } from '@angular/core';
import * as i2$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@sellan/core';
import { CoreBaseDestroyComponent, Guid, UploaderConfig, FileTypeEnum, Utility, CoreControlModule, CoreDialogModule, CoreUploaderModule } from '@sellan/core';
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
import * as i2 from '@angular/platform-browser';
import * as i1$3 from '@angular/cdk/overlay';
import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { ENTER, SPACE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
import * as i1$2 from '@angular/cdk/bidi';
import { take, Observable, fromEvent } from 'rxjs';
import { tap, switchMap, map, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { MatTabsModule } from '@angular/material/tabs';

class MonitoredEditorItems {
}

class EditorService {
    constructor(doc) {
        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();
                    this.parentNodeIsHref = sel.getRangeAt(0).commonAncestorContainer.parentElement.nodeName == 'A';
                    if (this.parentNodeIsHref) {
                        //  const selObj = window.getSelection();
                        //    const selRange = selObj.getRangeAt(0);
                        //    this.doc.execCommand('unlink', false, false);
                    }
                }
            }
            else if (this.doc.getSelection && this.doc.createRange) {
                this.savedSelection = document.createRange();
            }
            else {
                this.savedSelection = null;
            }
        };
        this.monitoredItems = new MonitoredEditorItems();
    }
    /**
     * 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);
    }
    updateMonitoredItems() {
        const selected = this.getSelectedNodes();
        this.monitoredItems.selectedTableCell = selected.find(z => z.localName === 'td');
        const list = selected.find(z => z.localName === 'li' || z.localName === 'ol');
        if (!!list) {
            this.monitoredItems.selectedClassList = list.classList.value;
        }
        else {
            this.monitoredItems.selectedClassList = '';
        }
    }
    /**
     * Create URL link
     * @param url string from UI prompt
     */
    /* createLink(url: string, isBlank: boolean, hrefTitle?: string) {
       let target = isBlank ? ' target="_blank"' : '';
       if (!!hrefTitle) {
         const newUrl = '<a href="' + url + '"' + target + '>' + hrefTitle + '</a>';
         this.insertHtml(newUrl);
         return;
       }
   
       if (!url.includes('http')) {
         this.doc.execCommand('createlink', false, url);
       } else {
         const newUrl = '<a href="' + url + '"' + target + '>' + 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);
    }
    /**
     * 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);
    }
    setDefaultParagraphSeparator(separator) {
        this.doc.execCommand('defaultParagraphSeparator', false, separator);
    }
    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;
    }
    getEditorData() {
        return this.doc.getElementsByClassName('sln-editor-textarea')[0];
    }
    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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EditorService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EditorService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: EditorService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }] });

const mainEditorConfig = {
    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: '',
    uploadUrl: 'v1/image',
    uploadWithCredentials: false,
    sanitize: true,
    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']
    ]*/
};

class ToolbarSettings {
    constructor(id) {
        this.id = id;
        this.htmlMode = false;
        this.linkSelected = false;
        this.block = 'default';
        this.fontName = 'Times New Roman';
        this.fontSize = '12';
    }
}

class SlnEditorTableEditorComponent {
    constructor(_editorService) {
        this._editorService = _editorService;
    }
    deleteTable() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        current.parentNode.parentNode.parentNode.remove();
    }
    addRowBefore() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        const row = document.createElement('tr');
        for (let i = 0; i < current.parentNode.children.length; i++) {
            let cell = row.insertCell(i);
            cell.innerHTML = "&nbsp ";
        }
        current.parentNode.parentNode.insertBefore(row, current.parentNode);
    }
    addRowAfter() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        const row = document.createElement('tr');
        for (let i = 0; i < current.parentNode.children.length; i++) {
            let cell = row.insertCell(i);
            cell.innerHTML = "&nbsp ";
        }
        current.parentNode.parentNode.insertBefore(row, current.parentNode.nextSibling);
    }
    deleteRow() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        current.parentNode.parentNode.deleteRow(current.parentNode.rowIndex);
    }
    addColumnBefore() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        let tbl = current.parentNode.parentNode.parentNode;
        for (let i = 0; i < tbl.rows.length; i++) {
            let cell = tbl.rows[i].insertCell(current.cellIndex);
            cell.innerHTML = " &nbsp ";
        }
    }
    addColumnAfter() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        let tbl = current.parentNode.parentNode.parentNode;
        for (let i = 0; i < tbl.rows.length; i++) {
            let cell = tbl.rows[i].insertCell(current.cellIndex + 1);
            cell.innerHTML = " &nbsp ";
        }
    }
    deleteColumn() {
        const current = this._editorService.monitoredItems.selectedTableCell;
        let tbl = current.parentNode.parentNode.parentNode;
        for (let j = tbl.rows.length - 1; j >= 0; j--) {
            tbl.rows[j].deleteCell(current.cellIndex);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorTableEditorComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorTableEditorComponent, isStandalone: false, selector: "sln-table-editor", ngImport: i0, template: "<div class=\"sln-window-table\">\n  <ul class=\"list-btn-for-table\">\n    <button class=\"list-btn-for-table\" (click)=\"deleteTable()\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0442\u0430\u0431\u043B\u0438\u0446\u0443\" type=\"button\">\n      <div class=\"format-delete-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addRowBefore()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443 \u0432\u044B\u0448\u0435\" type=\"button\">\n      <div class=\"format-add-top-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addRowAfter()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443 \u043D\u0438\u0436\u0435\" type=\"button\">\n      <div class=\"format-add-bottom-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"deleteRow()\" type=\"button\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\">\n      <div class=\"format-remove-row-cells\" style=\"transform: rotate(90deg);\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addColumnBefore()\" type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0441\u043B\u0435\u0432\u0430\">\n      <div class=\"format-add-left-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addColumnAfter()\" type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0441\u043F\u0440\u0430\u0432\u0430\">\n      <div class=\"format-add-right-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"deleteColumn()\" type=\"button\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443\">\n      <div class=\"format-remove-row-cells\"></div>\n    </button>\n  </ul>  \n</div>\n", styles: [".portal{display:block;background-color:red;position:relative}.sln-window-table .list-btn-for-table{background-color:var(--WHITE);display:flex;border:1px solid;flex-wrap:wrap;align-items:center;justify-content:space-around;border-radius:4px}.sln-window-table .list-btn-for-table .list-btn-for-table{background:var(--WHITE);border:none;display:block;cursor:pointer;width:40px;margin:5px;padding:5px}.sln-window-table .list-btn-for-table .list-btn-for-table img{width:100%}.sln-window-table .list-btn-for-table .list-btn-for-table:hover{border-radius:4px;background-color:#e2e8ea}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorTableEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-table-editor', standalone: false, template: "<div class=\"sln-window-table\">\n  <ul class=\"list-btn-for-table\">\n    <button class=\"list-btn-for-table\" (click)=\"deleteTable()\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0442\u0430\u0431\u043B\u0438\u0446\u0443\" type=\"button\">\n      <div class=\"format-delete-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addRowBefore()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443 \u0432\u044B\u0448\u0435\" type=\"button\">\n      <div class=\"format-add-top-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addRowAfter()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443 \u043D\u0438\u0436\u0435\" type=\"button\">\n      <div class=\"format-add-bottom-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"deleteRow()\" type=\"button\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\">\n      <div class=\"format-remove-row-cells\" style=\"transform: rotate(90deg);\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addColumnBefore()\" type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0441\u043B\u0435\u0432\u0430\">\n      <div class=\"format-add-left-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"addColumnAfter()\" type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443 \u0441\u043F\u0440\u0430\u0432\u0430\">\n      <div class=\"format-add-right-table\"></div>\n    </button>\n    <button class=\"list-btn-for-table\" (click)=\"deleteColumn()\" type=\"button\" title=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443\">\n      <div class=\"format-remove-row-cells\"></div>\n    </button>\n  </ul>  \n</div>\n", styles: [".portal{display:block;background-color:red;position:relative}.sln-window-table .list-btn-for-table{background-color:var(--WHITE);display:flex;border:1px solid;flex-wrap:wrap;align-items:center;justify-content:space-around;border-radius:4px}.sln-window-table .list-btn-for-table .list-btn-for-table{background:var(--WHITE);border:none;display:block;cursor:pointer;width:40px;margin:5px;padding:5px}.sln-window-table .list-btn-for-table .list-btn-for-table img{width:100%}.sln-window-table .list-btn-for-table .list-btn-for-table:hover{border-radius:4px;background-color:#e2e8ea}\n"] }]
        }], ctorParameters: () => [{ type: EditorService }] });

class EditorConstants {
    static { this.select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV']; }
    static { this.buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript',
        'upperCase', 'lowerCase', 'titleCase',
        'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
        'indent', 'outdent',
        'insertUnorderedList', 'insertOrderedList', 'link']; }
    static { this.tagMap = { BLOCKQUOTE: 'indent', A: 'link' }; }
}

class BaseButtonComponent {
    constructor(doc) {
        this.doc = doc;
        this.execute = new EventEmitter();
    }
    triggerCommand(command) {
        this.execute.emit(command);
    }
    isButtonHidden(name) {
        if (!name) {
            return false;
        }
        if (!(this.settings.hiddenButtons instanceof Array)) {
            return false;
        }
        let result;
        for (const arr of this.settings.hiddenButtons) {
            if (arr instanceof Array) {
                result = arr.find(item => item === name);
            }
            if (result) {
                break;
            }
        }
        return result !== undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BaseButtonComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: BaseButtonComponent, isStandalone: false, selector: "ng-component", inputs: { settings: "settings" }, outputs: { execute: "execute" }, ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BaseButtonComponent, decorators: [{
            type: Component,
            args: [{
                    template: '',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { settings: [{
                type: Input
            }], execute: [{
                type: Output
            }] } });

class SlnEditorButtonAlignComponent extends BaseButtonComponent {
    constructor(doc, _eventBroker) {
        super(doc);
        this.doc = doc;
        this.groupName = 'text_align';
        this.imageUrl = 'format-align-left';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonAlignComponent, deps: [{ token: DOCUMENT }, { token: i3.EventBrokerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonAlignComponent, isStandalone: false, selector: "sln-editor-button-align", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n        <button [id]=\"'justifyLeft-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u043B\u0435\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyLeft')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-left\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyCenter-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0446\u0435\u043D\u0442\u0440\u0443\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyCenter')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-center\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyRight-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyRight')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyRight')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-right\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyFull-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0448\u0438\u0440\u0438\u043D\u0435\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyFull')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyFull')\"\n            tabindex=\"-1\">\n          <div class=\"format-align-justify\" [attr.name]=\"groupName\"></div>\n        </button>\n        <span class=\"sln-toolbae-set-vert\">&vert;</span>\n    </div>\n   \n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonAlignComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-align', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n        <button [id]=\"'justifyLeft-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u043B\u0435\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyLeft')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-left\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyCenter-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0446\u0435\u043D\u0442\u0440\u0443\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyCenter')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-center\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyRight-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyRight')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyRight')\"\n            tabindex=\"-1\">\n            <div class=\"format-align-right\" [attr.name]=\"groupName\"></div>\n        </button>\n        <button [id]=\"'justifyFull-' + settings.id\" type=\"button\" title=\"\u0412\u044B\u0440\u0430\u0432\u043D\u0438\u0432\u0430\u043D\u0438\u0435 \u043F\u043E \u0448\u0438\u0440\u0438\u043D\u0435\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('justifyFull')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('justifyFull')\"\n            tabindex=\"-1\">\n          <div class=\"format-align-justify\" [attr.name]=\"groupName\"></div>\n        </button>\n        <span class=\"sln-toolbae-set-vert\">&vert;</span>\n    </div>\n   \n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i3.EventBrokerService }] });

class SlnEditorButtonTextCaseComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this.doc = doc;
        this._editorService = _editorService;
        this.groupName = 'text_case';
    }
    toUpperCase() {
        if (this._editorService.selectedText?.length > 0) {
            this.doc.execCommand('insertText', false, this._editorService.selectedText.toUpperCase());
            this.triggerCommand('');
        }
    }
    toLowerCase() {
        if (this._editorService.selectedText?.length > 0) {
            this.doc.execCommand('insertText', false, this._editorService.selectedText.toLowerCase());
            this.triggerCommand('');
        }
    }
    toTitleCase() {
        if (this._editorService.selectedText?.length > 0) {
            const capitalized = this._editorService.selectedText.charAt(0).toUpperCase() +
                this._editorService.selectedText.slice(1).toLowerCase();
            this.doc.execCommand('insertText', false, capitalized);
            this.triggerCommand('');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTextCaseComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonTextCaseComponent, isStandalone: false, selector: "sln-editor-button-text-case", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'upperCase-' + settings.id\" type=\"button\" title=\"\u0417\u0430\u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n        (click)=\"toUpperCase()\" [hidden]=\"isButtonHidden('upperCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-upper-case\"></div>\n    </button>\n    <button [id]=\"'lowerCase-' + settings.id\" type=\"button\" title=\"\u0421\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\" \n        (click)=\"toLowerCase()\" [hidden]=\"isButtonHidden('lowerCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-lower-case\"></div>\n    </button>\n    <button [id]=\"'titleCase-' + settings.id\" type=\"button\" title=\"\u041F\u0435\u0440\u0432\u0430\u044F-\u0437\u0430\u0433\u043B\u0430\u0432\u043D\u0430\u044F\" class=\"sln-editor-button\" \n        (click)=\"toTitleCase()\" [hidden]=\"isButtonHidden('titleCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-title-case\"></div>\n    </button>    \n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTextCaseComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-text-case', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'upperCase-' + settings.id\" type=\"button\" title=\"\u0417\u0430\u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n        (click)=\"toUpperCase()\" [hidden]=\"isButtonHidden('upperCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-upper-case\"></div>\n    </button>\n    <button [id]=\"'lowerCase-' + settings.id\" type=\"button\" title=\"\u0421\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\" \n        (click)=\"toLowerCase()\" [hidden]=\"isButtonHidden('lowerCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-lower-case\"></div>\n    </button>\n    <button [id]=\"'titleCase-' + settings.id\" type=\"button\" title=\"\u041F\u0435\u0440\u0432\u0430\u044F-\u0437\u0430\u0433\u043B\u0430\u0432\u043D\u0430\u044F\" class=\"sln-editor-button\" \n        (click)=\"toTitleCase()\" [hidden]=\"isButtonHidden('titleCase')\" tabindex=\"-1\" [disabled]=\"settings.htmlMode\">\n      <div class=\"format-title-case\"></div>\n    </button>    \n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnPreviewDocumentDialogComponent extends CoreBaseDestroyComponent {
    constructor(_dialogRef, sanitizer, data, _editorService) {
        super();
        this._dialogRef = _dialogRef;
        this.sanitizer = sanitizer;
        this.data = data;
        this._editorService = _editorService;
    }
    ngOnInit() {
        const html = this._editorService.getEditorData().getInnerHTML();
        this.docData = this.sanitizer.bypassSecurityTrustHtml(html);
    }
    execute() {
        this._dialogRef.close();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnPreviewDocumentDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.DomSanitizer }, { token: MAT_DIALOG_DATA }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnPreviewDocumentDialogComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<core-dialog dialogTitle=\"\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\" [resizeble]=\"true\" width=\"1100\">\n  <div body>\n    <div class=\"sln-editor-preview-block \">\n      <div [innerHTML]=\"docData\"></div>\n    </div>\n  </div>\n  <div footer>\n  </div>\n</core-dialog>\n", styles: [".sln-editor-preview-block{color:var(--DARK-GREY);padding-left:30px;padding-right:30px}\n"], dependencies: [{ kind: "component", type: i3.CoreDialogWindow, selector: "core-dialog", inputs: ["dialogTitle", "hasCansel", "canselText", "hasFooter", "fullScreen", "width", "minWidth", "hasTitle", "leftMenu", "resizeble", "showTicketsVersions", "showCloseConfirmDialog", "beforeClosed", "cdkDragDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnPreviewDocumentDialogComponent, decorators: [{
            type: Component,
            args: [{ standalone: false, template: "<core-dialog dialogTitle=\"\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\" [resizeble]=\"true\" width=\"1100\">\n  <div body>\n    <div class=\"sln-editor-preview-block \">\n      <div [innerHTML]=\"docData\"></div>\n    </div>\n  </div>\n  <div footer>\n  </div>\n</core-dialog>\n", styles: [".sln-editor-preview-block{color:var(--DARK-GREY);padding-left:30px;padding-right:30px}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: EditorService }] });

class SlnEditorButtonPreviewComponent extends BaseButtonComponent {
    /**
     *
     */
    constructor(doc, _dialog) {
        super(doc);
        this.doc = doc;
        this._dialog = _dialog;
    }
    openInModal() {
        const dialogRef = this._dialog.open(SlnPreviewDocumentDialogComponent, {
            data: {}
        });
        const sub = dialogRef.afterClosed().subscribe((result) => {
            sub.unsubscribe();
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonPreviewComponent, deps: [{ token: DOCUMENT }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonPreviewComponent, isStandalone: false, selector: "sln-editor-button-preview", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n  <button type=\"button\" title=\"\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\" class=\"sln-editor-button\" (click)=\"openInModal()\" \n      [hidden]=\"isButtonHidden('togglePreviewMode')\" [disabled]=\"settings.htmlMode\" tabindex=\"-1\" >\n    <div class=\"format-document-view\"></div>\n  </button>\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonPreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-preview', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n  <button type=\"button\" title=\"\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440\" class=\"sln-editor-button\" (click)=\"openInModal()\" \n      [hidden]=\"isButtonHidden('togglePreviewMode')\" [disabled]=\"settings.htmlMode\" tabindex=\"-1\" >\n    <div class=\"format-document-view\"></div>\n  </button>\n</div>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i1.MatDialog }] });

class TableData {
    constructor(rows, cols) {
        this.isVisible = false;
        this.rows = [];
        this.columns = [];
        if (!!rows && rows) {
            for (let i = 0; i < rows; i++) {
                this.addRow(i.toString());
            }
        }
        if (!!cols && cols) {
            for (let i = 0; i < cols; i++) {
                this.addCol(i.toString());
            }
        }
    }
    addRow(rowTitle) {
        let row = {
            id: this.rows.length,
            title: rowTitle
        };
        this.rows.push(row);
    }
    addCol(colTitle) {
        let col = {
            id: this.columns.length,
            title: colTitle
        };
        this.columns.push(col);
    }
}

class SlnEditorWindowTablePickerComponent {
    constructor(doc) {
        this.doc = doc;
        this.fieldX = Array.from(Array(10).keys());
        this.fieldY = Array.from(Array(10).keys());
        this.selectedX = 0;
        this.selectedY = 0;
        this.selected = new EventEmitter();
    }
    focusTableItem(x, y) {
        this.selectedX = x;
        this.selectedY = y;
    }
    isSelected(x, y) {
        return x <= this.selectedX && y <= this.selectedY;
    }
    clickItem() {
        this.selected.emit({ selectedX: this.selectedX + 1, selectedY: this.selectedY + 1 });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorWindowTablePickerComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnEditorWindowTablePickerComponent, isStandalone: false, selector: "sln-editor-window-table-picker", outputs: { selected: "selected" }, ngImport: i0, template: "<table class=\"table-picker\">\n  <span class=\"sln-selectedXY\">{{selectedX + 1}}x{{selectedY + 1}}</span>\n  @for (x of fieldX; track x) {\n    <tr>\n      @for (y of fieldY; track y) {\n        <td [ngClass]=\"{'td-is-selected': isSelected(x, y)}\" (mouseenter)=\"focusTableItem(x, y)\" (click)=\"clickItem()\"><div class=\"format-color-picker-chip\"></div></td>\n      }\n    </tr>\n  }\n</table>\n\n", styles: [".table-picker tr td:hover{background-color:#8eaafa}td{line-height:0}td img{background:#e0e4e9;border-radius:4px;margin:1px}.td-is-selected{background-color:#8eaafa;border-radius:4px}.table-picker{position:absolute;top:45px;background-color:var(--WHITE);border:none;z-index:2;border-radius:5px;padding:20px 10px 10px;box-shadow:#0003 0 2px 8px}.sln-selectedXY{position:absolute;left:50%;top:2px;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorWindowTablePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-window-table-picker', standalone: false, template: "<table class=\"table-picker\">\n  <span class=\"sln-selectedXY\">{{selectedX + 1}}x{{selectedY + 1}}</span>\n  @for (x of fieldX; track x) {\n    <tr>\n      @for (y of fieldY; track y) {\n        <td [ngClass]=\"{'td-is-selected': isSelected(x, y)}\" (mouseenter)=\"focusTableItem(x, y)\" (click)=\"clickItem()\"><div class=\"format-color-picker-chip\"></div></td>\n      }\n    </tr>\n  }\n</table>\n\n", styles: [".table-picker tr td:hover{background-color:#8eaafa}td{line-height:0}td img{background:#e0e4e9;border-radius:4px;margin:1px}.td-is-selected{background-color:#8eaafa;border-radius:4px}.table-picker{position:absolute;top:45px;background-color:var(--WHITE);border:none;z-index:2;border-radius:5px;padding:20px 10px 10px;box-shadow:#0003 0 2px 8px}.sln-selectedXY{position:absolute;left:50%;top:2px;transform:translate(-50%)}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { selected: [{
                type: Output
            }] } });

class SlnEditorButtonTablePickerComponent extends BaseButtonComponent {
    constructor(doc, _eRef, _editorService, cdRef) {
        super(doc);
        this.doc = doc;
        this._eRef = _eRef;
        this._editorService = _editorService;
        this.cdRef = cdRef;
        this.hidePicker = true;
        this.isWasSelected = false;
    }
    emitSelected(event) {
        this.hidePicker = true;
        this.tableView = new TableData(event.selectedX, event.selectedY);
        this.isWasSelected = true;
        this.cdRef.detectChanges();
        const itemTable = this.table.nativeElement.innerHTML.replace(/<!--[\s\S]*?-->/g, "");
        const tabId = "table" + Guid.newGuid();
        this._editorService.executeCommand('insertHtml', '<table style="width:60%;" id="' + tabId + '">' + itemTable + '</table>');
        this.isWasSelected = false;
    }
    clickOut(event) {
        if ((this.hidePicker === true && this._eRef.nativeElement.contains(event.target)) || !this._eRef.nativeElement.contains(event.target)) {
            this.hidePicker = true;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTablePickerComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: EditorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnEditorButtonTablePickerComponent, isStandalone: false, selector: "sln-editor-button-table-picker", host: { listeners: { "document:click": "clickOut($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sln-table-picker\">\n  <div class=\"sln-editor-toolbar-set\">\n    <button type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0430\u0431\u043B\u0438\u0446\u0443\" class=\"sln-editor-button\" (click)=\"hidePicker = !hidePicker\"\n      [disabled]=\"settings.htmlMode\" tabindex=\"-1\">\n      <div class=\"format-table\"></div>\n    </button>\n  </div>\n  @if (!hidePicker) {\n    <sln-editor-window-table-picker (selected)=\"emitSelected($event)\"></sln-editor-window-table-picker>\n  }\n\n  @if (isWasSelected) {\n    <table style=\"display: none;width:60%;\" #table border=\"1\">\n      @for (row of tableView.rows; track row) {\n        <tr style=\"min-height:25px;\">\n          @for (col of tableView.columns; track col) {\n            <td style=\"height: 25px; width: 100px;\"></td>\n          }\n        </tr>\n      }\n    </table>\n  }\n</div>\n\n\n", styles: [".sln-table-picker{display:flex}.sln-table-picker .sln-editor-toolbar-set{position:relative}\n"], dependencies: [{ kind: "component", type: SlnEditorWindowTablePickerComponent, selector: "sln-editor-window-table-picker", outputs: ["selected"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTablePickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-table-picker', standalone: false, template: "<div class=\"sln-table-picker\">\n  <div class=\"sln-editor-toolbar-set\">\n    <button type=\"button\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0442\u0430\u0431\u043B\u0438\u0446\u0443\" class=\"sln-editor-button\" (click)=\"hidePicker = !hidePicker\"\n      [disabled]=\"settings.htmlMode\" tabindex=\"-1\">\n      <div class=\"format-table\"></div>\n    </button>\n  </div>\n  @if (!hidePicker) {\n    <sln-editor-window-table-picker (selected)=\"emitSelected($event)\"></sln-editor-window-table-picker>\n  }\n\n  @if (isWasSelected) {\n    <table style=\"display: none;width:60%;\" #table border=\"1\">\n      @for (row of tableView.rows; track row) {\n        <tr style=\"min-height:25px;\">\n          @for (col of tableView.columns; track col) {\n            <td style=\"height: 25px; width: 100px;\"></td>\n          }\n        </tr>\n      }\n    </table>\n  }\n</div>\n\n\n", styles: [".sln-table-picker{display:flex}.sln-table-picker .sln-editor-toolbar-set{position:relative}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef }, { type: EditorService }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                type: ViewChild,
                args: ['table', { static: false }]
            }], clickOut: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

class ColorDirective {
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    focus() {
        this.elementRef.nativeElement.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ColorDirective, isStandalone: false, selector: "[color]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[color]',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

class ColorPickerComponent {
    constructor(dir, _editorService) {
        this.dir = dir;
        this._editorService = _editorService;
        this.createColorBlockOpen = false;
        this.isOpen = false;
        this.isBackground = false;
        this.rowSize = 4;
        this.valueChange = new EventEmitter();
        this.R = 0;
        this.G = 0;
        this.B = 0;
    }
    ngOnDestroy() {
        if (this.colorChekerId) {
            clearInterval(this.colorChekerId);
        }
    }
    ngOnChanges(changes) {
        if (changes.colors) {
            this.groupedColors =
                this.colors.map((_, i) => !(i % this.rowSize) ? this.colors.slice(i, i + this.rowSize) : null)
                    .filter(Boolean);
        }
        this.setActiveItem(this.value);
    }
    ngAfterViewInit() {
        this.colorChekerId = setInterval(() => this.handleForSelectedColor(), 1000);
        this.keyManager = new FocusKeyManager(this.gridCells)
            .withHorizontalOrientation(this.dir.value)
            .withVerticalOrientation(false);
        this.setActiveItem(this.value);
    }
    insertColor(color) {
        if (!color) {
            color = this.rgbToHex(this.R, this.G, this.B);
            this.valueChange.emit(color);
        }
        this.R = this.hexToRgb(color).r;
        this.B = this.hexToRgb(color).b;
        this.G = this.hexToRgb(color).g;
        this.valueChange.emit(color);
    }
    changeRGBvalue(r, g, b) {
        this.R = r;
        this.G = g;
        this.B = b;
    }
    handleForSelectedColor() {
        if (this.isOpen) {
            return;
        }
        let selected = this._editorService.getSelectedNodes();
        if (!this.isBackground) {
            let color = selected.find(z => z.localName === 'font')?.color;
            if (!!color) {
                this.R = this.hexToRgb(color).r;
                this.B = this.hexToRgb(color).b;
                this.G = this.hexToRgb(color).g;
            }
            else {
                this.R = 0;
                this.B = 0;
                this.G = 0;
            }
        }
        else {
            let background = selected.find(z => z.localName === 'font')?.style['background-color'];
            if (!!background) {
                if (background.indexOf('rgb') != 0) {
                    {
                        this.R = this.hexToRgb(background).r;
                        this.B = this.hexToRgb(background).b;
                        this.G = this.hexToRgb(background).g;
                    }
                }
                else {
                    let rgb = background.replace('rgb(', '').replace(')', '').split(',');
                    this.R = parseInt(rgb[0]);
                    this.G = parseInt(rgb[1]);
                    this.B = parseInt(rgb[2]);
                    //selected.find(z => z.localName === 'font').style['background-color'].replace(/\D/g,',').split(',').filter(z => !!z)
                }
            }
        }
    }
    createNewColor() {
        this.createColorBlockOpen = !this.createColorBlockOpen;
        this.isOpen = this.createColorBlockOpen;
    }
    componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }
    rgbToHex(r, g, b) {
        return "#" + (1 << 24 | 21 << r | 23 << g | b).toString(16).slice(1);
    }
    getRGBColorString() {
        return 'rgb(' + this.R + ',' + this.G + ',' + this.B + ')';
    }
    setActiveItem(value) {
        if (value && this.keyManager) {
            this.keyManager.setActiveItem(this.colors.indexOf(value));
        }
    }
    onKeyDown(ev) {
        this.keyManager.onKeydown(ev);
    }
    hexToRgb(hex) {
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function (m, r, g, b) {
            return r + r + g + g + b + b;
        });
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }
    onGridCellKeyDown(ev, color) {
        if (ev.keyCode === ENTER || ev.keyCode === SPACE) {
            ev.preventDefault();
            this.insertColor(color);
        }
        if (ev.keyCode === UP_ARROW) {
            const index = this.keyManager.activeItemIndex - this.rowSize;
            this.keyManager.setActiveItem(index >= 0 ? index : this.keyManager.activeItemIndex);
        }
        if (ev.keyCode === DOWN_ARROW) {
            const index = this.keyManager.activeItemIndex + this.rowSize;
            this.keyManager.setActiveItem(index < this.colors.length ? index : this.keyManager.activeItemIndex);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i1$2.Directionality }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ColorPickerComponent, isStandalone: false, selector: "sln-color-picker", inputs: { colors: "colors", value: "value", isBackground: "isBackground", rowSize: "rowSize" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "gridCells", predicate: ColorDirective, descendants: true }], exportAs: ["colorPicker"], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div class=\"sln-rgb-wrap\">\n    <div class=\"container\" role=\"grid\" [class.open]=\"isOpen\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\"\n      [style.transformOrigin]=\"dir.value === 'ltr' ? 'left top' : 'right top'\">\n      @for (group of groupedColors; track group) {\n        <div class=\"row\" role=\"row\">\n          @for (color of group; track color) {\n            <div role=\"gridcell\" [attr.tabindex]=\"color === value ? 0 : -1\" [attr.aria-label]=\"color.name\"\n              class=\"color\" [ngStyle]=\"{backgroundColor: color.value}\"\n              (click)=\"insertColor(color.value)\"\n              color (keydown)=\"onGridCellKeyDown($event, color.value)\">\n              @if (color === value) {\n                <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n                </svg>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"sln-create-color\">\n      <span (click)=\"fgInput2.click()\">\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0441\u0432\u043E\u0439 \u0446\u0432\u0435\u0442</span>\n      <input class=\"sln-editor-button-colors-input\" name=\"hidden-metadata_visual_headerBackground\" type=\"color\"\n        (change)=\"insertColor(fgInput2.value)\" #fgInput2>\n      </div>\n    </div>\n  </ng-template>\n", styles: [".container{background-color:#fff;border-radius:3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;overflow:hidden;padding:8px;display:flex;flex-direction:column;flex-wrap:wrap}.row{display:flex;flex-direction:row}.color{height:35px;width:100%;margin:4px;border-radius:4px;cursor:pointer;border:1px solid #b2c7cf}.color svg{fill:#fff}.color-viewer{height:30px}.sln-rgb-wrap{background:#e2e8ea;padding:7px;border-radius:5px;position:relative;top:20px;width:200px}.sln-rgb-wrap .sln-rgb-corde{display:flex;justify-content:space-between;margin-bottom:5px}.sln-rgb-wrap .sln-rgb-corde input{width:100%;outline:none;border:1px solid var(--GRAY-SOFT);border-radius:4px;padding:0 3px;margin-right:4px}.sln-rgb-wrap .sln-rgb-corde input:last-child{margin-right:0}.sln-rgb-wrap .row{justify-content:space-evenly}.sln-rgb-wrap .container{box-shadow:none;margin-bottom:5px}.sln-rgb-wrap .btn-primary{width:100%;margin-top:10px}.sln-rgb-color{margin-top:3px}.sln-create-color span{cursor:pointer;font-size:14px;text-align:center;font-family:var(--font-medium);color:var(--DARK-GREY);width:100%;text-transform:lowercase;height:20px;display:flex;align-items:center;justify-content:center}.sln-btn-full-s{min-height:31px}.sln-editor-button-colors-input{inline-size:0;block-size:0;border:0;position:absolute}.sln-color-picker-container{transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.25,1.5,.55,1),opacity .15s cubic-bezier(.25,1.5,.55,1);transform-origin:top left}.sln-color-picker-container.open{transform:scale(1);opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[color]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-color-picker', exportAs: 'colorPicker', standalone: false, template: "<ng-template>\n  <div class=\"sln-rgb-wrap\">\n    <div class=\"container\" role=\"grid\" [class.open]=\"isOpen\" cdkTrapFocus cdkTrapFocusAutoCapture (keydown)=\"onKeyDown($event)\"\n      [style.transformOrigin]=\"dir.value === 'ltr' ? 'left top' : 'right top'\">\n      @for (group of groupedColors; track group) {\n        <div class=\"row\" role=\"row\">\n          @for (color of group; track color) {\n            <div role=\"gridcell\" [attr.tabindex]=\"color === value ? 0 : -1\" [attr.aria-label]=\"color.name\"\n              class=\"color\" [ngStyle]=\"{backgroundColor: color.value}\"\n              (click)=\"insertColor(color.value)\"\n              color (keydown)=\"onGridCellKeyDown($event, color.value)\">\n              @if (color === value) {\n                <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/>\n                </svg>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"sln-create-color\">\n      <span (click)=\"fgInput2.click()\">\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0441\u0432\u043E\u0439 \u0446\u0432\u0435\u0442</span>\n      <input class=\"sln-editor-button-colors-input\" name=\"hidden-metadata_visual_headerBackground\" type=\"color\"\n        (change)=\"insertColor(fgInput2.value)\" #fgInput2>\n      </div>\n    </div>\n  </ng-template>\n", styles: [".container{background-color:#fff;border-radius:3px;box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;overflow:hidden;padding:8px;display:flex;flex-direction:column;flex-wrap:wrap}.row{display:flex;flex-direction:row}.color{height:35px;width:100%;margin:4px;border-radius:4px;cursor:pointer;border:1px solid #b2c7cf}.color svg{fill:#fff}.color-viewer{height:30px}.sln-rgb-wrap{background:#e2e8ea;padding:7px;border-radius:5px;position:relative;top:20px;width:200px}.sln-rgb-wrap .sln-rgb-corde{display:flex;justify-content:space-between;margin-bottom:5px}.sln-rgb-wrap .sln-rgb-corde input{width:100%;outline:none;border:1px solid var(--GRAY-SOFT);border-radius:4px;padding:0 3px;margin-right:4px}.sln-rgb-wrap .sln-rgb-corde input:last-child{margin-right:0}.sln-rgb-wrap .row{justify-content:space-evenly}.sln-rgb-wrap .container{box-shadow:none;margin-bottom:5px}.sln-rgb-wrap .btn-primary{width:100%;margin-top:10px}.sln-rgb-color{margin-top:3px}.sln-create-color span{cursor:pointer;font-size:14px;text-align:center;font-family:var(--font-medium);color:var(--DARK-GREY);width:100%;text-transform:lowercase;height:20px;display:flex;align-items:center;justify-content:center}.sln-btn-full-s{min-height:31px}.sln-editor-button-colors-input{inline-size:0;block-size:0;border:0;position:absolute}.sln-color-picker-container{transform:scale(0);opacity:0;transition:transform .15s cubic-bezier(.25,1.5,.55,1),opacity .15s cubic-bezier(.25,1.5,.55,1);transform-origin:top left}.sln-color-picker-container.open{transform:scale(1);opacity:1}\n"] }]
        }], ctorParameters: () => [{ type: i1$2.Directionality }, { type: EditorService }], propDecorators: { template: [{
                type: ViewChild,
                args: [TemplateRef]
            }], gridCells: [{
                type: ViewChildren,
                args: [ColorDirective]
            }], colors: [{
                type: Input
            }], value: [{
                type: Input
            }], isBackground: [{
                type: Input
            }], rowSize: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });

class ColorPickerTriggerDirective {
    constructor(overlay, viewContainerRef, dir) {
        this.overlay = overlay;
        this.viewContainerRef = viewContainerRef;
        this.dir = dir;
    }
    init($event) {
        this.overlayConfig = new OverlayConfig({
            hasBackdrop: true,
            direction: this.dir.value,
            backdropClass: 'cdk-overlay-transparent-background'
        });
        this.overlayConfig.positionStrategy = this.overlay.position().global().left($event.clientX + "px").top($event.clientY + "px");
        this._overlayRef = this.overlay.create(this.overlayConfig);
        this._overlayRef.backdropClick()
            .subscribe(() => {
            this.colorPicker.isOpen = false;
            this._overlayRef.detach();
        });
    }
    click($event) {
        if (!this._overlayRef) {
            this.init($event);
        }
        this.colorPicker.valueChange
            .pipe(take(1))
            .subscribe(() => this._overlayRef.detach());
        this._overlayRef.detach();
        const picker = new TemplatePortal(this.colorPicker.template, this.viewContainerRef);
        this._overlayRef.attach(picker);
        this.colorPicker.isOpen = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorPickerTriggerDirective, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i1$2.Directionality }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ColorPickerTriggerDirective, isStandalone: false, selector: "[color-picker-trigger]", inputs: { colorPicker: ["color-picker-trigger", "colorPicker"] }, host: { listeners: { "dblclick": "click($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ColorPickerTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[color-picker-trigger]',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i1$2.Directionality }], propDecorators: { colorPicker: [{
                type: Input,
                args: ['color-picker-trigger']
            }], click: [{
                type: HostListener,
                args: ['dblclick', ['$event']]
            }] } });

class SlnEditorButtonColorsComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this._editorService = _editorService;
        this.colors = [
            { name: 'Black', value: '#272828' }, //1 var(--BLACK)
            { name: 'Deep Purple', value: '#673AB7' }, //2
            { name: 'Blue', value: '#3469F4' }, //3 var(--PRIMARY)
            { name: 'Green', value: '#196428' }, //4
            { name: 'Dark Grey', value: '#3C4970' }, //5 var(--DARK-GREY)
            { name: 'Purple', value: '#9C27B0' }, //6
            { name: 'Light Blue', value: '#03A9F4' }, //7 
            { name: 'Teal', value: '#009688' }, //8
            { name: 'Midle Grey', value: '#77809B' }, //9 var(--MIDLE-GRAY)
            { name: 'Pink', value: '#E91E63' }, //10
            { name: 'Add Color 1', value: '#8EAAFA' }, //11 var(--ADD-COLOR-1)
            { name: 'Green', value: '#77C29E' }, //12 var(--SUCCESS)
            { name: 'Default', value: '#ABB1C2' }, //13 var(--DEFAULT)
            { name: 'Red', value: '#FF2480' }, //14 var(--DANGER)
            { name: 'Light Blue', value: '#92D8FF' }, //15 var(--INFO)
            { name: 'Light Grey', value: '#E2E8EA' }, //16 var(--LIGHT-GRAY)
            { name: 'Grey', value: '#B2C7CF' }, //17 var(--GRAY)
            { name: 'Yellow', value: '#F8AC59' }, //18 var(--WARNING)
            { name: 'Add Color 2', value: '#c3eaff' }, //19
            { name: 'White', value: '#FFFFFF' }, // 20 var(--WHITE)
        ];
    }
    insertColor(color, where) {
        if (where === 'backgroundColor') {
            this.backColor = color;
        }
        else {
            this.textColor = color;
        }
        this._editorService.insertColor(color, where);
        this.execute.emit('');
    }
    focus() {
        this.execute.emit('focus');
    }
    apply(where) {
        this.insertColor(where === 'backgroundColor' ? this.backColor : this.textColor, where);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonColorsComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonColorsComponent, isStandalone: false, selector: "sln-editor-button-colors", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <input class=\"sln-editor-button-colors-input\" type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\" #fgInput>\n    <button [color-picker-trigger]=\"colorPicker\" [id]=\"'foregroundColorPicker-' + settings.id\" type=\"button\" class=\"sln-editor-button sln-editor-button-colors-btn\"\n        (dblclick)=\"focus();\" (click)=\"apply('textColor')\" title=\"\u0426\u0432\u0435\u0442 \u0442\u0435\u043A\u0441\u0442\u0430\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('textColor')\" tabindex=\"-1\">\n        <div class=\"format-letrer-color1\"></div>\n        <span class=\"sln-editor-button-colors-line\" [ngStyle]=\"{ 'background-color':  colorPicker.getRGBColorString() }\"></span>\n    </button>\n    <button [color-picker-trigger]=\"colorPickerBackground\" [id]=\"'backgroundColorPicker-' + settings.id\" type=\"button\" class=\"sln-editor-button sln-editor-button-colors-btn\"\n        (dblclick)=\"focus();\" (click)=\"apply('backgroundColor')\" title=\"\u0426\u0432\u0435\u0442 \u0444\u043E\u043D\u0430\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\" tabindex=\"-1\">\n        <div class=\"format-background-color1\"></div>\n        <span class=\"sln-editor-button-colors-line\" [ngStyle]=\"{ 'background-color': colorPickerBackground.getRGBColorString() }\"></span>\n    </button>\n    <div class=\"sln-pickers\">\n        <sln-color-picker #colorPicker [colors]=\"colors\" (valueChange)=\"insertColor($event, 'textColor')\"></sln-color-picker>\n        <sln-color-picker #colorPickerBackground [isBackground]=\"true\" [colors]=\"colors\" (valueChange)=\"insertColor($event, 'backgroundColor')\"></sln-color-picker>\n    </div>\n</div>\n\n", styles: [".sln-editor-button-colors-input{inline-size:0;block-size:0;border:0}.sln-editor-button-colors-btn{position:relative;display:flex;flex-direction:column}.sln-editor-button-colors-line{width:80%;height:4px;position:absolute;bottom:0;left:50%;margin:0 auto;transform:translate(-50%)}.sln-editor-button{position:relative}.sln-pickers{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ColorPickerComponent, selector: "sln-color-picker", inputs: ["colors", "value", "isBackground", "rowSize"], outputs: ["valueChange"], exportAs: ["colorPicker"] }, { kind: "directive", type: ColorPickerTriggerDirective, selector: "[color-picker-trigger]", inputs: ["color-picker-trigger"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonColorsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-colors', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <input class=\"sln-editor-button-colors-input\" type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\" #fgInput>\n    <button [color-picker-trigger]=\"colorPicker\" [id]=\"'foregroundColorPicker-' + settings.id\" type=\"button\" class=\"sln-editor-button sln-editor-button-colors-btn\"\n        (dblclick)=\"focus();\" (click)=\"apply('textColor')\" title=\"\u0426\u0432\u0435\u0442 \u0442\u0435\u043A\u0441\u0442\u0430\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('textColor')\" tabindex=\"-1\">\n        <div class=\"format-letrer-color1\"></div>\n        <span class=\"sln-editor-button-colors-line\" [ngStyle]=\"{ 'background-color':  colorPicker.getRGBColorString() }\"></span>\n    </button>\n    <button [color-picker-trigger]=\"colorPickerBackground\" [id]=\"'backgroundColorPicker-' + settings.id\" type=\"button\" class=\"sln-editor-button sln-editor-button-colors-btn\"\n        (dblclick)=\"focus();\" (click)=\"apply('backgroundColor')\" title=\"\u0426\u0432\u0435\u0442 \u0444\u043E\u043D\u0430\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\" tabindex=\"-1\">\n        <div class=\"format-background-color1\"></div>\n        <span class=\"sln-editor-button-colors-line\" [ngStyle]=\"{ 'background-color': colorPickerBackground.getRGBColorString() }\"></span>\n    </button>\n    <div class=\"sln-pickers\">\n        <sln-color-picker #colorPicker [colors]=\"colors\" (valueChange)=\"insertColor($event, 'textColor')\"></sln-color-picker>\n        <sln-color-picker #colorPickerBackground [isBackground]=\"true\" [colors]=\"colors\" (valueChange)=\"insertColor($event, 'backgroundColor')\"></sln-color-picker>\n    </div>\n</div>\n\n", styles: [".sln-editor-button-colors-input{inline-size:0;block-size:0;border:0}.sln-editor-button-colors-btn{position:relative;display:flex;flex-direction:column}.sln-editor-button-colors-line{width:80%;height:4px;position:absolute;bottom:0;left:50%;margin:0 auto;transform:translate(-50%)}.sln-editor-button{position:relative}.sln-pickers{position:absolute}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnHrefDialogComponent extends CoreBaseDestroyComponent {
    constructor(_dialogRef, data) {
        super();
        this._dialogRef = _dialogRef;
        this.data = data;
        this.isNewWindow = false;
    }
    ngOnInit() {
        this.hrefTitle = this.data.hrefTitle;
        this.hrefEnabled = !!this.data.hrefTitle;
    }
    execute() {
        this._dialogRef.close({ isNewWindow: this.isNewWindow, hrefTitle: this.hrefTitle, href: this.address });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnHrefDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnHrefDialogComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<core-dialog dialogTitle=\"\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0441\u0441\u044B\u043B\u043A\u0438\" width=\"700\">\n  <div body>\n    <div class=\"sln-block\">\n      <form #newForm=\"ngForm\" novalidate>\n        <div matTooltip=\"\u041E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u0432 \u043D\u043E\u0432\u043E\u043C \u043E\u043A\u043D\u0435\">\n          <core-field-bool [(ngModel)]=\"isNewWindow\" name=\"isNewWindow\" fieldName=\"isNewWindow\" placeholder=\"\u041E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u0432 \u043D\u043E\u0432\u043E\u043C \u043E\u043A\u043D\u0435\" [settings]=\"{ mode: 'Checkbox' }\" class=\"sln-href-open-mode\"></core-field-bool>\n        </div>\n        @if (!data.selectedText) {\n          <div matTooltip=\"\u0422\u0435\u043A\u0441\u0442 \u0441\u0441\u044B\u043B\u043A\u0438\">\n            <core-field-string [(ngModel)]=\"hrefTitle\" name=\"hrefTitle\" fieldName=\"hrefTitle\" placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u0441\u0441\u044B\u043B\u043A\u0438\" class=\"sln-href-title\" [disabled]=\"hrefEnabled\"></core-field-string>\n          </div>\n        }\n        <div matTooltip=\"\u0410\u0434\u0440\u0435\u0441\" tabindex=\"-1\">\n          <core-field-string [(ngModel)]=\"address\" name=\"address\" fieldName=\"address\" placeholder=\"\u0410\u0434\u0440\u0435\u0441\" class=\"sln-href-address\" tabindex=\"-1\"></core-field-string>\n        </div>\n      </form>\n    </div>\n  </div>\n  <div footer>\n    <button type=\"button\" class=\"btn-primary\" (click)=\"execute()\" tabindex=\"-1\">\n      \u041E\u043A\n    </button>\n  </div>\n</core-dialog>\n", dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.CoreFieldTypeBoolComponent, selector: "core-field-bool" }, { kind: "component", type: i3.CoreFieldTypeStringComponent, selector: "core-field-string" }, { kind: "component", type: i3.CoreDialogWindow, selector: "core-dialog", inputs: ["dialogTitle", "hasCansel", "canselText", "hasFooter", "fullScreen", "width", "minWidth", "hasTitle", "leftMenu", "resizeble", "showTicketsVersions", "showCloseConfirmDialog", "beforeClosed", "cdkDragDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnHrefDialogComponent, decorators: [{
            type: Component,
            args: [{ standalone: false, template: "<core-dialog dialogTitle=\"\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0441\u0441\u044B\u043B\u043A\u0438\" width=\"700\">\n  <div body>\n    <div class=\"sln-block\">\n      <form #newForm=\"ngForm\" novalidate>\n        <div matTooltip=\"\u041E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u0432 \u043D\u043E\u0432\u043E\u043C \u043E\u043A\u043D\u0435\">\n          <core-field-bool [(ngModel)]=\"isNewWindow\" name=\"isNewWindow\" fieldName=\"isNewWindow\" placeholder=\"\u041E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u0432 \u043D\u043E\u0432\u043E\u043C \u043E\u043A\u043D\u0435\" [settings]=\"{ mode: 'Checkbox' }\" class=\"sln-href-open-mode\"></core-field-bool>\n        </div>\n        @if (!data.selectedText) {\n          <div matTooltip=\"\u0422\u0435\u043A\u0441\u0442 \u0441\u0441\u044B\u043B\u043A\u0438\">\n            <core-field-string [(ngModel)]=\"hrefTitle\" name=\"hrefTitle\" fieldName=\"hrefTitle\" placeholder=\"\u0422\u0435\u043A\u0441\u0442 \u0441\u0441\u044B\u043B\u043A\u0438\" class=\"sln-href-title\" [disabled]=\"hrefEnabled\"></core-field-string>\n          </div>\n        }\n        <div matTooltip=\"\u0410\u0434\u0440\u0435\u0441\" tabindex=\"-1\">\n          <core-field-string [(ngModel)]=\"address\" name=\"address\" fieldName=\"address\" placeholder=\"\u0410\u0434\u0440\u0435\u0441\" class=\"sln-href-address\" tabindex=\"-1\"></core-field-string>\n        </div>\n      </form>\n    </div>\n  </div>\n  <div footer>\n    <button type=\"button\" class=\"btn-primary\" (click)=\"execute()\" tabindex=\"-1\">\n      \u041E\u043A\n    </button>\n  </div>\n</core-dialog>\n" }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }] });

class SlnImageDialogComponent {
    constructor(_dialogRef) {
        this._dialogRef = _dialogRef;
        this.autoSize = true;
        this.width = 300;
        this.height = 300;
    }
    ngOnInit() {
        this.config = new UploaderConfig(FileTypeEnum.None);
        this.config.typeName = 'Изображение с компьютера';
        this.config.hideList = true;
        this.config.multiple = false;
        this.config.hiddenLink = true;
        this.config.accept = '.png, .pjpeg, .jpeg, .pjp, .jpg, .gif';
    }
    onValuesChange($event) {
        if ($event?.length > 0) {
            this.id = $event[0].fileId;
            this.address = $event[0].fileUrl;
        }
    }
    execute() {
        this._dialogRef.close({ id: this.id, description: this.description, address: this.address, autoSize: this.autoSize, width: this.width, height: this.height });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnImageDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnImageDialogComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<core-dialog dialogTitle=\"\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\" width=\"700\">\n  <div body>\n    <div class=\"sln-block\">\n      <form #newForm=\"ngForm\" novalidate>\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-field-string [(ngModel)]=\"description\" name=\"description\" fieldName=\"description\" placeholder=\"\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435\" class=\"sln-description\"></core-field-string>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-field-bool [(ngModel)]=\"autoSize\" name=\"autoSize\" fieldName=\"autoSize\" placeholder=\"\u041D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n              [settings]=\"{ mode: 'Slide' }\"></core-field-bool>\n            </div>\n          </div>\n        </div>\n        @if (autoSize === false) {\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <core-field-number [(ngModel)]=\"width\" name=\"width\" fieldName=\"width\" placeholder=\"Width\" class=\"sln-width\"\n                [settings]=\"{ decimals: 0, minN:0 }\" tabindex=\"-1\"></core-field-number>\n              </div>\n            </div>\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <core-field-number [(ngModel)]=\"height\" name=\"height\" fieldName=\"height\" placeholder=\"Height\" class=\"sln-height\"\n                [settings]=\"{ decimals: 0, minN:0 }\" tabindex=\"-1\"></core-field-number>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-file-uploader [config]=\"config\" [(ngModel)]=\"files\" name=\"editor_image\"\n              (valueChange)=\"onValuesChange($event)\"></core-file-uploader>\n            </div>\n            <div class=\"form-group\">\n              <core-field-string [(ngModel)]=\"address\" name=\"address\" fieldName=\"address\" placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u0441\u0441\u044B\u043B\u043A\u0438\"\n              class=\"sln-address\" tabindex=\"-1\"></core-field-string>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n  <div footer>\n    <button type=\"button\" class=\"btn-primary\" (click)=\"execute()\">\n      \u041E\u043A\n    </button>\n  </div>\n</core-dialog>\n", styles: ["mat-tab-header{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.CoreFieldTypeBoolComponent, selector: "core-field-bool" }, { kind: "component", type: i3.CoreFieldTypeNumberComponent, selector: "core-field-number", inputs: ["isInt"] }, { kind: "component", type: i3.CoreFieldTypeStringComponent, selector: "core-field-string" }, { kind: "component", type: i3.CoreDialogWindow, selector: "core-dialog", inputs: ["dialogTitle", "hasCansel", "canselText", "hasFooter", "fullScreen", "width", "minWidth", "hasTitle", "leftMenu", "resizeble", "showTicketsVersions", "showCloseConfirmDialog", "beforeClosed", "cdkDragDisabled"] }, { kind: "component", type: i3.CoreFileUploaderComponent, selector: "core-file-uploader", inputs: ["config", "needUpload", "elementId", "anonymAccessItemId"], outputs: ["valueChange", "autogenerateClick", "filesLoaded"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnImageDialogComponent, decorators: [{
            type: Component,
            args: [{ standalone: false, template: "<core-dialog dialogTitle=\"\u0414\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\" width=\"700\">\n  <div body>\n    <div class=\"sln-block\">\n      <form #newForm=\"ngForm\" novalidate>\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-field-string [(ngModel)]=\"description\" name=\"description\" fieldName=\"description\" placeholder=\"\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435\" class=\"sln-description\"></core-field-string>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-field-bool [(ngModel)]=\"autoSize\" name=\"autoSize\" fieldName=\"autoSize\" placeholder=\"\u041D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C \u0440\u0430\u0437\u043C\u0435\u0440 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\"\n              [settings]=\"{ mode: 'Slide' }\"></core-field-bool>\n            </div>\n          </div>\n        </div>\n        @if (autoSize === false) {\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <core-field-number [(ngModel)]=\"width\" name=\"width\" fieldName=\"width\" placeholder=\"Width\" class=\"sln-width\"\n                [settings]=\"{ decimals: 0, minN:0 }\" tabindex=\"-1\"></core-field-number>\n              </div>\n            </div>\n            <div class=\"col-md-6\">\n              <div class=\"form-group\">\n                <core-field-number [(ngModel)]=\"height\" name=\"height\" fieldName=\"height\" placeholder=\"Height\" class=\"sln-height\"\n                [settings]=\"{ decimals: 0, minN:0 }\" tabindex=\"-1\"></core-field-number>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <div class=\"form-group\">\n              <core-file-uploader [config]=\"config\" [(ngModel)]=\"files\" name=\"editor_image\"\n              (valueChange)=\"onValuesChange($event)\"></core-file-uploader>\n            </div>\n            <div class=\"form-group\">\n              <core-field-string [(ngModel)]=\"address\" name=\"address\" fieldName=\"address\" placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u0441\u0441\u044B\u043B\u043A\u0438\"\n              class=\"sln-address\" tabindex=\"-1\"></core-field-string>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n  <div footer>\n    <button type=\"button\" class=\"btn-primary\" (click)=\"execute()\">\n      \u041E\u043A\n    </button>\n  </div>\n</core-dialog>\n", styles: ["mat-tab-header{margin-bottom:20px}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }] });

class SlnEditorButtonSpecialComponent extends BaseButtonComponent {
    get isLinkButtonDisabled() {
        return this.settings.htmlMode;
    }
    constructor(doc, _editorService, _dialog) {
        super(doc);
        this._editorService = _editorService;
        this._dialog = _dialog;
    }
    addImage() {
        const dialogRef = this._dialog.open(SlnImageDialogComponent, {
            data: { selectedText: Boolean(this._editorService.selectedText) }
        });
        const sub = dialogRef.afterClosed().subscribe((result) => {
            if (!!result.address) {
                this.getImageSize(result.address).subscribe((imgSize) => {
                    this.execute.emit('focus');
                    this._editorService.restoreSelection();
                    let html = '<div style="position: relative">'
                        + '<img id="img-' + result.id + '"'
                        + ' src="' + result.address + '"';
                    if (result.description?.length > 0) {
                        html += ' alt="' + result.description + '"';
                    }
                    if (result.autoSize !== true) {
                        html += ' width="' + result.width + '"';
                        html += ' height="' + result.height + '"';
                    }
                    else {
                        const node = this.doc.getElementById(this.settings.id + '-textarea');
                        if (imgSize.width > node.offsetWidth) {
                            const size = this._calculateRatioFit(imgSize.width, imgSize.height, node.offsetWidth);
                            html += ' width="' + size.width + '"';
                            html += ' height="' + size.height + '"';
                        }
                        else {
                            html += ' width="' + imgSize.width + '"';
                            html += ' height="' + imgSize.height + '"';
                        }
                    }
                    html += ' /></div>';
                    this._editorService.insertHtml(html);
                });
            }
            sub.unsubscribe();
        });
    }
    getImageSize(url) {
        return new Observable(observer => {
            var image = new Image();
            image.src = url;
            image.onload = (e) => {
                var height = e.target.height;
                var width = e.target.width;
                observer.next({ height: height, width: width });
                observer.complete();
            };
        });
    }
    _calculateRatioFit(srcWidth, srcHeight, maxWidth) {
        var ratio = Math.min(maxWidth / srcWidth);
        return { width: srcWidth * ratio, height: srcHeight * ratio };
    }
    addLink() {
        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;
            }
        }
        const dialogRef = this._dialog.open(SlnHrefDialogComponent, {
            data: { selectedText: Boolean(this._editorService.selectedText) }
        });
        const sub = dialogRef.afterClosed().subscribe((result) => {
            if (result.href && result.href !== '' && result.href !== 'https://') {
                this._editorService.restoreSelection();
                this._createLink(result.href, result.isNewWindow, result.hrefTitle);
            }
            sub.unsubscribe();
        });
    }
    _createLink(url, isBlank, hrefTitle) {
        let target = isBlank ? ' target="_blank"' : '';
        if (!!hrefTitle) {
            const newUrl = '<a href="' + url + '"' + target + '>' + hrefTitle + '</a>';
            this._editorService.insertHtml(newUrl);
            return;
        }
        if (!url.includes('http')) {
            this.doc.execCommand('createlink', false, url);
        }
        else {
            const newUrl = '<a href="' + url + '"' + target + '>' + this._editorService.selectedText + '</a>';
            this._editorService.insertHtml(newUrl);
        }
    }
    removeLink() {
        const aLink = this._editorService.getSelectedNodes().find(z => z.localName == 'a');
        if (aLink) {
            const text = aLink.innerText;
            aLink.parentNode.removeChild(aLink);
            this._editorService.insertHtml(text);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonSpecialComponent, deps: [{ token: DOCUMENT }, { token: EditorService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonSpecialComponent, isStandalone: false, selector: "sln-editor-button-special", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'link-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"addLink()\" [disabled]=\"isLinkButtonDisabled\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443\" [hidden]=\"isButtonHidden('link')\" tabindex=\"-1\">\n        <div class=\"format-add-link\"></div>\n    </button>\n    <button [id]=\"'unlink-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"removeLink()\" title=\"\u0423\u0431\u0440\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('unlink')\" tabindex=\"-1\">\n            <div class=\"format-add-link\"></div>\n    </button>\n    <button [id]=\"'insertImage-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"addImage()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('insertImage')\" tabindex=\"-1\">\n        <div class=\"format-add-image\"></div>\n    </button>\n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonSpecialComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-special', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'link-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"addLink()\" [disabled]=\"isLinkButtonDisabled\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443\" [hidden]=\"isButtonHidden('link')\" tabindex=\"-1\">\n        <div class=\"format-add-link\"></div>\n    </button>\n    <button [id]=\"'unlink-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"removeLink()\" title=\"\u0423\u0431\u0440\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('unlink')\" tabindex=\"-1\">\n            <div class=\"format-add-link\"></div>\n    </button>\n    <button [id]=\"'insertImage-'+ settings.id\" type=\"button\" class=\"sln-editor-button\" (click)=\"addImage()\" title=\"\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('insertImage')\" tabindex=\"-1\">\n        <div class=\"format-add-image\"></div>\n    </button>\n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }, { type: i1.MatDialog }] });

class SlnEditorButtonFormatComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this.doc = doc;
        this._editorService = _editorService;
    }
    setBold() {
        this._commanHandle('bold');
    }
    setItalic() {
        this._commanHandle('italic');
    }
    setUnderline() {
        this._commanHandle('underline');
    }
    setStrikeThrough() {
        this._commanHandle('strikeThrough');
    }
    setSubscript() {
        this._commanHandle('subscript');
    }
    setSuperscript() {
        this._commanHandle('superscript');
    }
    _commanHandle(command) {
        if (this._editorService.selectedText?.length > 0) {
            this.doc.execCommand(command, false, this._editorService.selectedText);
            this.triggerCommand('');
        }
        else {
            this.triggerCommand(command);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFormatComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonFormatComponent, isStandalone: false, selector: "sln-editor-button-format", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n  <button [id]=\"'bold-'+ settings.id\" type=\"button\" title=\"\u0416\u0438\u0440\u043D\u044B\u0439\" class=\"sln-editor-button\" \n          (click)=\"setBold()\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('bold')\" tabindex=\"-1\">          \n      <div class=\"format-bold\"></div> \n  </button>\n  <button [id]=\"'italic-'+ settings.id\" type=\"button\" title=\"\u041A\u0443\u0440\u0441\u0438\u0432\" class=\"sln-editor-button\"\n          (click)=\"setItalic()\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('italic')\" tabindex=\"-1\">                \n      <div class=\"format-italic\"></div>\n  </button>\n  <button [id]=\"'underline-' + settings.id\" type=\"button\" title=\"\u041F\u043E\u0434\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439\" class=\"sln-editor-button\"\n          (click)=\"setUnderline()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('underline')\"\n          tabindex=\"-1\">  \n    <div class=\"format-subscript\"></div>     \n  </button>\n  <button [id]=\"'strikeThrough-'+ settings.id\" type=\"button\" title=\"\u041F\u0435\u0440\u0435\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439\" class=\"sln-editor-button\"\n          (click)=\"setStrikeThrough()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('strikeThrough')\"\n          tabindex=\"-1\">   \n      <div class=\"format-strikethrough-variant\"></div>\n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n  <button [id]=\"'subscript-'+ settings.id\" type=\"button\" title=\"\u041F\u043E\u0434\u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442\" class=\"sln-editor-button\"\n          (click)=\"setSubscript()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('subscript')\"\n          tabindex=\"-1\">  \n    <div class=\"format-subscript\"></div>  \n  </button>\n  <button [id]=\"'superscript-'+ settings.id\" type=\"button\" title=\"\u041D\u0430\u0434\u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442\" class=\"sln-editor-button\"\n          (click)=\"setSuperscript()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('superscript')\"\n          tabindex=\"-1\">\n      <div class=\"format-subscript\"></div>  \n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFormatComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-format', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n  <button [id]=\"'bold-'+ settings.id\" type=\"button\" title=\"\u0416\u0438\u0440\u043D\u044B\u0439\" class=\"sln-editor-button\" \n          (click)=\"setBold()\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('bold')\" tabindex=\"-1\">          \n      <div class=\"format-bold\"></div> \n  </button>\n  <button [id]=\"'italic-'+ settings.id\" type=\"button\" title=\"\u041A\u0443\u0440\u0441\u0438\u0432\" class=\"sln-editor-button\"\n          (click)=\"setItalic()\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('italic')\" tabindex=\"-1\">                \n      <div class=\"format-italic\"></div>\n  </button>\n  <button [id]=\"'underline-' + settings.id\" type=\"button\" title=\"\u041F\u043E\u0434\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439\" class=\"sln-editor-button\"\n          (click)=\"setUnderline()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('underline')\"\n          tabindex=\"-1\">  \n    <div class=\"format-subscript\"></div>     \n  </button>\n  <button [id]=\"'strikeThrough-'+ settings.id\" type=\"button\" title=\"\u041F\u0435\u0440\u0435\u0447\u0435\u0440\u043A\u043D\u0443\u0442\u044B\u0439\" class=\"sln-editor-button\"\n          (click)=\"setStrikeThrough()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('strikeThrough')\"\n          tabindex=\"-1\">   \n      <div class=\"format-strikethrough-variant\"></div>\n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n  <button [id]=\"'subscript-'+ settings.id\" type=\"button\" title=\"\u041F\u043E\u0434\u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442\" class=\"sln-editor-button\"\n          (click)=\"setSubscript()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('subscript')\"\n          tabindex=\"-1\">  \n    <div class=\"format-subscript\"></div>  \n  </button>\n  <button [id]=\"'superscript-'+ settings.id\" type=\"button\" title=\"\u041D\u0430\u0434\u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442\" class=\"sln-editor-button\"\n          (click)=\"setSuperscript()\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('superscript')\"\n          tabindex=\"-1\">\n      <div class=\"format-subscript\"></div>  \n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnListButtonHtmlComponent extends BaseButtonComponent {
    constructor(doc, _eRef) {
        super(doc);
        this._eRef = _eRef;
        this.showBtnList = false;
    }
    changeBtnListState(event) {
    }
    clickOut(event) {
        if (event.target.name === this.name) {
            if ((this.showBtnList === true && this._eRef.nativeElement.contains(event.target)) || !this._eRef.nativeElement.contains(event.target)) {
                this.showBtnList = false;
            }
            else {
                this.showBtnList = true;
            }
        }
        else {
            if (this.showBtnList === true) {
                this.showBtnList = false;
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnListButtonHtmlComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnListButtonHtmlComponent, isStandalone: false, selector: "sln-list-button-html", inputs: { iconUrl: "iconUrl", altText: "altText", name: "name" }, host: { listeners: { "document:click": "clickOut($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n  <button type=\"button\" title=\"{{altText}}\" class=\"sln-editor-button\" (click)=\"changeBtnListState($event)\" [disabled]=\"settings.htmlMode\">\n    <div class=\"{{iconUrl}}\"[attr.alt]=\"altText\" [attr.name]=\"name\"></div>\n  </button>\n</div>\n<div class=\"btn-list-wrapper\">\n  @if (showBtnList) {\n    <ng-content>\n    </ng-content>\n  }\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnListButtonHtmlComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-list-button-html', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n  <button type=\"button\" title=\"{{altText}}\" class=\"sln-editor-button\" (click)=\"changeBtnListState($event)\" [disabled]=\"settings.htmlMode\">\n    <div class=\"{{iconUrl}}\"[attr.alt]=\"altText\" [attr.name]=\"name\"></div>\n  </button>\n</div>\n<div class=\"btn-list-wrapper\">\n  @if (showBtnList) {\n    <ng-content>\n    </ng-content>\n  }\n</div>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef }], propDecorators: { iconUrl: [{
                type: Input
            }], altText: [{
                type: Input
            }], name: [{
                type: Input
            }], clickOut: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

class SlnEditorButtonListsComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this.doc = doc;
        this._editorService = _editorService;
        this.defaultSortedListIconUrl = 'format-nums';
        this.defaultMarkedListIconUrl = 'format-black-square-num-list';
        this.groupNameNum = 'list_number';
        this.groupNameMark = 'list_marked';
        this.icons = [
            { iconUrl: 'format-big-roman-numerals', altText: 'Римские цифры в верхнем регистре', type: 'I' },
            { iconUrl: 'format-smal-latin-letters', altText: 'Cтрочные латинские буквы', type: 'a' },
            { iconUrl: 'format-big-latin-letters', altText: 'Прописные латинские буквы', type: 'A' },
            { iconUrl: 'format-smal-roman-numerals', altText: 'Римские цифры в нижнем регистре', type: 'i' },
            { iconUrl: 'format-nums', altText: 'Нумерованный список', type: '1' },
            { iconUrl: 'format-black-circle-num-list', altText: 'Круг с заливкой', type: 'list-style-disc' },
            { iconUrl: 'format-white-circle-num-list', altText: 'Круг без заливки', type: 'list-style-circle' },
            { iconUrl: 'format-black-square-num-list', altText: 'Квадрат с заливкой', type: 'list-style-square' },
        ];
        this.sortedListIconUrl = this.defaultSortedListIconUrl;
        this.markedListIconUrl = this.defaultMarkedListIconUrl;
    }
    ngOnInit() {
        this.listsChekerId = setInterval(() => this.handleForSelectedList(), 1000);
    }
    getIconUrl(type) {
        return this.icons.find(x => x.type === type).iconUrl;
    }
    handleForSelectedList() {
        let selected = this._editorService.getSelectedNodes();
        let olType = selected.find(z => z.localName === 'ol')?.type;
        if (!!olType) {
            this.sortedListIconUrl = this.getIconUrl(olType);
        }
        else {
            this.sortedListIconUrl = this.defaultSortedListIconUrl;
        }
        let liType = selected.find(z => z.localName === 'ul')?.classList[0];
        if (!!liType) {
            this.markedListIconUrl = this.getIconUrl(liType);
        }
        else {
            this.markedListIconUrl = this.defaultMarkedListIconUrl;
        }
    }
    insertUnorderedList(type) {
        this._createCustomListClass(type);
    }
    _createCustomListClass(customClass) {
        const ul = this._editorService.getSelectedNodes().find(z => z.localName == 'ul');
        if (ul) {
            ul.className = customClass;
        }
        else {
            let newTag = this._editorService.selectedText;
            let html = '<ul class="' + customClass + '">';
            newTag.split('\n').filter(z => z != '').forEach(e => {
                html += '<li>' + e + '</li>';
            });
            this._editorService.insertHtml(html);
        }
    }
    insertOrderedList(type) {
        this._editorService.doc.execCommand('insertOrderedList', null, 'ordered');
        let ol = this._editorService.getSelectedNodes().find(z => z.localName == 'ol');
        if (ol) {
            ol.setAttribute('type', type);
        }
        else {
            this._editorService.doc.execCommand('insertOrderedList', null, 'ordered');
            ol = this._editorService.getSelectedNodes().find(z => z.localName == 'ol');
            ol.setAttribute('type', type);
        }
    }
    isActive(classStyle) {
        let list = this._editorService.monitoredItems;
        let isActive = false;
        if (!!list) {
            isActive = list.selectedClassList == classStyle;
        }
        return isActive;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonListsComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonListsComponent, isStandalone: false, selector: "sln-editor-button-lists", usesInheritance: true, ngImport: i0, template: "<sln-list-button-html [settings]=\"settings\" name=\"{{groupNameNum}}\" class=\"sln-list-button-html-wrapper\" [iconUrl]=\"sortedListIconUrl\" altText=\"\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A\">\n  <div class=\"sln-editor-toolbar-set sortedListIconUrl\">\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u0420\u0438\u043C\u0441\u043A\u0438\u0435 \u0446\u0438\u0444\u0440\u044B \u0432 \u0432\u0435\u0440\u0445\u043D\u0435\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('I')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-big-roman-numerals\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"C\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('a')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-smal-latin-letters\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u041F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('A')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-big-latin-letters\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u0420\u0438\u043C\u0441\u043A\u0438\u0435 \u0446\u0438\u0444\u0440\u044B \u0432 \u043D\u0438\u0436\u043D\u0435\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('i')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-smal-roman-numerals\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-nums\"></div>\n    </button>\n  </div>\n</sln-list-button-html>\n\n<sln-list-button-html [settings]=\"settings\" name=\"{{groupNameMark}}\" class=\"sln-list-button-html-wrapper\" [iconUrl]=\"markedListIconUrl\" [altText]=\"'\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A'\">\n  <div class=\"sln-editor-toolbar-set markedListIconUrl\">\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0440\u0443\u0433 \u0441 \u0437\u0430\u043B\u0438\u0432\u043A\u043E\u0439\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-disc')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\">\n        <div class=\"format-black-circle-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0440\u0443\u0433 \u0431\u0435\u0437 \u0437\u0430\u043B\u0438\u0432\u043A\u0438\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-circle')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\">\n        <div class=\"format-white-circle-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0432\u0430\u0434\u0440\u0430\u0442 \u0441 \u0437\u0430\u043B\u0438\u0432\u043A\u043E\u0439\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-square')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\" class=\"sln-editor-button\">\n        <div class=\"format-black-square-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n  </div>\n</sln-list-button-html>\n", styles: [".sortedListIconUrl,.markedListIconUrl{width:40px}.sortedListIconUrl .sln-editor-button,.markedListIconUrl .sln-editor-button{width:100%}.black-square-num-list img{height:32px}\n"], dependencies: [{ kind: "component", type: SlnListButtonHtmlComponent, selector: "sln-list-button-html", inputs: ["iconUrl", "altText", "name"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonListsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-lists', standalone: false, template: "<sln-list-button-html [settings]=\"settings\" name=\"{{groupNameNum}}\" class=\"sln-list-button-html-wrapper\" [iconUrl]=\"sortedListIconUrl\" altText=\"\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A\">\n  <div class=\"sln-editor-toolbar-set sortedListIconUrl\">\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u0420\u0438\u043C\u0441\u043A\u0438\u0435 \u0446\u0438\u0444\u0440\u044B \u0432 \u0432\u0435\u0440\u0445\u043D\u0435\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('I')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-big-roman-numerals\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"C\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('a')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-smal-latin-letters\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u041F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u043A\u0432\u044B\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('A')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-big-latin-letters\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u0420\u0438\u043C\u0441\u043A\u0438\u0435 \u0446\u0438\u0444\u0440\u044B \u0432 \u043D\u0438\u0436\u043D\u0435\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('i')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-smal-roman-numerals\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertOrderedList-'+ settings.id\" type=\"button\" title=\"\u041D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A\" class=\"sln-editor-button\"\n            (click)=\"insertOrderedList('')\" [disabled]=\"settings.htmlMode\"\n            [hidden]=\"isButtonHidden('insertOrderedList')\" tabindex=\"-1\">\n      <div class=\"format-nums\"></div>\n    </button>\n  </div>\n</sln-list-button-html>\n\n<sln-list-button-html [settings]=\"settings\" name=\"{{groupNameMark}}\" class=\"sln-list-button-html-wrapper\" [iconUrl]=\"markedListIconUrl\" [altText]=\"'\u041C\u0430\u0440\u043A\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A'\">\n  <div class=\"sln-editor-toolbar-set markedListIconUrl\">\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0440\u0443\u0433 \u0441 \u0437\u0430\u043B\u0438\u0432\u043A\u043E\u0439\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-disc')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\">\n        <div class=\"format-black-circle-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0440\u0443\u0433 \u0431\u0435\u0437 \u0437\u0430\u043B\u0438\u0432\u043A\u0438\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-circle')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\">\n        <div class=\"format-white-circle-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n    <button [id]=\"'insertUnorderedList-'+ settings.id\" type=\"button\" title=\"\u041A\u0432\u0430\u0434\u0440\u0430\u0442 \u0441 \u0437\u0430\u043B\u0438\u0432\u043A\u043E\u0439\" class=\"sln-editor-button\"\n        (click)=\"insertUnorderedList('list-style-square')\" [disabled]=\"settings.htmlMode\"\n        [hidden]=\"isButtonHidden('insertUnorderedList')\" tabindex=\"-1\" class=\"sln-editor-button\">\n        <div class=\"format-black-square-num-list\" [attr.name]=\"groupNameNum\"></div>\n    </button>\n  </div>\n</sln-list-button-html>\n", styles: [".sortedListIconUrl,.markedListIconUrl{width:40px}.sortedListIconUrl .sln-editor-button,.markedListIconUrl .sln-editor-button{width:100%}.black-square-num-list img{height:32px}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnEditorButtonTabsComponent extends BaseButtonComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonTabsComponent, isStandalone: false, selector: "sln-editor-button-tabs", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n  <button [id]=\"'indent-' + settings.id\" type=\"button\" title=\"\u0421\u0434\u0432\u0438\u043D\u0443\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E\" class=\"sln-editor-button\"\n          (click)=\"triggerCommand('indent')\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('indent')\" tabindex=\"-1\">\n    <div class=\"format-indent-increase\"></div>\n  </button>\n  <button [id]=\"'outdent-' + settings.id\" type=\"button\" title=\"\u0421\u0434\u0432\u0438\u043D\u0443\u0442\u044C \u0432\u043B\u0435\u0432\u043E\" class=\"sln-editor-button\"\n          (click)=\"triggerCommand('outdent')\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('outdent')\" tabindex=\"-1\">   \n    <div class=\"format-indent-decrease\"></div> \n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-tabs', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n  <button [id]=\"'indent-' + settings.id\" type=\"button\" title=\"\u0421\u0434\u0432\u0438\u043D\u0443\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E\" class=\"sln-editor-button\"\n          (click)=\"triggerCommand('indent')\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('indent')\" tabindex=\"-1\">\n    <div class=\"format-indent-increase\"></div>\n  </button>\n  <button [id]=\"'outdent-' + settings.id\" type=\"button\" title=\"\u0421\u0434\u0432\u0438\u043D\u0443\u0442\u044C \u0432\u043B\u0435\u0432\u043E\" class=\"sln-editor-button\"\n          (click)=\"triggerCommand('outdent')\"\n          [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('outdent')\" tabindex=\"-1\">   \n    <div class=\"format-indent-decrease\"></div> \n  </button>  \n  <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }]
        }] });

class SlnEditorButtonFormatClearComponent extends BaseButtonComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFormatClearComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonFormatClearComponent, isStandalone: false, selector: "sln-editor-button-format-clear", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'clearFormatting-'+ settings.id\" type=\"button\" title=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u043E\u0440\u043C\u0430\u0442\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('removeFormat')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\"\n            tabindex=\"-1\">\n        <div class=\"format-format-clear\"></div>\n    </button>\n  </div>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFormatClearComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-format-clear', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'clearFormatting-'+ settings.id\" type=\"button\" title=\"\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u043E\u0440\u043C\u0430\u0442\" class=\"sln-editor-button\"\n            (click)=\"triggerCommand('removeFormat')\" [disabled]=\"settings.htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\"\n            tabindex=\"-1\">\n        <div class=\"format-format-clear\"></div>\n    </button>\n  </div>" }]
        }] });

class SlnEditorButtonHtmlComponent extends BaseButtonComponent {
    constructor(doc, r) {
        super(doc);
        this.r = r;
    }
    setEditorMode(m) {
        const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.settings.id);
        if (m) {
            this.r.addClass(toggleEditorModeButton, 'active');
        }
        else {
            this.r.removeClass(toggleEditorModeButton, 'active');
        }
        this.settings.htmlMode = m;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonHtmlComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonHtmlComponent, isStandalone: false, selector: "sln-editor-button-html", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'toggleEditorMode-'+ settings.id\" type=\"button\" title=\"HTML \u043A\u043E\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\" tabindex=\"-1\">\n      <div class=\"format-code\"></div>\n    </button>\n  </div>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonHtmlComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-html', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <button [id]=\"'toggleEditorMode-'+ settings.id\" type=\"button\" title=\"HTML \u043A\u043E\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\" tabindex=\"-1\">\n      <div class=\"format-code\"></div>\n    </button>\n  </div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.Renderer2 }] });

class SlnEditorSelectComponent {
    get label() {
        return this.selectedOption && this.selectedOption.hasOwnProperty('label') ? this.selectedOption.label : 'Select';
    }
    get value() {
        return this.selectedOption.value;
    }
    constructor(elRef, r) {
        this.elRef = elRef;
        this.r = r;
        this.options = [];
        this.disabled = false;
        this.optionId = 0;
        this.opened = false;
        this.hidden = 'inline-block';
        this.changeEvent = new EventEmitter();
        this.onChange = () => {
        };
        this.onTouched = () => {
        };
    }
    ngOnInit() {
        this.selectedOption = this.options[0];
        if (!Utility.isEmpty(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;
        }
        // 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 ?? 0) - 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnEditorSelectComponent, isStandalone: false, selector: "sln-editor-select", inputs: { options: "options", isHidden: "isHidden" }, outputs: { changeEvent: "changeEvent" }, host: { listeners: { "document:click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "style.display": "this.hidden" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SlnEditorSelectComponent),
                multi: true,
            }
        ], viewQueries: [{ propertyName: "labelButton", first: true, predicate: ["labelButton"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ae-font ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"0\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <div class=\"format-arrow-down-gray\"></div>\n  </button>\n  <div class=\"ae-picker-options\">\n    @for (item of options; track item; let i = $index) {\n      <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n        [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n        (click)=\"optionSelect(item, $event)\">\n        {{item.label}}\n      </button>\n    }\n    @if (!options?.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </div>\n</div>\n", styles: [".ae-font.ae-picker{color:var(--DARK-GREY);display:inline-block;float:left;position:relative;vertical-align:middle;text-align:center}.ae-font .ae-picker-label{cursor:pointer;display:inline-block;height:100%;position:relative;width:100%;padding:0 10px;line-height:26px;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:none;border-bottom:1px solid #e2e8ea;text-overflow:clip;overflow:hidden;white-space:nowrap}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#e2e8ea;transition:.2s ease;border-radius:4px}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label img{display:inline}.ae-font .ae-picker-label svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:var(--WHITE);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-font .ae-picker-options .ae-picker-item.selected{background-color:#e7f5ff;color:var(--DARK-GREY)}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#e7f5ff}.ae-font.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-font.ae-expanded .ae-picker-label{color:var(--DARK-GREY);z-index:2}.ae-font.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-font.ae-expanded .ae-picker-options{display:block;margin-top:5px;top:100%;z-index:3;border-color:#ccc;border:none;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-select', encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SlnEditorSelectComponent),
                            multi: true,
                        }
                    ], standalone: false, template: "<div class=\"ae-font ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"0\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <div class=\"format-arrow-down-gray\"></div>\n  </button>\n  <div class=\"ae-picker-options\">\n    @for (item of options; track item; let i = $index) {\n      <button tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n        [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n        (click)=\"optionSelect(item, $event)\">\n        {{item.label}}\n      </button>\n    }\n    @if (!options?.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </div>\n</div>\n", styles: [".ae-font.ae-picker{color:var(--DARK-GREY);display:inline-block;float:left;position:relative;vertical-align:middle;text-align:center}.ae-font .ae-picker-label{cursor:pointer;display:inline-block;height:100%;position:relative;width:100%;padding:0 10px;line-height:26px;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:none;border-bottom:1px solid #e2e8ea;text-overflow:clip;overflow:hidden;white-space:nowrap}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#e2e8ea;transition:.2s ease;border-radius:4px}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label img{display:inline}.ae-font .ae-picker-label svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:var(--WHITE);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;width:100%;border:0 solid #ddd}.ae-font .ae-picker-options .ae-picker-item.selected{background-color:#e7f5ff;color:var(--DARK-GREY)}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#e7f5ff}.ae-font.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-font.ae-expanded .ae-picker-label{color:var(--DARK-GREY);z-index:2}.ae-font.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-font.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-font.ae-expanded .ae-picker-options{display:block;margin-top:5px;top:100%;z-index:3;border-color:#ccc;border:none;border-radius:4px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { options: [{
                type: Input
            }], isHidden: [{
                type: Input
            }], hidden: [{
                type: HostBinding,
                args: ['style.display']
            }], changeEvent: [{
                type: Output
            }], labelButton: [{
                type: ViewChild,
                args: ['labelButton', { static: true }]
            }], onClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }], handleKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class SlnEditorButtonTextsComponent extends BaseButtonComponent {
    constructor(doc) {
        super(doc);
        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: 'Paragraph',
                value: 'p',
            }
        ];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTextsComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonTextsComponent, isStandalone: false, selector: "sln-editor-button-texts", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n\n    <sln-editor-select class=\"select-heading\" [options]=\"headings\"\n               [(ngModel)]=\"settings.block\"\n               (changeEvent)=\"triggerCommand(settings.block)\"\n               [disabled]=\"settings.htmlMode\"\n               [hidden]=\"isButtonHidden('heading')\"\n               tabindex=\"-1\"></sln-editor-select>\n  </div>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SlnEditorSelectComponent, selector: "sln-editor-select", inputs: ["options", "isHidden"], outputs: ["changeEvent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonTextsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-texts', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n\n    <sln-editor-select class=\"select-heading\" [options]=\"headings\"\n               [(ngModel)]=\"settings.block\"\n               (changeEvent)=\"triggerCommand(settings.block)\"\n               [disabled]=\"settings.htmlMode\"\n               [hidden]=\"isButtonHidden('heading')\"\n               tabindex=\"-1\"></sln-editor-select>\n  </div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }] });

class SlnEditorButtonFontsComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this._editorService = _editorService;
        this.fonts = [
            { value: 'Arial', label: 'Arial' },
            { value: 'Times New Roman', label: 'Times New Roman' },
            { value: 'Calibri', label: 'Calibri' },
            { value: 'Comic Sans MS', label: 'Comic Sans MS' }
        ];
    }
    setFontName(fontName) {
        const span = this._editorService.getSelectedNodes().find(z => z.localName == 'span');
        if (span) {
            span.style['font-family'] = fontName + ', serif';
        }
        else {
            const selected = this._editorService.selectedText;
            const html = '<span style="font-family:' + fontName + ', serif">' + selected + '</span>';
            this._editorService.insertHtml(html);
        }
        this.execute.emit('');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFontsComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonFontsComponent, isStandalone: false, selector: "sln-editor-button-fonts", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <sln-editor-select class=\"select-font\" [options]=\"fonts\"\n               [(ngModel)]=\"settings.fontName\"\n               (changeEvent)=\"setFontName(settings.fontName)\"\n               [disabled]=\"settings.htmlMode\"\n               [hidden]=\"isButtonHidden('fontName')\"\n               tabindex=\"-1\">\n    </sln-editor-select>\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SlnEditorSelectComponent, selector: "sln-editor-select", inputs: ["options", "isHidden"], outputs: ["changeEvent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFontsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-fonts', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <sln-editor-select class=\"select-font\" [options]=\"fonts\"\n               [(ngModel)]=\"settings.fontName\"\n               (changeEvent)=\"setFontName(settings.fontName)\"\n               [disabled]=\"settings.htmlMode\"\n               [hidden]=\"isButtonHidden('fontName')\"\n               tabindex=\"-1\">\n    </sln-editor-select>\n</div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnStepInputComponent {
    constructor(_editorService) {
        this._editorService = _editorService;
        this.title = "Stepper input";
        this.step = 1;
        this.min = 1;
        this.max = 36;
        this.changeEvent = new EventEmitter();
        this.value = 0;
        this.wrapperHide = true;
        this.toggleMore = () => {
            if (+this.value + this.step <= this.max) {
                this.value = +this.value + this.step;
            }
            this.changeEvent.emit(this.value);
        };
        this.toggleLess = () => {
            if (+this.value - this.step >= this.min) {
                this.value = +this.value - this.step;
            }
            this.changeEvent.emit(this.value);
        };
    }
    ngOnInit() {
        this.value = this.initialValue;
        this.fontChekerId = setInterval(() => this.handleForSelectedFontSize(), 1000);
    }
    ngOnDestroy() {
        if (this.fontChekerId) {
            clearInterval(this.fontChekerId);
        }
    }
    handleForSelectedFontSize() {
        let selected = this._editorService.getSelectedNodes();
        let fontSize = selected.find(z => z.localName === 'font')?.size;
        if (!!fontSize) {
            this.value = fontSize;
        }
    }
    changeValue(value) {
        if (+value > this.max) {
            value = this.max;
        }
        if (+value < this.min) {
            value = this.min;
        }
        this.value = +value;
        this.initialValue = value;
        this.changeEvent.emit(this.value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnStepInputComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnStepInputComponent, isStandalone: false, selector: "sln-step-input", inputs: { initialValue: "initialValue", step: "step", min: "min", max: "max", symbol: "symbol", ariaLabelLess: "ariaLabelLess", ariaLabelMore: "ariaLabelMore", isHidden: "isHidden", disabled: "disabled" }, outputs: { changeEvent: "changeEvent" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SlnStepInputComponent),
                multi: true
            }
        ], ngImport: i0, template: "@if (!isHidden) {\n  <span class=\"ae-font ae-picker\"> </span>\n  <div #stepperWrapper class=\"stepper-input stepper__input\">\n    <button class=\"toggle-less\" (click)=\"toggleLess()\" [disabled]=\"disabled\"> <p>-</p> </button>\n    <div\n      class=\"stepper-input-field\"\n      name=\"range-value\"\n      aria-atomic=\"true\"\n      aria-live=\"polite\"\n      aria-relevant=\"all\"\n      >\n      {{ value }}\n    </div>\n    <button class=\"toggle-more\" (click)=\"toggleMore()\" [disabled]=\"disabled\"> <p>+</p> </button>\n  </div>\n}\n", styles: [".stepper__input{border:1px solid #e2e8ea;border-radius:4px;display:flex;height:29px;align-items:center;margin:0 10px 0 0;justify-content:space-between;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center}.stepper__input .stepper-input-field{color:var(--DARK-GREY);font-size:15px;user-select:none;font-family:var(--font-medium);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-box-flex:1;-ms-flex-positive:1}.stepper__input button{margin:5px 7px;width:20px;height:20px;background-color:#e2e8ea;color:var(--DARK-GREY);-webkit-user-select:none;user-select:none;border:none;font-family:var(--font-medium);border-radius:4px;line-height:0;cursor:pointer}.stepper__input button p{font-family:var(--font-medium);display:inline-block}.ae-font.ae-picker{color:var(--DARK-GREY);display:inline-block;float:left;position:relative;vertical-align:middle;text-align:center}.ae-font .ae-picker-label{cursor:pointer;height:30px!important;display:inline-block;height:100%;padding:0 10px;position:relative;width:100%;line-height:26px;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:none;border-bottom:1px solid #e2e8ea;text-overflow:clip;overflow:hidden;white-space:nowrap}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#e2e8ea;transition:.2s ease;border-radius:4px}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label img{display:inline}.ae-font .ae-picker-label svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:var(--WHITE);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .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-font .ae-picker-options .ae-picker-item.selected{background-color:#e7f5ff;color:var(--DARK-GREY)}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#e7f5ff}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnStepInputComponent, decorators: [{
            type: Component,
            args: [{ selector: "sln-step-input", encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SlnStepInputComponent),
                            multi: true
                        }
                    ], standalone: false, template: "@if (!isHidden) {\n  <span class=\"ae-font ae-picker\"> </span>\n  <div #stepperWrapper class=\"stepper-input stepper__input\">\n    <button class=\"toggle-less\" (click)=\"toggleLess()\" [disabled]=\"disabled\"> <p>-</p> </button>\n    <div\n      class=\"stepper-input-field\"\n      name=\"range-value\"\n      aria-atomic=\"true\"\n      aria-live=\"polite\"\n      aria-relevant=\"all\"\n      >\n      {{ value }}\n    </div>\n    <button class=\"toggle-more\" (click)=\"toggleMore()\" [disabled]=\"disabled\"> <p>+</p> </button>\n  </div>\n}\n", styles: [".stepper__input{border:1px solid #e2e8ea;border-radius:4px;display:flex;height:29px;align-items:center;margin:0 10px 0 0;justify-content:space-between;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center}.stepper__input .stepper-input-field{color:var(--DARK-GREY);font-size:15px;user-select:none;font-family:var(--font-medium);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-box-flex:1;-ms-flex-positive:1}.stepper__input button{margin:5px 7px;width:20px;height:20px;background-color:#e2e8ea;color:var(--DARK-GREY);-webkit-user-select:none;user-select:none;border:none;font-family:var(--font-medium);border-radius:4px;line-height:0;cursor:pointer}.stepper__input button p{font-family:var(--font-medium);display:inline-block}.ae-font.ae-picker{color:var(--DARK-GREY);display:inline-block;float:left;position:relative;vertical-align:middle;text-align:center}.ae-font .ae-picker-label{cursor:pointer;height:30px!important;display:inline-block;height:100%;padding:0 10px;position:relative;width:100%;line-height:26px;vertical-align:middle;font-size:85%;text-align:left;background-color:#fff;min-width:2rem;float:left;border:none;border-bottom:1px solid #e2e8ea;text-overflow:clip;overflow:hidden;white-space:nowrap}.ae-font .ae-picker-label:focus{outline:none}.ae-font .ae-picker-label:hover{cursor:pointer;background-color:#e2e8ea;transition:.2s ease;border-radius:4px}.ae-font .ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-font .ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-font .ae-picker-label img{display:inline}.ae-font .ae-picker-label svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ae-font .ae-picker-label svg:not(:root){overflow:hidden}.ae-font .ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-font .ae-picker-options{background-color:var(--WHITE);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-font .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-font .ae-picker-options .ae-picker-item.selected{background-color:#e7f5ff;color:var(--DARK-GREY)}.ae-font .ae-picker-options .ae-picker-item.focused,.ae-font .ae-picker-options .ae-picker-item:hover{background-color:#e7f5ff}\n"] }]
        }], ctorParameters: () => [{ type: EditorService }], propDecorators: { initialValue: [{
                type: Input
            }], step: [{
                type: Input
            }], min: [{
                type: Input
            }], max: [{
                type: Input
            }], symbol: [{
                type: Input
            }], ariaLabelLess: [{
                type: Input
            }], ariaLabelMore: [{
                type: Input
            }], isHidden: [{
                type: Input
            }], disabled: [{
                type: Input
            }], changeEvent: [{
                type: Output
            }] } });

class SlnEditorButtonFontSizesComponent extends BaseButtonComponent {
    constructor(doc, _editorService) {
        super(doc);
        this._editorService = _editorService;
    }
    setFontSize(fontSize) {
        const span = this._editorService.getSelectedNodes().find(z => z.localName == 'span');
        if (span) {
            span.style['font-size'] = fontSize + 'px';
        }
        else {
            const selected = this._editorService.selectedText;
            const html = '<span style="font-size:' + fontSize + 'px">' + selected + '</span>';
            this._editorService.insertHtml(html);
        }
        this.execute.emit('');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFontSizesComponent, deps: [{ token: DOCUMENT }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonFontSizesComponent, isStandalone: false, selector: "sln-editor-button-font-sizes", usesInheritance: true, ngImport: i0, template: "<sln-step-input\n  [initialValue]=\"settings.fontSize\"\n  [min]=\"10\"\n  [max]=\"72\"\n  (changeEvent)=\"setFontSize($event)\"\n  [hidden]=\"isButtonHidden('fontSize')\"\n  [disabled]=\"settings.htmlMode\"\n>\n</sln-step-input>\n", dependencies: [{ kind: "component", type: SlnStepInputComponent, selector: "sln-step-input", inputs: ["initialValue", "step", "min", "max", "symbol", "ariaLabelLess", "ariaLabelMore", "isHidden", "disabled"], outputs: ["changeEvent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonFontSizesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-font-sizes', standalone: false, template: "<sln-step-input\n  [initialValue]=\"settings.fontSize\"\n  [min]=\"10\"\n  [max]=\"72\"\n  (changeEvent)=\"setFontSize($event)\"\n  [hidden]=\"isButtonHidden('fontSize')\"\n  [disabled]=\"settings.htmlMode\"\n>\n</sln-step-input>\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: EditorService }] });

class SlnEditorToolbarComponent {
    // @ViewChild('fileInput', {static: true}) myInputFile: ElementRef;
    constructor(doc, r, editorService, er, _eventBroker) {
        this.doc = doc;
        this.r = r;
        this.editorService = editorService;
        this.er = er;
        this._eventBroker = _eventBroker;
        this.execute = new EventEmitter();
        this.editMode = false;
    }
    triggerCommand($event) {
        this.editorService.executeCommand($event);
        this.triggerButtons();
        this.execute.emit($event);
    }
    triggerButtons() {
        if (!this.showToolbar) {
            return;
        }
        EditorConstants.buttons.forEach(e => {
            const result = this.doc.queryCommandState(e);
            const elementById = this.doc.getElementById(e + '-' + this.settings.id);
            if (!!elementById) {
                if (result && !!this.r) {
                    this.r.addClass(elementById, 'active');
                    this._eventBroker.emit('button-trigger-event', { status: 'active', element: elementById });
                }
                else {
                    this.r?.removeClass(elementById, 'active');
                    this._eventBroker.emit('button-trigger-event', { status: 'not', element: elementById });
                }
            }
        });
    }
    triggerBlocks(nodes) {
        if (!this.showToolbar) {
            return;
        }
        this.settings.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
        let found = false;
        EditorConstants.select.forEach(y => {
            const node = nodes.find(x => x.nodeName === y);
            if (node !== undefined && y === node.nodeName) {
                if (found === false) {
                    this.settings.block = node.nodeName.toLowerCase();
                    found = true;
                }
            }
            else if (found === false) {
                this.settings.block = 'default';
            }
        });
        Object.keys(EditorConstants.tagMap).map(e => {
            const elementById = this.doc.getElementById(EditorConstants.tagMap[e] + '-' + this.settings.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.settings.foreColour = this.doc.queryCommandValue('ForeColor');
        this.settings.fontSize = this.doc.queryCommandValue('FontSize');
        this.settings.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
        this.settings.backColor = this.doc.queryCommandValue('backColor');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorToolbarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: EditorService }, { token: i0.ElementRef }, { token: i3.EventBrokerService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnEditorToolbarComponent, isStandalone: false, selector: "sln-editor-toolbar", inputs: { settings: "settings", showToolbar: "showToolbar" }, outputs: { execute: "execute" }, viewQueries: [{ propertyName: "htmlButton", first: true, predicate: ["htmlButton"], descendants: true }], ngImport: i0, template: "@if (showToolbar) {\n  <div class=\"sln-editor-toolbar\">\n    <!--<sln-editor-button-arrow [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-arrow>-->\n    <sln-editor-button-format [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-format>\n    <sln-editor-button-align [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-align>\n    <sln-editor-button-tabs [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-tabs>\n    <sln-editor-button-text-case [settings]=\"settings\"></sln-editor-button-text-case>\n    <sln-editor-button-lists [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-lists>\n    <sln-editor-button-texts [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-texts>\n    <sln-editor-button-fonts [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-fonts>\n    <sln-editor-button-font-sizes [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-font-sizes>\n    <sln-editor-button-colors [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-colors>\n    <sln-editor-button-text-customs [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-text-customs>\n    <sln-editor-button-special [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-special>\n    <sln-editor-button-format-clear [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-format-clear>\n    <sln-editor-button-table-picker [settings]=\"settings\" style=\"display: flex;\"></sln-editor-button-table-picker>\n    <sln-editor-button-preview [settings]=\"settings\" ></sln-editor-button-preview>\n    <sln-editor-button-html #htmlButton [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-html>\n  </div>\n}\n", dependencies: [{ kind: "component", type: SlnEditorButtonAlignComponent, selector: "sln-editor-button-align" }, { kind: "component", type: SlnEditorButtonTextCaseComponent, selector: "sln-editor-button-text-case" }, { kind: "component", type: SlnEditorButtonPreviewComponent, selector: "sln-editor-button-preview" }, { kind: "component", type: SlnEditorButtonTablePickerComponent, selector: "sln-editor-button-table-picker" }, { kind: "component", type: SlnEditorButtonColorsComponent, selector: "sln-editor-button-colors" }, { kind: "component", type: SlnEditorButtonSpecialComponent, selector: "sln-editor-button-special" }, { kind: "component", type: SlnEditorButtonFormatComponent, selector: "sln-editor-button-format" }, { kind: "component", type: SlnEditorButtonListsComponent, selector: "sln-editor-button-lists" }, { kind: "component", type: SlnEditorButtonTabsComponent, selector: "sln-editor-button-tabs" }, { kind: "component", type: SlnEditorButtonFormatClearComponent, selector: "sln-editor-button-format-clear" }, { kind: "component", type: SlnEditorButtonHtmlComponent, selector: "sln-editor-button-html" }, { kind: "component", type: SlnEditorButtonTextsComponent, selector: "sln-editor-button-texts" }, { kind: "component", type: SlnEditorButtonFontsComponent, selector: "sln-editor-button-fonts" }, { kind: "component", type: SlnEditorButtonFontSizesComponent, selector: "sln-editor-button-font-sizes" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorToolbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-toolbar', standalone: false, template: "@if (showToolbar) {\n  <div class=\"sln-editor-toolbar\">\n    <!--<sln-editor-button-arrow [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-arrow>-->\n    <sln-editor-button-format [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-format>\n    <sln-editor-button-align [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-align>\n    <sln-editor-button-tabs [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-tabs>\n    <sln-editor-button-text-case [settings]=\"settings\"></sln-editor-button-text-case>\n    <sln-editor-button-lists [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-lists>\n    <sln-editor-button-texts [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-texts>\n    <sln-editor-button-fonts [settings]=\"settings\" (execute)=\"triggerCommand($event)\"></sln-editor-button-fonts>\n    <sln-editor-button-font-sizes [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-font-sizes>\n    <sln-editor-button-colors [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-colors>\n    <sln-editor-button-text-customs [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-text-customs>\n    <sln-editor-button-special [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-special>\n    <sln-editor-button-format-clear [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-format-clear>\n    <sln-editor-button-table-picker [settings]=\"settings\" style=\"display: flex;\"></sln-editor-button-table-picker>\n    <sln-editor-button-preview [settings]=\"settings\" ></sln-editor-button-preview>\n    <sln-editor-button-html #htmlButton [settings]=\"settings\" (execute)=\"triggerCommand($event)\" style=\"display: flex;\"></sln-editor-button-html>\n  </div>\n}\n" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.Renderer2 }, { type: EditorService }, { type: i0.ElementRef }, { type: i3.EventBrokerService }], propDecorators: { settings: [{
                type: Input
            }], showToolbar: [{
                type: Input
            }], execute: [{
                type: Output
            }], htmlButton: [{
                type: ViewChild,
                args: ["htmlButton"]
            }] } });

class SlnEditorComponent {
    onFocus() {
        this.focusFn();
    }
    constructor(_injector, defaultTabIndex, autoFocus, doc, sanitizer, overlay, r, _editorService) {
        this._injector = _injector;
        this.autoFocus = autoFocus;
        this.doc = doc;
        this.sanitizer = sanitizer;
        this.overlay = overlay;
        this.r = r;
        this._editorService = _editorService;
        this.modeVisual = true;
        this.showPlaceholder = false;
        this.disabled = false;
        this.focused = false;
        this.touched = false;
        this.changed = false;
        this.id = '';
        this.config = mainEditorConfig;
        this.placeholder = '';
        this.viewMode = new EventEmitter();
        this.blurEvent = new EventEmitter();
        this.focusEvent = new EventEmitter();
        this.tabindex = -1;
        this.tableEditorIsOpen = false;
        const parsedTabIndex = Number(defaultTabIndex);
        this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
    }
    ngOnInit() {
        this.settings = new ToolbarSettings(this.id);
        this.settings.hiddenButtons = this.config.toolbarHiddenButtons;
        this.chekerTargetNodeId = setInterval(() => this.handleForTargetNode(), 300);
    }
    ngAfterViewInit() {
        if (!Utility.isEmpty(this.autoFocus)) {
            this.focusFn();
        }
    }
    handleForTargetNode() {
        this._editorService.updateMonitoredItems();
        if (!!this._editorService.monitoredItems.selectedTableCell) {
            this.tableTargetHandler(this._editorService.monitoredItems.selectedTableCell);
        }
        else {
            if (!!this.ref) {
                this.ref.destroy();
            }
            this.tableEditorIsOpen = false;
        }
    }
    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.focusFn();
        if (command === 'focus') {
            return;
        }
        if (command === 'toggleEditorMode') {
            this.toggleEditorMode(this.modeVisual);
        }
        else if (command !== '') {
            if (command === 'clear') {
                this._editorService.removeSelectedElements(this.getCustomTags());
                this._editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre');
                this.onContentChange(this.textArea.nativeElement);
            }
            else {
                this._editorService.executeCommand(command, value);
            }
            this.exec();
        }
        else {
            this.onContentChange(this.textArea.nativeElement);
        }
    }
    /**
     * 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();
    }
    tableTargetHandler(event) {
        if ((!!this.ref && (event.localName !== 'td' || this.activeTableId !== event.offsetParent.id || this.rowCount !== event.offsetParent.rows.length) && event.className != 'list-btn-for-table') || event.localName == 'div') {
            this.ref.destroy();
            this.tableEditorIsOpen = false;
            this.activeTableId = undefined;
            this.rowCount = undefined;
        }
        if (event.localName == 'td' && event.offsetParent.className != 'table-picker') {
            const size = event.offsetParent.getBoundingClientRect();
            const positionStrategy = this.overlay.position().global()
                .left((size.x) + "px")
                .top((size.y + size.height) + "px");
            if (!this.tableEditorIsOpen) {
                this.ref = this.overlay.create({
                    positionStrategy
                }).attach(new ComponentPortal(SlnEditorTableEditorComponent, null, this._injector));
                this.tableEditorIsOpen = true;
                this.activeTableId = event.offsetParent.id;
                this.rowCount = event.offsetParent.rows.length;
            }
        }
    }
    /**
     * 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('sln-editor-toolbar-set') && !parent.classList.contains('ae-picker')) {
                this.blurEvent.emit(event);
                this.focused = false;
            }
        }
    }
    /**
     *  focus the text area when the editor is focused
     */
    focusFn() {
        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.htmlButton.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);
        }
    }
    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();
        }
        if (this.chekerTargetNodeId) {
            clearInterval(this.chekerTargetNodeId);
        }
    }
    filterStyles(html) {
        html = html.replace('position: fixed;', '');
        return html;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorComponent, deps: [{ token: i0.Injector }, { token: 'tabindex', attribute: true }, { token: 'autofocus', attribute: true }, { token: DOCUMENT }, { token: i2.DomSanitizer }, { token: i1$3.Overlay }, { token: i0.Renderer2 }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorComponent, isStandalone: false, selector: "sln-editor", inputs: { id: "id", config: "config", placeholder: "placeholder", tabIndex: "tabIndex" }, outputs: { html: "html", viewMode: "viewMode", blurEvent: "blurEvent", focusEvent: "focusEvent" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => SlnEditorComponent),
                multi: true
            },
            EditorService
        ], 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 class=\"sln-editor\" [style.width]=\"config.width\" [style.minWidth]=\"config.minWidth\">\n     <sln-editor-toolbar #editorToolbar\n          [settings]=\"settings\"\n          [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n          (execute)=\"executeCommand($event)\">\n     </sln-editor-toolbar>\n     <div class=\"sln-editor-wrapper\" #editorWrapper >\n          <div #editor\n               id=\"{{settings.id}}-textarea\"\n               class=\"sln-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\n               (paste)=\"onPaste($event)\">\n          </div>\n          <span class=\"sln-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n     </div>\n</div>\n", styles: [".sln-editor{background:var(--WHITE);padding:10px 14px;border-radius:10px;margin-bottom:10px}.sln-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.sln-editor .sln-editor-wrapper{position:relative}.sln-editor .sln-editor-wrapper .sln-editor-textarea table,.sln-editor .sln-editor-wrapper .sln-editor-textarea table tr,.sln-editor .sln-editor-wrapper .sln-editor-textarea table tr td{border:1px solid black}.sln-editor .sln-editor-wrapper .sln-editor-textarea{font-family:none;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative;max-width:100%;width:100%;outline:none;border-radius:4px}.sln-editor .sln-editor-wrapper .sln-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.sln-editor .sln-editor-wrapper ::ng-deep p{margin-bottom:0}.sln-editor .sln-editor-wrapper ul{margin-left:10px}.sln-editor .sln-editor-wrapper .sln-editor-placeholder{display:none;position:absolute;top:0;padding:.5rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.sln-editor .sln-editor-wrapper.show-placeholder .sln-editor-placeholder{display:block}.sln-editor .sln-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: SlnEditorToolbarComponent, selector: "sln-editor-toolbar", inputs: ["settings", "showToolbar"], outputs: ["execute"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => SlnEditorComponent),
                            multi: true
                        },
                        EditorService
                    ], standalone: false, template: "<div class=\"sln-editor\" [style.width]=\"config.width\" [style.minWidth]=\"config.minWidth\">\n     <sln-editor-toolbar #editorToolbar\n          [settings]=\"settings\"\n          [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n          (execute)=\"executeCommand($event)\">\n     </sln-editor-toolbar>\n     <div class=\"sln-editor-wrapper\" #editorWrapper >\n          <div #editor\n               id=\"{{settings.id}}-textarea\"\n               class=\"sln-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\n               (paste)=\"onPaste($event)\">\n          </div>\n          <span class=\"sln-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n     </div>\n</div>\n", styles: [".sln-editor{background:var(--WHITE);padding:10px 14px;border-radius:10px;margin-bottom:10px}.sln-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.sln-editor .sln-editor-wrapper{position:relative}.sln-editor .sln-editor-wrapper .sln-editor-textarea table,.sln-editor .sln-editor-wrapper .sln-editor-textarea table tr,.sln-editor .sln-editor-wrapper .sln-editor-textarea table tr td{border:1px solid black}.sln-editor .sln-editor-wrapper .sln-editor-textarea{font-family:none;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative;max-width:100%;width:100%;outline:none;border-radius:4px}.sln-editor .sln-editor-wrapper .sln-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.sln-editor .sln-editor-wrapper ::ng-deep p{margin-bottom:0}.sln-editor .sln-editor-wrapper ul{margin-left:10px}.sln-editor .sln-editor-wrapper .sln-editor-placeholder{display:none;position:absolute;top:0;padding:.5rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.sln-editor .sln-editor-wrapper.show-placeholder .sln-editor-placeholder{display:block}.sln-editor .sln-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"] }]
        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                    type: Attribute,
                    args: ['tabindex']
                }] }, { type: undefined, decorators: [{
                    type: Attribute,
                    args: ['autofocus']
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i2.DomSanitizer }, { type: i1$3.Overlay }, { type: i0.Renderer2 }, { type: EditorService }], 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
            }], focusEvent: [{
                type: Output
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], onFocus: [{
                type: HostListener,
                args: ['focus']
            }] } });

class SlnEditorButtonArrowComponent extends BaseButtonComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonArrowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnEditorButtonArrowComponent, isStandalone: false, selector: "sln-editor-button-arrow", usesInheritance: true, ngImport: i0, template: "<div class=\"sln-editor-toolbar-set\">\n    <button type=\"button\" title=\"\u041D\u0430\u0437\u0430\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('undo')\"\n            [hidden]=\"isButtonHidden('undo')\" tabindex=\"-1\">\n        <div class=\"format-arrow-u-left-top\"></div>\n    </button>\n    <button type=\"button\" title=\"\u0412\u043F\u0435\u0440\u0435\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('redo')\"\n            [hidden]=\"isButtonHidden('redo')\" tabindex=\"-1\">\n        <div class=\"format-arrow-u-right-top\"></div>\n    </button>    \n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorButtonArrowComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-arrow', standalone: false, template: "<div class=\"sln-editor-toolbar-set\">\n    <button type=\"button\" title=\"\u041D\u0430\u0437\u0430\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('undo')\"\n            [hidden]=\"isButtonHidden('undo')\" tabindex=\"-1\">\n        <div class=\"format-arrow-u-left-top\"></div>\n    </button>\n    <button type=\"button\" title=\"\u0412\u043F\u0435\u0440\u0435\u0434\" class=\"sln-editor-button\" (click)=\"triggerCommand('redo')\"\n            [hidden]=\"isButtonHidden('redo')\" tabindex=\"-1\">\n        <div class=\"format-arrow-u-right-top\"></div>\n    </button>    \n    <span class=\"sln-toolbae-set-vert\">&vert;</span>\n</div>" }]
        }] });

class SlnEditorTableResolverComponent {
    constructor(elRef, _editorService) {
        this._editorService = _editorService;
        this.elRef = elRef;
    }
    ngOnInit() {
        this.tableView.isVisible = true;
    }
    ngAfterViewInit() {
        let i = this.table.nativeElement.innerHTML.replace(/<!--[\s\S]*?-->/g, "");
        this._editorService.executeCommand('insertHtml', '<table id="table">' + i + '</table>');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorTableResolverComponent, deps: [{ token: i0.ElementRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SlnEditorTableResolverComponent, isStandalone: false, selector: "sln-editor-button-table-resolver", inputs: { tableView: "tableView" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<table #table border=\"1\" style=\"width:60%\">\n  @for (row of tableView.rows; track row) {\n    <tr>\n      @for (col of tableView.columns; track col) {\n        <td>  </td>\n      }\n    </tr>\n  }\n</table>\n\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorTableResolverComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sln-editor-button-table-resolver', standalone: false, template: "<table #table border=\"1\" style=\"width:60%\">\n  @for (row of tableView.rows; track row) {\n    <tr>\n      @for (col of tableView.columns; track col) {\n        <td>  </td>\n      }\n    </tr>\n  }\n</table>\n\n" }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EditorService }], propDecorators: { tableView: [{
                type: Input
            }], table: [{
                type: ViewChild,
                args: ['table', { static: false }]
            }] } });

class SlnResizableDirective {
    constructor(documentRef, elementRef) {
        this.documentRef = documentRef;
        this.elementRef = elementRef;
        this.resizable = fromEvent(this.elementRef.nativeElement, "mousedown").pipe(tap(e => e.preventDefault()), switchMap(() => {
            const { width, right } = this.elementRef.nativeElement
                .closest("td")
                .getBoundingClientRect();
            return fromEvent(this.documentRef, "mousemove").pipe(map(({ clientX }) => width + clientX - right), distinctUntilChanged(), takeUntil(fromEvent(this.documentRef, "mouseup")));
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnResizableDirective, deps: [{ token: DOCUMENT }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: SlnResizableDirective, isStandalone: false, selector: "[resizable]", outputs: { resizable: "resizable" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnResizableDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: "[resizable]",
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef, decorators: [{
                    type: Inject,
                    args: [ElementRef]
                }] }], propDecorators: { resizable: [{
                type: Output
            }] } });

class SlnResizableComponent {
    constructor() {
        this.width = null;
    }
    ngAfterViewInit() {
        this.bar.nativeElement.addEventListener('click', this.onClick.bind(this));
    }
    onClick(event) {
    }
    onResize(width) {
        this.width = width;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnResizableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: SlnResizableComponent, isStandalone: false, selector: "th[resizable]", host: { properties: { "style.width.px": "this.bar" } }, viewQueries: [{ propertyName: "bar", first: true, predicate: ["bar"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"wrapper\">\n\t<div class=\"content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div #bar class=\"bar\" (resizable)=\"onResize($event)\" (click)=\"onResize($event)\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end}.content{flex:1}.bar{position:absolute;top:0;bottom:0;width:2px;margin:0 -16px 0 16px;justify-self:flex-end;border-left:2px solid transparent;border-right:2px solid transparent;background:#8a2be2;background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: SlnResizableDirective, selector: "[resizable]", outputs: ["resizable"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnResizableComponent, decorators: [{
            type: Component,
            args: [{ selector: "th[resizable]", standalone: false, template: "<div class=\"wrapper\">\n\t<div class=\"content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div #bar class=\"bar\" (resizable)=\"onResize($event)\" (click)=\"onResize($event)\"></div>\n</div>\n", styles: [":host:last-child .bar{display:none}.wrapper{display:flex;justify-content:flex-end}.content{flex:1}.bar{position:absolute;top:0;bottom:0;width:2px;margin:0 -16px 0 16px;justify-self:flex-end;border-left:2px solid transparent;border-right:2px solid transparent;background:#8a2be2;background-clip:content-box;cursor:ew-resize;opacity:0;transition:opacity .3s}.bar:hover,.bar:active{opacity:1}\n"] }]
        }], propDecorators: { bar: [{
                type: HostBinding,
                args: ["style.width.px"]
            }, {
                type: ViewChild,
                args: ['bar', { static: true }]
            }] } });

class SlnEditorModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorModule, declarations: [SlnEditorButtonAlignComponent,
            SlnEditorButtonTextCaseComponent,
            SlnImageDialogComponent,
            SlnResizableDirective,
            SlnResizableComponent,
            SlnPreviewDocumentDialogComponent,
            SlnEditorButtonPreviewComponent,
            ColorDirective,
            ColorPickerComponent,
            SlnEditorButtonTablePickerComponent,
            SlnEditorWindowTablePickerComponent,
            SlnEditorTableEditorComponent,
            SlnEditorTableResolverComponent,
            ColorPickerTriggerDirective,
            SlnEditorButtonArrowComponent,
            SlnEditorButtonColorsComponent,
            SlnListButtonHtmlComponent,
            SlnEditorButtonSpecialComponent,
            SlnEditorButtonFormatComponent,
            SlnEditorButtonListsComponent,
            SlnEditorButtonTabsComponent,
            SlnHrefDialogComponent,
            SlnEditorButtonFormatClearComponent,
            SlnEditorButtonHtmlComponent,
            SlnStepInputComponent,
            SlnEditorButtonTextsComponent,
            SlnEditorButtonFontsComponent,
            SlnEditorButtonFontSizesComponent,
            SlnEditorComponent,
            SlnEditorToolbarComponent,
            SlnEditorSelectComponent], imports: [CommonModule,
            FormsModule,
            MatTabsModule,
            CoreControlModule,
            OverlayModule,
            ReactiveFormsModule,
            CoreDialogModule,
            CoreUploaderModule], exports: [SlnEditorComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorModule, imports: [CommonModule,
            FormsModule,
            MatTabsModule,
            CoreControlModule,
            OverlayModule,
            ReactiveFormsModule,
            CoreDialogModule,
            CoreUploaderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SlnEditorModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        FormsModule,
                        MatTabsModule,
                        CoreControlModule,
                        OverlayModule,
                        ReactiveFormsModule,
                        CoreDialogModule,
                        CoreUploaderModule
                    ],
                    declarations: [
                        SlnEditorButtonAlignComponent,
                        SlnEditorButtonTextCaseComponent,
                        SlnImageDialogComponent,
                        SlnResizableDirective,
                        SlnResizableComponent,
                        SlnPreviewDocumentDialogComponent,
                        SlnEditorButtonPreviewComponent,
                        ColorDirective,
                        ColorPickerComponent,
                        SlnEditorButtonTablePickerComponent,
                        SlnEditorWindowTablePickerComponent,
                        SlnEditorTableEditorComponent,
                        SlnEditorTableResolverComponent,
                        ColorPickerTriggerDirective,
                        SlnEditorButtonArrowComponent,
                        SlnEditorButtonColorsComponent,
                        SlnListButtonHtmlComponent,
                        SlnEditorButtonSpecialComponent,
                        SlnEditorButtonFormatComponent,
                        SlnEditorButtonListsComponent,
                        SlnEditorButtonTabsComponent,
                        SlnHrefDialogComponent,
                        SlnEditorButtonFormatClearComponent,
                        SlnEditorButtonHtmlComponent,
                        SlnStepInputComponent,
                        SlnEditorButtonTextsComponent,
                        SlnEditorButtonFontsComponent,
                        SlnEditorButtonFontSizesComponent,
                        SlnEditorComponent,
                        SlnEditorToolbarComponent,
                        SlnEditorSelectComponent
                    ],
                    exports: [
                        SlnEditorComponent
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { EditorService, SlnEditorComponent, SlnEditorModule, SlnEditorToolbarComponent };
//# sourceMappingURL=sellan-editor.mjs.map
