@eui/components 14.0.2-snapshot-1656682869214 → 14.0.3

package/fesm2020/eui-components-legacy-ux-editor.mjs

@@ -317,6 +317,9 @@ class UxEditorComponent {
         this.sanitize = true; // Security: always set sanitizing to true!
         this.isEnabledOnFocusBackup = false; // backup & restore of the isEnabledOnFocus original option
         this.displayAbout = false;
+        // Counters
+        this.charactersCounter = 0;
+        this.wordsCounter = 0;
         this.charactersLabel = 'characters';
         this.wordsLabel = 'words';
         this.isMaxLengthValid = true;
@@ -510,6 +513,7 @@ class UxEditorComponent {
         if (this.debug === 'log') {
             console.log('editor-changed', event);
         }
+        console.warn('onEditorChange() event is DEPRECATED please use onContentChange() event instead.');
         this.onEditorChanged.emit(event);
         this.hasEditorChanged = true; // For debugger
     }
@@ -519,6 +523,7 @@ class UxEditorComponent {
         }
         this.onTextChange.emit(event); // OLD KEEP! TO BE DEPRECATED
         this.onContentChanged.emit(event);
+        this.onEditorChangedEmit(event); // Sync with editor change event since it's duplicated event
         this.hasContentChanged = true; // For debugger
         // Update editor's value
         switch (this.format) {
@@ -640,30 +645,50 @@ class UxEditorComponent {
         }
     }
     _calculateCounters(content) {
-        if (this.format === 'html' || this.format === 'text') {
-            if (content && content.length && content !== null) {
-                let text = '';
-                if (this.format === 'html') {
-                    text = this._stripHtml(content);
-                }
-                else {
-                    text = content;
-                }
+        let text;
+        if (this.format === 'html') {
+            if (content && content.length > 0 && this.quillEditor) {
+                text = this._stripHtml(content);
                 this.charactersCounter = text.length;
+                text = this._cleanHtml(content);
                 this.wordsCounter = !text ? 0 : text.trim().split(/\s+/).length;
             }
             else {
-                // Empty content
                 this.charactersCounter = 0;
                 this.wordsCounter = 0;
             }
-            // Output counters (for custom toolbar usage)
-            this.getCharactersCounter.emit(this.charactersCounter);
-            this.getWordsCounter.emit(this.wordsCounter);
-            // Update maxLength & validity
-            this._refreshMaxLength();
         }
-        return;
+        if (this.format === 'json') {
+            if (content && content.length > 0 && this.quillEditor) {
+                text = this._stripHtml(this.quillEditor.root.innerHTML);
+                this.charactersCounter = text.length;
+                text = this._cleanHtml(this.quillEditor.root.innerHTML);
+                this.wordsCounter = !text ? 0 : text.trim().split(/\s+/).length;
+            }
+            else {
+                this.charactersCounter = 0;
+                this.wordsCounter = 0;
+            }
+        }
+        // Format text will be DEPRECATED in next major eUI releases (13+)
+        if (this.format === 'text') {
+            if (content && content.length > 0 && this.quillEditor) {
+                this.charactersCounter = content.length - 1;
+                this.wordsCounter = this._getWordCount(content);
+            }
+            else {
+                this.charactersCounter = 0;
+                this.wordsCounter = 0;
+            }
+        }
+        // Output counters (for custom toolbar usage)
+        this.getCharactersCounter.emit(this.charactersCounter);
+        this.getWordsCounter.emit(this.wordsCounter);
+        // Update maxLength & validity
+        this._refreshMaxLength();
+    }
+    _getWordCount(str) {
+        return str.trim().split(/\s+/).length;
     }
     _refreshMaxLength() {
         if (this.maxLength && this.maxLength > 0) {
@@ -683,12 +708,17 @@ class UxEditorComponent {
         const regex = /(<([^>]+)>)/gm;
         return content.replace(regex, '');
     }
+    _cleanHtml(content) {
+        const exceptTags = /<strong>|<\/strong>|<b>|<\/b>|<i>|<\/i>|<em>|<\/em>|<s>|<\/s>|<strike>|<\/strike>|<u>|<\/u>/gm;
+        const regex = /(<([^>]+)>)/gm;
+        return content.replace(exceptTags, '').replace(regex, ' ').replace('  ', ' ');
+    }
 }
 /** @nocollapse */ UxEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: UxEditorComponent, deps: [{ token: forwardRef(() => UxFormGroupComponent), host: true, optional: true }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ UxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: UxEditorComponent, selector: "ux-editor", inputs: { e2eAttr: "e2eAttr", id: "id", style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", format: "format", isEnabledOnFocus: "isEnabledOnFocus", isReadOnly: "isReadOnly", isUsedNativeEditorInReadMode: "isUsedNativeEditorInReadMode", customToolbarOptions: "customToolbarOptions", theme: "theme", debug: "debug", isEditable: "isEditable", formControlName: "formControlName", feedbackTypeClass: "feedbackTypeClass", validationErrorMessage: "validationErrorMessage", tabindex: "tabindex", hasReadOnlyStyles: "hasReadOnlyStyles", isMinimalToolbar: "isMinimalToolbar", modules: "modules", maxLength: "maxLength", minLength: "minLength", isRequired: "isRequired", customToolbarPosition: "customToolbarPosition", strict: "strict", isUsedSanitizationForHtml: "isUsedSanitizationForHtml", scrollingContainer: "scrollingContainer", bounds: "bounds", customOptions: "customOptions", trackChanges: "trackChanges", preserveWhitespace: "preserveWhitespace", spellcheck: "spellcheck", showCounters: "showCounters", isImageUrl: "isImageUrl" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onEditorCreated: "onEditorCreated", onEditorChanged: "onEditorChanged", onContentChanged: "onContentChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur", getCharactersCounter: "getCharactersCounter", getWordsCounter: "getWordsCounter" }, queries: [{ propertyName: "customEditorToolbar", first: true, predicate: i0.forwardRef(function () { return UxEditorCustomToolbarTagDirective; }), descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ux-editor-wrapper\">\n    <quill-editor *ngIf=\"!isReadOnly || isUsedNativeEditorInReadMode\"\n                [id]=\"generatedId\"\n                class=\"ux-editor {{styleClass}}\"\n                [class.ux-editor--readonly]=\"isReadOnly\"\n                [class.ux-editor--focused]=\"isFocused\"\n                [class.ux-editor--editable]=\"!isReadOnly\"\n                [format]=\"format\"\n                [formats]=\"formats\"\n                [maxLength]=\"maxLength\"\n                [minLength]=\"minLength\"\n                [readOnly]=\"isReadOnly\"\n                [required]=\"isRequired\"\n                [sanitize]=\"isUsedSanitizationForHtml\"\n                [modules]=\"modules\"\n                [theme]=\"theme\"\n                [placeholder]=\"placeholder\"\n                [styles]=\"style\"\n                [customToolbarPosition]=\"customToolbarPosition\"\n                [preserveWhitespace]=\"preserveWhitespace\"\n                [spellcheck]=\"spellcheck\"\n                [formControl]=\"formControl\"\n                [debug]=\"false\"\n                [tabindex]=\"tabindex\"\n                [attr.aria-invalid]=\"ariaInvalid\"\n                [attr.aria-required]=\"isRequired\"\n                (onEditorCreated)=\"onEditorCreatedEmit($event)\"\n                (onEditorChanged)=\"onEditorChangedEmit($event)\"\n                (onContentChanged)=\"onContentChangedEmit($event)\"\n                (onSelectionChanged)=\"onSelectionChangedEmit($event)\"\n                (onFocus)=\"onFocusEmit($event)\"\n                (onBlur)=\"onBlurEmit($event)\">\n\n        <!-- PREDEFINED DEFAULT TOOLBAR -->\n        <div *ngIf=\"!customToolbarOptions && !customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <span class=\"ql-formats\">\n                <select class=\"ql-header\" title=\"Style{{crlf}}Apply an HTML tag or CSS class to the selected text\">\n                    <option value=\"1\">Heading 1</option>\n                    <option value=\"2\">Heading 2</option>\n                    <option value=\"3\">Heading 3</option>\n                    <option value=\"4\">Heading 4</option>\n                    <option value=\"5\">Heading 5</option>\n                    <option value=\"6\">Heading 6</option>\n                    <option selected>Normal</option>\n                </select>\n            </span>\n            <!-- <span class=\"ql-formats\">\n                <select class=\"ql-size\" title=\"Font size{{crlf}}Change the font size of the selected text\">\n                    <option value=\"small\">Small</option>\n                    <option selected>Normal</option>\n                    <option value=\"large\">Large</option>\n                    <option value=\"huge\">Huge</option>\n                </select>\n            </span> -->\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <select class=\"ql-font\" title=\"Font{{crlf}}Change the font face\">\n                    <option selected>Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n            </span>\n            <span class=\"ql-formats\">\n                <button class=\"ql-bold\" aria-label=\"Bold (Ctrl + B)\" title=\"Bold (Ctrl + B){{crlf}}Make the selected text bold\"></button>\n                <button class=\"ql-italic\" aria-label=\"Italic (Ctrl + I)\" title=\"Italic (Ctrl + I){{crlf}}Italicize the selected text\"></button>\n                <button class=\"ql-underline\" aria-label=\"Underline (Ctrl + U)\" title=\"Underline (Ctrl + U){{crlf}}Underline the selected text\"></button>\n                <button class=\"ql-strike\" aria-label=\"Strikethrough\" title=\"Strikethrough{{crlf}}Draw a line to the middle of the selected text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-color\" aria-label=\"Font Color\" title=\"Font Color{{crlf}}Change the text color\"></select>\n                <select class=\"ql-background\" aria-label=\"Text Highlight Color\" title=\"Text Highlight Color{{crlf}}Change the background color of the text\"></select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-script\" value=\"sub\" aria-label=\"Subscript\" title=\"Subscript{{crlf}}Create ssmall letters below the text baseline\"></button>\n                <button class=\"ql-script\" value=\"super\" aria-label=\"Superscript\" title=\"Superscript{{crlf}}Create small letters above the line of the text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-align\" aria-label=\"Text Align\" title=\"Text Align{{crlf}}Align the text to the selected position: left (default), center, right or justify\">\n                    <option selected></option>\n                    <option value=\"center\"></option>\n                    <option value=\"right\"></option>\n                    <option value=\"justify\"></option>\n                </select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" title=\"Numbering{{crlf}}Start an ordered list\"></button>\n                <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" title=\"Bullets{{crlf}}Start a bulleted list\"></button>\n                <button class=\"ql-indent\" value=\"-1\" type=\"button\" aria-label=\"Decrease Indent\" title=\"Decrease Indent{{crlf}}Decrease the indent level of the paragraph\"></button>\n                <button class=\"ql-indent\" value=\"+1\" type=\"button\" aria-label=\"Increase Indent\" title=\"Increase Indent{{crlf}}Increase the indent level of the paragraph\"></button>\n            </span>\n            <!-- Insert group -->\n            <span class=\"ql-formats\">\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-blockquote\" aria-label=\"Blockquote\" title=\"Blockquote{{crlf}}Create a quoted block of the selected text\"></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-code-block\" aria-label=\"Insert Code Block\" title=\"Insert Code Block{{crlf}}Insert a code block at the cursor row position\"></button>\n                <button class=\"ql-link\" aria-label=\"Insert Link\" title=\"Insert Hyperlink (Ctrl + K){{crlf}}Create a link to a Web page, a picture, an e-mail address or a program\"></button>\n                <button *ngIf=\"!isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image\" title=\"Insert Picture{{crlf}}Insert a picture from a file\"></button>\n                <button *ngIf=\"isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image from URL\" title=\"Insert Picture from URL{{crlf}}Insert a picture from a remote URL\">\n                    <span class=\"eui-icon eui-icon-image-add\"></span></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-video\" aria-label=\"Insert Video\" title=\"Insert Video{{crlf}}Insert a video from a file\"></button>\n            </span>\n            <!-- Clean / Clear -->\n            <span class=\"ql-formats\">\n                <button class=\"ql-clean\" aria-label=\"Remove Styles\" title=\"Remove Styles{{crlf}}Remove the styles of the selected text\"></button>\n                <button aria-label=\"Delete\" title=\"Delete content{{crlf}}Permanently deletes editor's contents\" (click)=\"editorDeleteContent($event)\"><span class=\"eui-icon eui-icon-delete-forever\"></span></button>\n            </span>\n\n            <!-- Undo/Redo -->\n            <span class=\"ql-formats\">\n                <button aria-label=\"Undo (Ctrl + Z)\" title=\"Undo (Ctrl + Z){{crlf}}Cancels the previous action\" (click)=\"editorUndo()\"><span class=\"eui-icon eui-icon-undo\"></span></button>\n                <button aria-label=\"Redo (Ctrl + Y)\" title=\"Redo (Ctrl + Y){{crlf}}Do the next history action again\" (click)=\"editorRedo()\"><span class=\"eui-icon eui-icon-redo\"></span></button>\n            </span>\n            <!-- Counters -->\n            <span *ngIf=\"showCounters && (format === 'html' || format === 'text')\" class=\"ql-formats\">\n                <ux-editor-counters [charactersCounter]=\"charactersCounter\"\n                                    [charactersLabel]=\"charactersLabel\"\n                                    [wordsCounter]=\"wordsCounter\"\n                                    [wordsLabel]=\"wordsLabel\"\n                                    [isMaxLengthValid]=\"isMaxLengthValid\"\n                                    aria-label=\"Counters\"\n                                    title=\"Counters{{crlf}}Characters and words counters (stripped Html)\">\n                </ux-editor-counters>\n            </span>\n        </div>\n\n        <!-- USER CUSTOM TOOLBAR (HTML FORMAT) -->\n        <div *ngIf=\"customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <ng-content select=\"uxEditorCustomToolbar\"></ng-content>\n        </div>\n    </quill-editor>\n\n    <!-- MAXLENGTH INDICATOR -->\n    <div *ngIf=\"!isReadOnly && charactersLeft > -1\" class=\"maxlength-wrapper\" [class.maxlength-wrapper--error]=\"!isMaxLengthValid\">{{ charactersLeft }}</div>\n</div>\n\n\n<!-- READONLY MODE -->\n<div *ngIf=\"isReadOnly && !isUsedNativeEditorInReadMode\" class=\"ux-editor ux-editor--readonly {{styleClass}}\" [class.ux-editor--empty]=\"!value\" tabindex=\"{{tabindex}}\" (click)=\"enableEditorOnClickFocus($event)\" (focusin)=\"enableEditorOnClickFocus($event)\">\n    <ux-editor-view-html *ngIf=\"format === 'html' || format === 'text'\" [content]=\"value\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view-html>\n    <ux-editor-view *ngIf=\"format === 'object' || format === 'json'\" [content]=\"value\" [format]=\"format\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view>\n</div>\n\n\n<!-- DEBUGGER -->\n<div *ngIf=\"debug\" class=\"ux-editor__debug\">\n    <div class=\"ux-editor__debug-title\">UX-EDITOR debug</div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>OPTIONS:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">id: <span class=\"eui-u-color-black\">{{generatedId}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">toolbarPosition: {{customToolbarPosition}}</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isReadOnly\" [class.ux-editor__debug-badge--off]=\"!isReadOnly\">isReadOnly</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEnabledOnFocus\" [class.ux-editor__debug-badge--off]=\"!isEnabledOnFocus\">isEnabledOnFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"preserveWhitespace\" [class.ux-editor__debug-badge--off]=\"!preserveWhitespace\">preserveWhitespace</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"spellcheck\" [class.ux-editor__debug-badge--off]=\"!spellcheck\">spellcheck</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">maxLength: <span class=\"eui-u-color-black\">{{maxLength}}</span></span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>EVENTS:</strong>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFocused\" [class.ux-editor__debug-badge--off]=\"!isFocused\">onFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isBlured\" [class.ux-editor__debug-badge--off]=\"!isBlured\">onBlur</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEditorCreated\" [class.ux-editor__debug-badge--off]=\"!isEditorCreated\">onEditorCreated</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasEditorChanged\" [class.ux-editor__debug-badge--off]=\"!hasEditorChanged\">onEditorChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasContentChanged\" [class.ux-editor__debug-badge--off]=\"!hasContentChanged\">onContentChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasSelectionChanged\" [class.ux-editor__debug-badge--off]=\"!hasSelectionChanged\">onSelectionChanged</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>FORM:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">controlName: <span class=\"eui-u-color-black\">{{formControlName}}</span></span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isRequired\" [class.ux-editor__debug-badge--off]=\"!isRequired\">isRequired</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFormControlValid\" [class.ux-editor__debug-badge--alert]=\"!isFormControlValid\">isFormControlValid</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">validationErrorMessage: <span class=\"eui-u-color-{{feedbackTypeClass}}\">{{formValidationErrorMessage}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--on\" [class.ux-editor__debug-badge--alert]=\"!isMaxLengthValid\">isMaxLengthValid</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>STYLE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">{{ style | json}}</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>SOURCE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">format: <span class=\"eui-u-color-black\">{{format}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">charactersLeft: <span [ngClass]=\"isMaxLengthValid ? 'eui-u-color-black' : 'eui-u-color-danger'\">{{charactersLeft}}</span></span>\n\n    </div>\n    <div class=\"ux-editor__debug-source\">\n        <code *ngIf=\"format === 'text' || format === 'html'\">{{formControl.value}}</code>\n        <code *ngIf=\"format === 'json' || format === 'object'\"><pre class=\"ux-editor__debug-source-code\">{{formControl.value | json}}</pre></code>\n    </div>\n</div>\n", styles: ["/*!\n* eUI alignments & improvements for ux-editor based on (Ngx-)QuillJS Editor v1.3.7+\n*/.ux-editor-wrapper{position:relative}.ux-editor-wrapper .maxlength-wrapper{background-color:var(--eui-base-color-primary-50);border:1px solid var(--eui-base-color-primary-100);border-radius:3px;color:var(--eui-base-color-white);font-size:.75rem;padding:1px 3px;position:absolute;right:-.5rem;top:-.75rem;z-index:2}.ux-editor-wrapper .maxlength-wrapper.maxlength-wrapper--error{background-color:var(--eui-base-color-danger-75);border:1px solid var(--eui-base-color-danger-100)}.ux-editor{display:block;position:relative}.ux-editor--readonly{padding:var(--eui-base-spacing-s) 0 0 0}.ux-editor--readonly .ql-toolbar{display:none}.ux-editor--readonly .ql-container{border:none}.ux-editor--readonly .ql-editor{min-height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-m) 0 0!important}.ux-editor--readonly.ux-editor--empty .ql-container{border:none;outline:1px dashed var(--eui-base-color-grey-15)}.ux-editor--readonly.ux-editor--empty .ql-container:hover{outline:1px solid var(--eui-base-color-grey-20)}.ux-editor--focused .ql-container{outline:1px solid var(--eui-base-color-accent-110);box-shadow:var(--eui-base-shadow-1)}.ux-editor--editable .ql-container{background-color:var(--eui-base-color-white);border:1px solid #ccc;padding:.35rem}.ux-editor .ql-toolbar{background-color:var(--eui-base-color-grey-2);border:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs);font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-toolbar.ql-snow button{background:none;border:none;cursor:pointer;display:inline-flex;padding:3px 5px;width:28px}.ux-editor .ql-toolbar.ql-snow .ql-formats{align-items:center;background-color:var(--eui-base-color-grey-5);border:1px solid var(--eui-base-color-grey-15);border-radius:5px;display:inline-flex;margin-bottom:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-xs);vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker{align-items:center;color:var(--eui-base-color-grey-90);display:inline-flex;font-size:var(--eui-base-font-size);height:var(--eui-base-spacing-xl);max-height:var(--eui-base-spacing-xl);position:relative;vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker.ql-expanded .ql-picker-label{border-color:transparent}.ux-editor .ql-toolbar.ql-snow .ql-formats button{align-items:center;background-color:transparent;border:0 solid var(--eui-base-color-grey-15);box-shadow:none;color:var(--eui-base-color-grey-90);display:inline-flex;height:var(--eui-base-spacing-xl);justify-content:center;min-width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:hover{background:var(--eui-base-color-grey-10);color:var(--eui-base-color-info-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.active,.ux-editor .ql-toolbar.ql-snow .ql-formats button.ql-active{background:var(--eui-base-color-accent-100);color:var(--eui-base-color-primary-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:first-child{border-radius:5px 0 0 5px}.ux-editor .ql-toolbar.ql-snow .ql-formats button:last-child{border-radius:0 5px 5px 0}.ux-editor .ql-toolbar.ql-snow .ql-formats button .eui-icon{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:active,.ux-editor .ql-toolbar.ql-snow .ql-formats button:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters{align-items:center;cursor:default;display:inline-flex;width:auto}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter.chars-counter--error{color:var(--eui-base-color-danger-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-label,.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-label{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-formats select{background-color:transparent;border:.5px solid var(--eui-base-color-black);border-radius:5px;cursor:pointer;font-size:var(--eui-base-font-size-s);outline:0;padding:.4rem;vertical-align:middle;width:90px}.ux-editor .ql-toolbar.ql-snow .ql-formats select:active,.ux-editor .ql-toolbar.ql-snow .ql-formats select:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(7 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before{content:\"Small\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smaller]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{content:\"Smaller\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smallest]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{content:\"Smallest\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before{content:\"Large\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-small{font-size:var(--eui-base-font-size-s)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{font-size:var(--eui-base-font-size-2xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-large{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-huge{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"1\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"2\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"3\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"4\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"5\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"6\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{font-size:var(--eui-base-font-size-3xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{font-size:var(--eui-base-font-size-l)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{font-size:var(--eui-base-font-size-m)}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item:before{content:\"Sans Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=serif]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=monospace]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=sans-serif]:before{font-family:arial,sans-serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{font-family:times new roman,serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{font-family:courier new,monospace!important}.ux-editor .ql-toolbar.ql-snow .ql-color-picker{width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px;display:inline-flex}.ux-editor .ql-container{box-sizing:border-box;height:100%;margin:0;position:relative;resize:vertical;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-container:focus{outline:1px solid var(--eui-base-color-accent-110)}.ux-editor .ql-editor{box-sizing:border-box;height:100%;line-height:var(--eui-base-line-height);outline:none;overflow-y:auto;padding:var(--eui-base-spacing-s);tab-size:4;text-align:left;white-space:pre-wrap;word-break:normal;word-wrap:break-word;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-editor h1{font-size:var(--eui-base-font-size-4xl)!important}.ux-editor .ql-editor h2{font-size:var(--eui-base-font-size-3xl)!important}.ux-editor .ql-editor h3{font-size:var(--eui-base-font-size-2xl)!important}.ux-editor .ql-editor h4{font-size:var(--eui-base-font-size-xl)!important}.ux-editor .ql-editor h5{font-size:var(--eui-base-font-size-l)!important}.ux-editor .ql-editor h6{font-size:var(--eui-base-font-size-m)!important}.ux-editor .ql-editor .h7{font-size:var(--eui-base-font-size-s)!important}.ux-editor .ql-editor .h8{font-size:var(--eui-base-font-size-xs)!important}.ux-editor .ql-editor .h9{font-size:var(--eui-base-font-size-2xs)!important}.ux-editor .ql-editor p{padding-bottom:var(--eui-base-spacing-s)!important}.ux-editor .ql-editor p:last-child{padding-bottom:0!important}.ux-editor .ql-editor em,.ux-editor .ql-editor i{font-style:italic!important}.ux-editor .ql-editor strong,.ux-editor .ql-editor b{font-weight:700!important}.ux-editor .ql-editor strong em,.ux-editor .ql-editor strong i,.ux-editor .ql-editor b em,.ux-editor .ql-editor b i{font-style:italic!important;font-weight:700!important}.ux-editor .ql-editor strong em u,.ux-editor .ql-editor strong i u,.ux-editor .ql-editor b em u,.ux-editor .ql-editor b i u{text-decoration:underline!important}.ux-editor .ql-editor blockquote{border-left:var(--eui-base-spacing-xs) solid var(--eui-base-color-grey-20);margin-bottom:0;margin-top:0;padding-left:var(--eui-base-spacing-m)}.ux-editor .ql-editor code,.ux-editor .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ux-editor .ql-editor pre{margin-bottom:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m);white-space:pre-wrap}.ux-editor .ql-editor code{font-size:85%;padding:2px 4px;word-break:break-word}.ux-editor .ql-editor ol,.ux-editor .ql-editor ul{padding-left:0}.ux-editor .ql-editor ol{counter-reset:inherit}.ux-editor .ql-editor pre.ql-syntax{background-color:var(--eui-base-color-grey-80);color:#f5f5f5;overflow:visible}.ux-editor .ql-editor iframe,.ux-editor .ql-editor img{display:inline-block;height:1;width:1}.ux-editor .ql-editor.ql-blank:before{left:var(--eui-base-spacing-m);position:absolute;right:0}.ux-editor .ql-tooltip{background-color:var(--eui-base-color-grey-10);left:50%!important;margin:0 auto;outline:2px solid var(--eui-base-color-primary-100);position:absolute;top:50%!important;transform:translate(-50%,-50%)!important;width:70%;box-shadow:var(--eui-base-shadow-1)}.ux-editor .ql-tooltip input[type=text]{border:1px solid #ccc;display:none;font-size:13px;height:26px;margin:0;padding:3px 5px;width:75%}.ux-editor .ql-tooltip a.ql-preview{display:inline-block;max-width:60%;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top;width:100%}.ux-editor__debug{background-color:#fff3cd;border:1px solid #f5c6cb;border-radius:.25rem;color:#856404;font:.85rem consolas,monospace,sans-serif;margin:var(--eui-base-spacing-m) 0;padding:var(--eui-base-spacing-s) 1.25rem;position:relative}.ux-editor__debug-section{align-items:center;display:flex;flex-wrap:wrap;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-title{color:#e83e8c;font-size:var(--eui-base-font-size-xl);font-weight:900;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-badge{font-size:var(--eui-base-font-size-xs);font-weight:400;margin:0 var(--eui-base-spacing-2xs);padding:var(--eui-base-spacing-3xs) var(--eui-base-spacing-xs)}.ux-editor__debug-badge--off{background-color:#e8e0c4;border:1px solid #d2d2d2;color:#888}.ux-editor__debug-badge--on{background-color:#28a745;border:1px solid #218037;color:var(--eui-base-color-white)}.ux-editor__debug-badge--alert{background-color:#dc3545;border:1px solid #721d25;color:var(--eui-base-color-white)}.ux-editor__debug-source{background-color:#ffeeba;font-size:var(--eui-base-font-size);height:auto;max-height:150px;outline:1px dashed silver;overflow-y:auto;padding:var(--eui-base-spacing-xs);position:relative}.ux-editor__debug-source-code{color:#e83e8c;font:90% consolas,monospace}.ux-editor__debug code{font-size:var(--eui-base-font-size-xs)}.ux-editor__about{background:var(--eui-base-color-white);display:block;height:10rem;left:50%;overflow-y:auto;padding:var(--eui-base-spacing-m);position:absolute;transform:translate(-50%,25%);width:20rem;z-index:1;box-shadow:var(--eui-base-shadow-3)}ux-editor.ng-invalid.ng-touched .ux-editor:not(.ux-editor--readonly) .ql-container{outline:1px solid var(--eui-base-color-danger-100)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgSelectOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ɵNgSelectMultipleOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return i3.QuillEditorComponent; }), selector: "quill-editor", inputs: ["format", "theme", "modules", "debug", "readOnly", "placeholder", "maxLength", "minLength", "required", "formats", "customToolbarPosition", "sanitize", "styles", "strict", "scrollingContainer", "bounds", "customOptions", "trackChanges", "preserveWhitespace", "valueGetter", "valueSetter"], outputs: ["onEditorCreated", "onContentChanged", "onSelectionChanged", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorViewComponent; }), selector: "ux-editor-view", inputs: ["format", "theme", "modules", "debug", "formats", "strict", "content", "customOptions", "preserveWhitespace", "styles"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorViewHTMLComponent; }), selector: "ux-editor-view-html", inputs: ["content", "theme", "styles"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorCountersComponent; }), selector: "ux-editor-counters", inputs: ["charactersCounter", "charactersLabel", "wordsCounter", "wordsLabel", "isMaxLengthValid"] }, { kind: "pipe", type: i0.forwardRef(function () { return i2.JsonPipe; }), name: "json" }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ UxEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: UxEditorComponent, selector: "ux-editor", inputs: { e2eAttr: "e2eAttr", id: "id", style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", format: "format", isEnabledOnFocus: "isEnabledOnFocus", isReadOnly: "isReadOnly", isUsedNativeEditorInReadMode: "isUsedNativeEditorInReadMode", customToolbarOptions: "customToolbarOptions", theme: "theme", debug: "debug", isEditable: "isEditable", formControlName: "formControlName", feedbackTypeClass: "feedbackTypeClass", validationErrorMessage: "validationErrorMessage", tabindex: "tabindex", hasReadOnlyStyles: "hasReadOnlyStyles", isMinimalToolbar: "isMinimalToolbar", modules: "modules", maxLength: "maxLength", minLength: "minLength", isRequired: "isRequired", customToolbarPosition: "customToolbarPosition", strict: "strict", isUsedSanitizationForHtml: "isUsedSanitizationForHtml", scrollingContainer: "scrollingContainer", bounds: "bounds", customOptions: "customOptions", trackChanges: "trackChanges", preserveWhitespace: "preserveWhitespace", spellcheck: "spellcheck", showCounters: "showCounters", isImageUrl: "isImageUrl" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onEditorCreated: "onEditorCreated", onEditorChanged: "onEditorChanged", onContentChanged: "onContentChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur", getCharactersCounter: "getCharactersCounter", getWordsCounter: "getWordsCounter" }, queries: [{ propertyName: "customEditorToolbar", first: true, predicate: i0.forwardRef(function () { return UxEditorCustomToolbarTagDirective; }), descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ux-editor-wrapper\">\n    <quill-editor *ngIf=\"!isReadOnly || isUsedNativeEditorInReadMode\"\n                [id]=\"generatedId\"\n                class=\"ux-editor {{styleClass}}\"\n                [class.ux-editor--readonly]=\"isReadOnly\"\n                [class.ux-editor--focused]=\"isFocused\"\n                [class.ux-editor--editable]=\"!isReadOnly\"\n                [format]=\"format\"\n                [formats]=\"formats\"\n                [maxLength]=\"maxLength\"\n                [minLength]=\"minLength\"\n                [readOnly]=\"isReadOnly\"\n                [required]=\"isRequired\"\n                [sanitize]=\"isUsedSanitizationForHtml\"\n                [modules]=\"modules\"\n                [theme]=\"theme\"\n                [placeholder]=\"placeholder\"\n                [styles]=\"style\"\n                [customToolbarPosition]=\"customToolbarPosition\"\n                [preserveWhitespace]=\"preserveWhitespace\"\n                [spellcheck]=\"spellcheck\"\n                [formControl]=\"formControl\"\n                [debug]=\"false\"\n                [tabindex]=\"tabindex\"\n                [attr.aria-invalid]=\"ariaInvalid\"\n                [attr.aria-required]=\"isRequired\"\n                (onEditorCreated)=\"onEditorCreatedEmit($event)\"\n                (onEditorChanged)=\"onEditorChangedEmit($event)\"\n                (onContentChanged)=\"onContentChangedEmit($event)\"\n                (onSelectionChanged)=\"onSelectionChangedEmit($event)\"\n                (onFocus)=\"onFocusEmit($event)\"\n                (onBlur)=\"onBlurEmit($event)\">\n\n        <!-- PREDEFINED DEFAULT TOOLBAR -->\n        <div *ngIf=\"!customToolbarOptions && !customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <span class=\"ql-formats\">\n                <select class=\"ql-header\" title=\"Style{{crlf}}Apply an HTML tag or CSS class to the selected text\">\n                    <option value=\"1\">Heading 1</option>\n                    <option value=\"2\">Heading 2</option>\n                    <option value=\"3\">Heading 3</option>\n                    <option value=\"4\">Heading 4</option>\n                    <option value=\"5\">Heading 5</option>\n                    <option value=\"6\">Heading 6</option>\n                    <option selected>Normal</option>\n                </select>\n            </span>\n            <!-- <span class=\"ql-formats\">\n                <select class=\"ql-size\" title=\"Font size{{crlf}}Change the font size of the selected text\">\n                    <option value=\"small\">Small</option>\n                    <option selected>Normal</option>\n                    <option value=\"large\">Large</option>\n                    <option value=\"huge\">Huge</option>\n                </select>\n            </span> -->\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <select class=\"ql-font\" title=\"Font{{crlf}}Change the font face\">\n                    <option selected>Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n            </span>\n            <span class=\"ql-formats\">\n                <button class=\"ql-bold\" aria-label=\"Bold (Ctrl + B)\" title=\"Bold (Ctrl + B){{crlf}}Make the selected text bold\"></button>\n                <button class=\"ql-italic\" aria-label=\"Italic (Ctrl + I)\" title=\"Italic (Ctrl + I){{crlf}}Italicize the selected text\"></button>\n                <button class=\"ql-underline\" aria-label=\"Underline (Ctrl + U)\" title=\"Underline (Ctrl + U){{crlf}}Underline the selected text\"></button>\n                <button class=\"ql-strike\" aria-label=\"Strikethrough\" title=\"Strikethrough{{crlf}}Draw a line to the middle of the selected text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-color\" aria-label=\"Font Color\" title=\"Font Color{{crlf}}Change the text color\"></select>\n                <select class=\"ql-background\" aria-label=\"Text Highlight Color\" title=\"Text Highlight Color{{crlf}}Change the background color of the text\"></select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-script\" value=\"sub\" aria-label=\"Subscript\" title=\"Subscript{{crlf}}Create ssmall letters below the text baseline\"></button>\n                <button class=\"ql-script\" value=\"super\" aria-label=\"Superscript\" title=\"Superscript{{crlf}}Create small letters above the line of the text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-align\" aria-label=\"Text Align\" title=\"Text Align{{crlf}}Align the text to the selected position: left (default), center, right or justify\">\n                    <option selected></option>\n                    <option value=\"center\"></option>\n                    <option value=\"right\"></option>\n                    <option value=\"justify\"></option>\n                </select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" title=\"Numbering{{crlf}}Start an ordered list\"></button>\n                <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" title=\"Bullets{{crlf}}Start a bulleted list\"></button>\n                <button class=\"ql-indent\" value=\"-1\" type=\"button\" aria-label=\"Decrease Indent\" title=\"Decrease Indent{{crlf}}Decrease the indent level of the paragraph\"></button>\n                <button class=\"ql-indent\" value=\"+1\" type=\"button\" aria-label=\"Increase Indent\" title=\"Increase Indent{{crlf}}Increase the indent level of the paragraph\"></button>\n            </span>\n            <!-- Insert group -->\n            <span class=\"ql-formats\">\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-blockquote\" aria-label=\"Blockquote\" title=\"Blockquote{{crlf}}Create a quoted block of the selected text\"></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-code-block\" aria-label=\"Insert Code Block\" title=\"Insert Code Block{{crlf}}Insert a code block at the cursor row position\"></button>\n                <button class=\"ql-link\" aria-label=\"Insert Link\" title=\"Insert Hyperlink (Ctrl + K){{crlf}}Create a link to a Web page, a picture, an e-mail address or a program\"></button>\n                <button *ngIf=\"!isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image\" title=\"Insert Picture{{crlf}}Insert a picture from a file\"></button>\n                <button *ngIf=\"isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image from URL\" title=\"Insert Picture from URL{{crlf}}Insert a picture from a remote URL\">\n                    <span class=\"eui-icon eui-icon-image-add\"></span></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-video\" aria-label=\"Insert Video\" title=\"Insert Video{{crlf}}Insert a video from a file\"></button>\n            </span>\n            <!-- Clean / Clear -->\n            <span class=\"ql-formats\">\n                <button class=\"ql-clean\" aria-label=\"Remove Styles\" title=\"Remove Styles{{crlf}}Remove the styles of the selected text\"></button>\n                <button aria-label=\"Delete\" title=\"Delete content{{crlf}}Permanently deletes editor's contents\" (click)=\"editorDeleteContent($event)\"><span class=\"eui-icon eui-icon-delete-forever\"></span></button>\n            </span>\n\n            <!-- Undo/Redo -->\n            <span class=\"ql-formats\">\n                <button aria-label=\"Undo (Ctrl + Z)\" title=\"Undo (Ctrl + Z){{crlf}}Cancels the previous action\" (click)=\"editorUndo()\"><span class=\"eui-icon eui-icon-undo\"></span></button>\n                <button aria-label=\"Redo (Ctrl + Y)\" title=\"Redo (Ctrl + Y){{crlf}}Do the next history action again\" (click)=\"editorRedo()\"><span class=\"eui-icon eui-icon-redo\"></span></button>\n            </span>\n            <!-- Counters -->\n            <span *ngIf=\"showCounters && (format === 'html' || format === 'text')\" class=\"ql-formats\">\n                <ux-editor-counters [charactersCounter]=\"charactersCounter\"\n                                    [charactersLabel]=\"charactersLabel\"\n                                    [wordsCounter]=\"wordsCounter\"\n                                    [wordsLabel]=\"wordsLabel\"\n                                    [isMaxLengthValid]=\"isMaxLengthValid\"\n                                    aria-label=\"Counters\"\n                                    title=\"Counters{{crlf}}Characters and words counters (stripped Html)\">\n                </ux-editor-counters>\n            </span>\n        </div>\n\n        <!-- USER CUSTOM TOOLBAR (HTML FORMAT) -->\n        <div *ngIf=\"customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <ng-content select=\"uxEditorCustomToolbar\"></ng-content>\n        </div>\n    </quill-editor>\n\n    <!-- MAXLENGTH INDICATOR -->\n    <div *ngIf=\"!isReadOnly && charactersLeft > -1\" class=\"maxlength-wrapper\" [class.maxlength-wrapper--error]=\"!isMaxLengthValid\">{{ charactersLeft }}</div>\n</div>\n\n\n<!-- READONLY MODE -->\n<div *ngIf=\"isReadOnly && !isUsedNativeEditorInReadMode\" class=\"ux-editor ux-editor--readonly {{styleClass}}\" [class.ux-editor--empty]=\"!value\" tabindex=\"{{tabindex}}\" (click)=\"enableEditorOnClickFocus($event)\" (focusin)=\"enableEditorOnClickFocus($event)\">\n    <ux-editor-view-html *ngIf=\"format === 'html' || format === 'text'\" [content]=\"value\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view-html>\n    <ux-editor-view *ngIf=\"format === 'object' || format === 'json'\" [content]=\"value\" [format]=\"format\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view>\n</div>\n\n\n<!-- DEBUGGER -->\n<div *ngIf=\"debug\" class=\"ux-editor__debug\">\n    <div class=\"ux-editor__debug-title\">UX-EDITOR debug</div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>OPTIONS:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">id: <span class=\"eui-u-color-black\">{{generatedId}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">toolbarPosition: {{customToolbarPosition}}</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isReadOnly\" [class.ux-editor__debug-badge--off]=\"!isReadOnly\">isReadOnly</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEnabledOnFocus\" [class.ux-editor__debug-badge--off]=\"!isEnabledOnFocus\">isEnabledOnFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"preserveWhitespace\" [class.ux-editor__debug-badge--off]=\"!preserveWhitespace\">preserveWhitespace</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"spellcheck\" [class.ux-editor__debug-badge--off]=\"!spellcheck\">spellcheck</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">maxLength: <span class=\"eui-u-color-black\">{{maxLength}}</span></span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>EVENTS:</strong>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFocused\" [class.ux-editor__debug-badge--off]=\"!isFocused\">onFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isBlured\" [class.ux-editor__debug-badge--off]=\"!isBlured\">onBlur</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEditorCreated\" [class.ux-editor__debug-badge--off]=\"!isEditorCreated\">onEditorCreated</span>\n        <!-- <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasEditorChanged\" [class.ux-editor__debug-badge--off]=\"!hasEditorChanged\">onEditorChanged</span> -->\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasContentChanged\" [class.ux-editor__debug-badge--off]=\"!hasContentChanged\">onContentChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasSelectionChanged\" [class.ux-editor__debug-badge--off]=\"!hasSelectionChanged\">onSelectionChanged</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>FORM:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">controlName: <span class=\"eui-u-color-black\">{{formControlName}}</span></span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isRequired\" [class.ux-editor__debug-badge--off]=\"!isRequired\">isRequired</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFormControlValid\" [class.ux-editor__debug-badge--alert]=\"!isFormControlValid\">isFormControlValid</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">validationErrorMessage: <span class=\"eui-u-color-{{feedbackTypeClass}}\">{{formValidationErrorMessage}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--on\" [class.ux-editor__debug-badge--alert]=\"!isMaxLengthValid\">isMaxLengthValid</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>STYLE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">{{ style | json}}</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>SOURCE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">format: <span class=\"eui-u-color-black\">{{format}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">charactersLeft: <span [ngClass]=\"isMaxLengthValid ? 'eui-u-color-black' : 'eui-u-color-danger'\">{{charactersLeft}}</span></span>\n\n    </div>\n    <div class=\"ux-editor__debug-source\">\n        <code *ngIf=\"format === 'text' || format === 'html'\">{{formControl.value}}</code>\n        <code *ngIf=\"format === 'json' || format === 'object'\"><pre class=\"ux-editor__debug-source-code\">{{formControl.value | json}}</pre></code>\n    </div>\n</div>\n", styles: ["/*!\n* eUI alignments & improvements for ux-editor based on (Ngx-)QuillJS Editor v1.3.7+\n*/.ux-editor-wrapper{position:relative}.ux-editor-wrapper .maxlength-wrapper{background-color:var(--eui-base-color-primary-50);border:1px solid var(--eui-base-color-primary-100);border-radius:3px;color:var(--eui-base-color-white);font-size:.75rem;padding:1px 3px;position:absolute;right:-.5rem;top:-.75rem;z-index:2}.ux-editor-wrapper .maxlength-wrapper.maxlength-wrapper--error{background-color:var(--eui-base-color-danger-75);border:1px solid var(--eui-base-color-danger-100)}.ux-editor{display:block;position:relative}.ux-editor--readonly{padding:var(--eui-base-spacing-s) 0 0 0}.ux-editor--readonly .ql-toolbar{display:none}.ux-editor--readonly .ql-container{border:none}.ux-editor--readonly .ql-editor{min-height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-m) 0 0!important}.ux-editor--readonly.ux-editor--empty .ql-container{border:none;outline:1px dashed var(--eui-base-color-grey-15)}.ux-editor--readonly.ux-editor--empty .ql-container:hover{outline:1px solid var(--eui-base-color-grey-20)}.ux-editor--focused .ql-container{outline:1px solid var(--eui-base-color-accent-110);box-shadow:var(--eui-base-shadow-1)}.ux-editor--editable .ql-container{background-color:var(--eui-base-color-white);border:1px solid #ccc;padding:.35rem}.ux-editor .ql-toolbar{background-color:var(--eui-base-color-grey-2);border:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs);font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-toolbar.ql-snow button{background:none;border:none;cursor:pointer;display:inline-flex;padding:3px 5px;width:28px}.ux-editor .ql-toolbar.ql-snow .ql-formats{align-items:center;background-color:var(--eui-base-color-grey-5);border:1px solid var(--eui-base-color-grey-15);border-radius:5px;display:inline-flex;margin-bottom:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-xs);vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker{align-items:center;color:var(--eui-base-color-grey-90);display:inline-flex;font-size:var(--eui-base-font-size);height:var(--eui-base-spacing-xl);max-height:var(--eui-base-spacing-xl);position:relative;vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker.ql-expanded .ql-picker-label{border-color:transparent}.ux-editor .ql-toolbar.ql-snow .ql-formats button{align-items:center;background-color:transparent;border:0 solid var(--eui-base-color-grey-15);box-shadow:none;color:var(--eui-base-color-grey-90);display:inline-flex;height:var(--eui-base-spacing-xl);justify-content:center;min-width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:hover{background:var(--eui-base-color-grey-10);color:var(--eui-base-color-info-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.active,.ux-editor .ql-toolbar.ql-snow .ql-formats button.ql-active{background:var(--eui-base-color-accent-100);color:var(--eui-base-color-primary-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:first-child{border-radius:5px 0 0 5px}.ux-editor .ql-toolbar.ql-snow .ql-formats button:last-child{border-radius:0 5px 5px 0}.ux-editor .ql-toolbar.ql-snow .ql-formats button .eui-icon{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:active,.ux-editor .ql-toolbar.ql-snow .ql-formats button:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters{align-items:center;cursor:default;display:inline-flex;width:auto}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter.chars-counter--error{color:var(--eui-base-color-danger-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-label,.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-label{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-formats select{background-color:transparent;border:.5px solid var(--eui-base-color-black);border-radius:5px;cursor:pointer;font-size:var(--eui-base-font-size-s);outline:0;padding:.4rem;vertical-align:middle;width:90px}.ux-editor .ql-toolbar.ql-snow .ql-formats select:active,.ux-editor .ql-toolbar.ql-snow .ql-formats select:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(7 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before{content:\"Small\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smaller]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{content:\"Smaller\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smallest]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{content:\"Smallest\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before{content:\"Large\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-small{font-size:var(--eui-base-font-size-s)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{font-size:var(--eui-base-font-size-2xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-large{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-huge{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"1\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"2\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"3\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"4\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"5\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"6\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{font-size:var(--eui-base-font-size-3xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{font-size:var(--eui-base-font-size-l)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{font-size:var(--eui-base-font-size-m)}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item:before{content:\"Sans Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=serif]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=monospace]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=sans-serif]:before{font-family:arial,sans-serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{font-family:times new roman,serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{font-family:courier new,monospace!important}.ux-editor .ql-toolbar.ql-snow .ql-color-picker{width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px;display:inline-flex}.ux-editor .ql-container{box-sizing:border-box;height:100%;margin:0;position:relative;resize:vertical;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-container:focus{outline:1px solid var(--eui-base-color-accent-110)}.ux-editor .ql-editor{box-sizing:border-box;height:100%;line-height:var(--eui-base-line-height);outline:none;overflow-y:auto;padding:var(--eui-base-spacing-s);tab-size:4;text-align:left;white-space:pre-wrap;word-break:normal;word-wrap:break-word;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-editor h1{font-size:var(--eui-base-font-size-4xl)!important}.ux-editor .ql-editor h2{font-size:var(--eui-base-font-size-3xl)!important}.ux-editor .ql-editor h3{font-size:var(--eui-base-font-size-2xl)!important}.ux-editor .ql-editor h4{font-size:var(--eui-base-font-size-xl)!important}.ux-editor .ql-editor h5{font-size:var(--eui-base-font-size-l)!important}.ux-editor .ql-editor h6{font-size:var(--eui-base-font-size-m)!important}.ux-editor .ql-editor .h7{font-size:var(--eui-base-font-size-s)!important}.ux-editor .ql-editor .h8{font-size:var(--eui-base-font-size-xs)!important}.ux-editor .ql-editor .h9{font-size:var(--eui-base-font-size-2xs)!important}.ux-editor .ql-editor p{padding-bottom:var(--eui-base-spacing-s)!important}.ux-editor .ql-editor p:last-child{padding-bottom:0!important}.ux-editor .ql-editor em,.ux-editor .ql-editor i{font-style:italic!important}.ux-editor .ql-editor strong,.ux-editor .ql-editor b{font-weight:700!important}.ux-editor .ql-editor strong em,.ux-editor .ql-editor strong i,.ux-editor .ql-editor b em,.ux-editor .ql-editor b i{font-style:italic!important;font-weight:700!important}.ux-editor .ql-editor strong em u,.ux-editor .ql-editor strong i u,.ux-editor .ql-editor b em u,.ux-editor .ql-editor b i u{text-decoration:underline!important}.ux-editor .ql-editor blockquote{border-left:var(--eui-base-spacing-xs) solid var(--eui-base-color-grey-20);margin-bottom:0;margin-top:0;padding-left:var(--eui-base-spacing-m)}.ux-editor .ql-editor code,.ux-editor .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ux-editor .ql-editor pre{margin-bottom:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m);white-space:pre-wrap}.ux-editor .ql-editor code{font-size:85%;padding:2px 4px;word-break:break-word}.ux-editor .ql-editor ol,.ux-editor .ql-editor ul{padding-left:0}.ux-editor .ql-editor ol{counter-reset:inherit}.ux-editor .ql-editor pre.ql-syntax{background-color:var(--eui-base-color-grey-80);color:#f5f5f5;overflow:visible}.ux-editor .ql-editor iframe,.ux-editor .ql-editor img{display:inline-block;height:1;width:1}.ux-editor .ql-editor.ql-blank:before{left:var(--eui-base-spacing-m);position:absolute;right:0}.ux-editor .ql-tooltip{background-color:var(--eui-base-color-grey-10);left:50%!important;margin:0 auto;outline:2px solid var(--eui-base-color-primary-100);position:absolute;top:50%!important;transform:translate(-50%,-50%)!important;width:70%;box-shadow:var(--eui-base-shadow-1)}.ux-editor .ql-tooltip input[type=text]{border:1px solid #ccc;display:none;font-size:13px;height:26px;margin:0;padding:3px 5px;width:75%}.ux-editor .ql-tooltip a.ql-preview{display:inline-block;max-width:60%;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top;width:100%}.ux-editor__debug{background-color:#fff3cd;border:1px solid #f5c6cb;border-radius:.25rem;color:#856404;font:.85rem consolas,monospace,sans-serif;margin:var(--eui-base-spacing-m) 0;padding:var(--eui-base-spacing-s) 1.25rem;position:relative}.ux-editor__debug-section{align-items:center;display:flex;flex-wrap:wrap;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-title{color:#e83e8c;font-size:var(--eui-base-font-size-xl);font-weight:900;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-badge{font-size:var(--eui-base-font-size-xs);font-weight:400;margin:0 var(--eui-base-spacing-2xs);padding:var(--eui-base-spacing-3xs) var(--eui-base-spacing-xs)}.ux-editor__debug-badge--off{background-color:#e8e0c4;border:1px solid #d2d2d2;color:#888}.ux-editor__debug-badge--on{background-color:#28a745;border:1px solid #218037;color:var(--eui-base-color-white)}.ux-editor__debug-badge--alert{background-color:#dc3545;border:1px solid #721d25;color:var(--eui-base-color-white)}.ux-editor__debug-source{background-color:#ffeeba;font-size:var(--eui-base-font-size);height:auto;max-height:150px;outline:1px dashed silver;overflow-y:auto;padding:var(--eui-base-spacing-xs);position:relative}.ux-editor__debug-source-code{color:#e83e8c;font:90% consolas,monospace}.ux-editor__debug code{font-size:var(--eui-base-font-size-xs)}.ux-editor__about{background:var(--eui-base-color-white);display:block;height:10rem;left:50%;overflow-y:auto;padding:var(--eui-base-spacing-m);position:absolute;transform:translate(-50%,25%);width:20rem;z-index:1;box-shadow:var(--eui-base-shadow-3)}ux-editor.ng-invalid.ng-touched .ux-editor:not(.ux-editor--readonly) .ql-container{outline:1px solid var(--eui-base-color-danger-100)}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgSelectOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.ɵNgSelectMultipleOption; }), selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.RequiredValidator; }), selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i0.forwardRef(function () { return i1$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return i3.QuillEditorComponent; }), selector: "quill-editor", inputs: ["format", "theme", "modules", "debug", "readOnly", "placeholder", "maxLength", "minLength", "required", "formats", "customToolbarPosition", "sanitize", "styles", "strict", "scrollingContainer", "bounds", "customOptions", "trackChanges", "preserveWhitespace", "valueGetter", "valueSetter"], outputs: ["onEditorCreated", "onContentChanged", "onSelectionChanged", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorViewComponent; }), selector: "ux-editor-view", inputs: ["format", "theme", "modules", "debug", "formats", "strict", "content", "customOptions", "preserveWhitespace", "styles"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorViewHTMLComponent; }), selector: "ux-editor-view-html", inputs: ["content", "theme", "styles"] }, { kind: "component", type: i0.forwardRef(function () { return UxEditorCountersComponent; }), selector: "ux-editor-counters", inputs: ["charactersCounter", "charactersLabel", "wordsCounter", "wordsLabel", "isMaxLengthValid"] }, { kind: "pipe", type: i0.forwardRef(function () { return i2.JsonPipe; }), name: "json" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: UxEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ux-editor', encapsulation: ViewEncapsulation.None, template: "<div class=\"ux-editor-wrapper\">\n    <quill-editor *ngIf=\"!isReadOnly || isUsedNativeEditorInReadMode\"\n                [id]=\"generatedId\"\n                class=\"ux-editor {{styleClass}}\"\n                [class.ux-editor--readonly]=\"isReadOnly\"\n                [class.ux-editor--focused]=\"isFocused\"\n                [class.ux-editor--editable]=\"!isReadOnly\"\n                [format]=\"format\"\n                [formats]=\"formats\"\n                [maxLength]=\"maxLength\"\n                [minLength]=\"minLength\"\n                [readOnly]=\"isReadOnly\"\n                [required]=\"isRequired\"\n                [sanitize]=\"isUsedSanitizationForHtml\"\n                [modules]=\"modules\"\n                [theme]=\"theme\"\n                [placeholder]=\"placeholder\"\n                [styles]=\"style\"\n                [customToolbarPosition]=\"customToolbarPosition\"\n                [preserveWhitespace]=\"preserveWhitespace\"\n                [spellcheck]=\"spellcheck\"\n                [formControl]=\"formControl\"\n                [debug]=\"false\"\n                [tabindex]=\"tabindex\"\n                [attr.aria-invalid]=\"ariaInvalid\"\n                [attr.aria-required]=\"isRequired\"\n                (onEditorCreated)=\"onEditorCreatedEmit($event)\"\n                (onEditorChanged)=\"onEditorChangedEmit($event)\"\n                (onContentChanged)=\"onContentChangedEmit($event)\"\n                (onSelectionChanged)=\"onSelectionChangedEmit($event)\"\n                (onFocus)=\"onFocusEmit($event)\"\n                (onBlur)=\"onBlurEmit($event)\">\n\n        <!-- PREDEFINED DEFAULT TOOLBAR -->\n        <div *ngIf=\"!customToolbarOptions && !customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <span class=\"ql-formats\">\n                <select class=\"ql-header\" title=\"Style{{crlf}}Apply an HTML tag or CSS class to the selected text\">\n                    <option value=\"1\">Heading 1</option>\n                    <option value=\"2\">Heading 2</option>\n                    <option value=\"3\">Heading 3</option>\n                    <option value=\"4\">Heading 4</option>\n                    <option value=\"5\">Heading 5</option>\n                    <option value=\"6\">Heading 6</option>\n                    <option selected>Normal</option>\n                </select>\n            </span>\n            <!-- <span class=\"ql-formats\">\n                <select class=\"ql-size\" title=\"Font size{{crlf}}Change the font size of the selected text\">\n                    <option value=\"small\">Small</option>\n                    <option selected>Normal</option>\n                    <option value=\"large\">Large</option>\n                    <option value=\"huge\">Huge</option>\n                </select>\n            </span> -->\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <select class=\"ql-font\" title=\"Font{{crlf}}Change the font face\">\n                    <option selected>Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n            </span>\n            <span class=\"ql-formats\">\n                <button class=\"ql-bold\" aria-label=\"Bold (Ctrl + B)\" title=\"Bold (Ctrl + B){{crlf}}Make the selected text bold\"></button>\n                <button class=\"ql-italic\" aria-label=\"Italic (Ctrl + I)\" title=\"Italic (Ctrl + I){{crlf}}Italicize the selected text\"></button>\n                <button class=\"ql-underline\" aria-label=\"Underline (Ctrl + U)\" title=\"Underline (Ctrl + U){{crlf}}Underline the selected text\"></button>\n                <button class=\"ql-strike\" aria-label=\"Strikethrough\" title=\"Strikethrough{{crlf}}Draw a line to the middle of the selected text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-color\" aria-label=\"Font Color\" title=\"Font Color{{crlf}}Change the text color\"></select>\n                <select class=\"ql-background\" aria-label=\"Text Highlight Color\" title=\"Text Highlight Color{{crlf}}Change the background color of the text\"></select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-script\" value=\"sub\" aria-label=\"Subscript\" title=\"Subscript{{crlf}}Create ssmall letters below the text baseline\"></button>\n                <button class=\"ql-script\" value=\"super\" aria-label=\"Superscript\" title=\"Superscript{{crlf}}Create small letters above the line of the text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-align\" aria-label=\"Text Align\" title=\"Text Align{{crlf}}Align the text to the selected position: left (default), center, right or justify\">\n                    <option selected></option>\n                    <option value=\"center\"></option>\n                    <option value=\"right\"></option>\n                    <option value=\"justify\"></option>\n                </select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" title=\"Numbering{{crlf}}Start an ordered list\"></button>\n                <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" title=\"Bullets{{crlf}}Start a bulleted list\"></button>\n                <button class=\"ql-indent\" value=\"-1\" type=\"button\" aria-label=\"Decrease Indent\" title=\"Decrease Indent{{crlf}}Decrease the indent level of the paragraph\"></button>\n                <button class=\"ql-indent\" value=\"+1\" type=\"button\" aria-label=\"Increase Indent\" title=\"Increase Indent{{crlf}}Increase the indent level of the paragraph\"></button>\n            </span>\n            <!-- Insert group -->\n            <span class=\"ql-formats\">\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-blockquote\" aria-label=\"Blockquote\" title=\"Blockquote{{crlf}}Create a quoted block of the selected text\"></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-code-block\" aria-label=\"Insert Code Block\" title=\"Insert Code Block{{crlf}}Insert a code block at the cursor row position\"></button>\n                <button class=\"ql-link\" aria-label=\"Insert Link\" title=\"Insert Hyperlink (Ctrl + K){{crlf}}Create a link to a Web page, a picture, an e-mail address or a program\"></button>\n                <button *ngIf=\"!isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image\" title=\"Insert Picture{{crlf}}Insert a picture from a file\"></button>\n                <button *ngIf=\"isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image from URL\" title=\"Insert Picture from URL{{crlf}}Insert a picture from a remote URL\">\n                    <span class=\"eui-icon eui-icon-image-add\"></span></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-video\" aria-label=\"Insert Video\" title=\"Insert Video{{crlf}}Insert a video from a file\"></button>\n            </span>\n            <!-- Clean / Clear -->\n            <span class=\"ql-formats\">\n                <button class=\"ql-clean\" aria-label=\"Remove Styles\" title=\"Remove Styles{{crlf}}Remove the styles of the selected text\"></button>\n                <button aria-label=\"Delete\" title=\"Delete content{{crlf}}Permanently deletes editor's contents\" (click)=\"editorDeleteContent($event)\"><span class=\"eui-icon eui-icon-delete-forever\"></span></button>\n            </span>\n\n            <!-- Undo/Redo -->\n            <span class=\"ql-formats\">\n                <button aria-label=\"Undo (Ctrl + Z)\" title=\"Undo (Ctrl + Z){{crlf}}Cancels the previous action\" (click)=\"editorUndo()\"><span class=\"eui-icon eui-icon-undo\"></span></button>\n                <button aria-label=\"Redo (Ctrl + Y)\" title=\"Redo (Ctrl + Y){{crlf}}Do the next history action again\" (click)=\"editorRedo()\"><span class=\"eui-icon eui-icon-redo\"></span></button>\n            </span>\n            <!-- Counters -->\n            <span *ngIf=\"showCounters && (format === 'html' || format === 'text')\" class=\"ql-formats\">\n                <ux-editor-counters [charactersCounter]=\"charactersCounter\"\n                                    [charactersLabel]=\"charactersLabel\"\n                                    [wordsCounter]=\"wordsCounter\"\n                                    [wordsLabel]=\"wordsLabel\"\n                                    [isMaxLengthValid]=\"isMaxLengthValid\"\n                                    aria-label=\"Counters\"\n                                    title=\"Counters{{crlf}}Characters and words counters (stripped Html)\">\n                </ux-editor-counters>\n            </span>\n        </div>\n\n        <!-- USER CUSTOM TOOLBAR (HTML FORMAT) -->\n        <div *ngIf=\"customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <ng-content select=\"uxEditorCustomToolbar\"></ng-content>\n        </div>\n    </quill-editor>\n\n    <!-- MAXLENGTH INDICATOR -->\n    <div *ngIf=\"!isReadOnly && charactersLeft > -1\" class=\"maxlength-wrapper\" [class.maxlength-wrapper--error]=\"!isMaxLengthValid\">{{ charactersLeft }}</div>\n</div>\n\n\n<!-- READONLY MODE -->\n<div *ngIf=\"isReadOnly && !isUsedNativeEditorInReadMode\" class=\"ux-editor ux-editor--readonly {{styleClass}}\" [class.ux-editor--empty]=\"!value\" tabindex=\"{{tabindex}}\" (click)=\"enableEditorOnClickFocus($event)\" (focusin)=\"enableEditorOnClickFocus($event)\">\n    <ux-editor-view-html *ngIf=\"format === 'html' || format === 'text'\" [content]=\"value\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view-html>\n    <ux-editor-view *ngIf=\"format === 'object' || format === 'json'\" [content]=\"value\" [format]=\"format\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view>\n</div>\n\n\n<!-- DEBUGGER -->\n<div *ngIf=\"debug\" class=\"ux-editor__debug\">\n    <div class=\"ux-editor__debug-title\">UX-EDITOR debug</div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>OPTIONS:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">id: <span class=\"eui-u-color-black\">{{generatedId}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">toolbarPosition: {{customToolbarPosition}}</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isReadOnly\" [class.ux-editor__debug-badge--off]=\"!isReadOnly\">isReadOnly</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEnabledOnFocus\" [class.ux-editor__debug-badge--off]=\"!isEnabledOnFocus\">isEnabledOnFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"preserveWhitespace\" [class.ux-editor__debug-badge--off]=\"!preserveWhitespace\">preserveWhitespace</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"spellcheck\" [class.ux-editor__debug-badge--off]=\"!spellcheck\">spellcheck</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">maxLength: <span class=\"eui-u-color-black\">{{maxLength}}</span></span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>EVENTS:</strong>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFocused\" [class.ux-editor__debug-badge--off]=\"!isFocused\">onFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isBlured\" [class.ux-editor__debug-badge--off]=\"!isBlured\">onBlur</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEditorCreated\" [class.ux-editor__debug-badge--off]=\"!isEditorCreated\">onEditorCreated</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasEditorChanged\" [class.ux-editor__debug-badge--off]=\"!hasEditorChanged\">onEditorChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasContentChanged\" [class.ux-editor__debug-badge--off]=\"!hasContentChanged\">onContentChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasSelectionChanged\" [class.ux-editor__debug-badge--off]=\"!hasSelectionChanged\">onSelectionChanged</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>FORM:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">controlName: <span class=\"eui-u-color-black\">{{formControlName}}</span></span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isRequired\" [class.ux-editor__debug-badge--off]=\"!isRequired\">isRequired</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFormControlValid\" [class.ux-editor__debug-badge--alert]=\"!isFormControlValid\">isFormControlValid</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">validationErrorMessage: <span class=\"eui-u-color-{{feedbackTypeClass}}\">{{formValidationErrorMessage}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--on\" [class.ux-editor__debug-badge--alert]=\"!isMaxLengthValid\">isMaxLengthValid</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>STYLE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">{{ style | json}}</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>SOURCE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">format: <span class=\"eui-u-color-black\">{{format}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">charactersLeft: <span [ngClass]=\"isMaxLengthValid ? 'eui-u-color-black' : 'eui-u-color-danger'\">{{charactersLeft}}</span></span>\n\n    </div>\n    <div class=\"ux-editor__debug-source\">\n        <code *ngIf=\"format === 'text' || format === 'html'\">{{formControl.value}}</code>\n        <code *ngIf=\"format === 'json' || format === 'object'\"><pre class=\"ux-editor__debug-source-code\">{{formControl.value | json}}</pre></code>\n    </div>\n</div>\n", styles: ["/*!\n* eUI alignments & improvements for ux-editor based on (Ngx-)QuillJS Editor v1.3.7+\n*/.ux-editor-wrapper{position:relative}.ux-editor-wrapper .maxlength-wrapper{background-color:var(--eui-base-color-primary-50);border:1px solid var(--eui-base-color-primary-100);border-radius:3px;color:var(--eui-base-color-white);font-size:.75rem;padding:1px 3px;position:absolute;right:-.5rem;top:-.75rem;z-index:2}.ux-editor-wrapper .maxlength-wrapper.maxlength-wrapper--error{background-color:var(--eui-base-color-danger-75);border:1px solid var(--eui-base-color-danger-100)}.ux-editor{display:block;position:relative}.ux-editor--readonly{padding:var(--eui-base-spacing-s) 0 0 0}.ux-editor--readonly .ql-toolbar{display:none}.ux-editor--readonly .ql-container{border:none}.ux-editor--readonly .ql-editor{min-height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-m) 0 0!important}.ux-editor--readonly.ux-editor--empty .ql-container{border:none;outline:1px dashed var(--eui-base-color-grey-15)}.ux-editor--readonly.ux-editor--empty .ql-container:hover{outline:1px solid var(--eui-base-color-grey-20)}.ux-editor--focused .ql-container{outline:1px solid var(--eui-base-color-accent-110);box-shadow:var(--eui-base-shadow-1)}.ux-editor--editable .ql-container{background-color:var(--eui-base-color-white);border:1px solid #ccc;padding:.35rem}.ux-editor .ql-toolbar{background-color:var(--eui-base-color-grey-2);border:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs);font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-toolbar.ql-snow button{background:none;border:none;cursor:pointer;display:inline-flex;padding:3px 5px;width:28px}.ux-editor .ql-toolbar.ql-snow .ql-formats{align-items:center;background-color:var(--eui-base-color-grey-5);border:1px solid var(--eui-base-color-grey-15);border-radius:5px;display:inline-flex;margin-bottom:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-xs);vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker{align-items:center;color:var(--eui-base-color-grey-90);display:inline-flex;font-size:var(--eui-base-font-size);height:var(--eui-base-spacing-xl);max-height:var(--eui-base-spacing-xl);position:relative;vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker.ql-expanded .ql-picker-label{border-color:transparent}.ux-editor .ql-toolbar.ql-snow .ql-formats button{align-items:center;background-color:transparent;border:0 solid var(--eui-base-color-grey-15);box-shadow:none;color:var(--eui-base-color-grey-90);display:inline-flex;height:var(--eui-base-spacing-xl);justify-content:center;min-width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:hover{background:var(--eui-base-color-grey-10);color:var(--eui-base-color-info-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.active,.ux-editor .ql-toolbar.ql-snow .ql-formats button.ql-active{background:var(--eui-base-color-accent-100);color:var(--eui-base-color-primary-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:first-child{border-radius:5px 0 0 5px}.ux-editor .ql-toolbar.ql-snow .ql-formats button:last-child{border-radius:0 5px 5px 0}.ux-editor .ql-toolbar.ql-snow .ql-formats button .eui-icon{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:active,.ux-editor .ql-toolbar.ql-snow .ql-formats button:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters{align-items:center;cursor:default;display:inline-flex;width:auto}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter.chars-counter--error{color:var(--eui-base-color-danger-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-label,.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-label{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-formats select{background-color:transparent;border:.5px solid var(--eui-base-color-black);border-radius:5px;cursor:pointer;font-size:var(--eui-base-font-size-s);outline:0;padding:.4rem;vertical-align:middle;width:90px}.ux-editor .ql-toolbar.ql-snow .ql-formats select:active,.ux-editor .ql-toolbar.ql-snow .ql-formats select:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(7 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before{content:\"Small\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smaller]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{content:\"Smaller\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smallest]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{content:\"Smallest\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before{content:\"Large\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-small{font-size:var(--eui-base-font-size-s)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{font-size:var(--eui-base-font-size-2xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-large{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-huge{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"1\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"2\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"3\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"4\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"5\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"6\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{font-size:var(--eui-base-font-size-3xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{font-size:var(--eui-base-font-size-l)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{font-size:var(--eui-base-font-size-m)}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item:before{content:\"Sans Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=serif]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=monospace]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=sans-serif]:before{font-family:arial,sans-serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{font-family:times new roman,serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{font-family:courier new,monospace!important}.ux-editor .ql-toolbar.ql-snow .ql-color-picker{width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px;display:inline-flex}.ux-editor .ql-container{box-sizing:border-box;height:100%;margin:0;position:relative;resize:vertical;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-container:focus{outline:1px solid var(--eui-base-color-accent-110)}.ux-editor .ql-editor{box-sizing:border-box;height:100%;line-height:var(--eui-base-line-height);outline:none;overflow-y:auto;padding:var(--eui-base-spacing-s);tab-size:4;text-align:left;white-space:pre-wrap;word-break:normal;word-wrap:break-word;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-editor h1{font-size:var(--eui-base-font-size-4xl)!important}.ux-editor .ql-editor h2{font-size:var(--eui-base-font-size-3xl)!important}.ux-editor .ql-editor h3{font-size:var(--eui-base-font-size-2xl)!important}.ux-editor .ql-editor h4{font-size:var(--eui-base-font-size-xl)!important}.ux-editor .ql-editor h5{font-size:var(--eui-base-font-size-l)!important}.ux-editor .ql-editor h6{font-size:var(--eui-base-font-size-m)!important}.ux-editor .ql-editor .h7{font-size:var(--eui-base-font-size-s)!important}.ux-editor .ql-editor .h8{font-size:var(--eui-base-font-size-xs)!important}.ux-editor .ql-editor .h9{font-size:var(--eui-base-font-size-2xs)!important}.ux-editor .ql-editor p{padding-bottom:var(--eui-base-spacing-s)!important}.ux-editor .ql-editor p:last-child{padding-bottom:0!important}.ux-editor .ql-editor em,.ux-editor .ql-editor i{font-style:italic!important}.ux-editor .ql-editor strong,.ux-editor .ql-editor b{font-weight:700!important}.ux-editor .ql-editor strong em,.ux-editor .ql-editor strong i,.ux-editor .ql-editor b em,.ux-editor .ql-editor b i{font-style:italic!important;font-weight:700!important}.ux-editor .ql-editor strong em u,.ux-editor .ql-editor strong i u,.ux-editor .ql-editor b em u,.ux-editor .ql-editor b i u{text-decoration:underline!important}.ux-editor .ql-editor blockquote{border-left:var(--eui-base-spacing-xs) solid var(--eui-base-color-grey-20);margin-bottom:0;margin-top:0;padding-left:var(--eui-base-spacing-m)}.ux-editor .ql-editor code,.ux-editor .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ux-editor .ql-editor pre{margin-bottom:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m);white-space:pre-wrap}.ux-editor .ql-editor code{font-size:85%;padding:2px 4px;word-break:break-word}.ux-editor .ql-editor ol,.ux-editor .ql-editor ul{padding-left:0}.ux-editor .ql-editor ol{counter-reset:inherit}.ux-editor .ql-editor pre.ql-syntax{background-color:var(--eui-base-color-grey-80);color:#f5f5f5;overflow:visible}.ux-editor .ql-editor iframe,.ux-editor .ql-editor img{display:inline-block;height:1;width:1}.ux-editor .ql-editor.ql-blank:before{left:var(--eui-base-spacing-m);position:absolute;right:0}.ux-editor .ql-tooltip{background-color:var(--eui-base-color-grey-10);left:50%!important;margin:0 auto;outline:2px solid var(--eui-base-color-primary-100);position:absolute;top:50%!important;transform:translate(-50%,-50%)!important;width:70%;box-shadow:var(--eui-base-shadow-1)}.ux-editor .ql-tooltip input[type=text]{border:1px solid #ccc;display:none;font-size:13px;height:26px;margin:0;padding:3px 5px;width:75%}.ux-editor .ql-tooltip a.ql-preview{display:inline-block;max-width:60%;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top;width:100%}.ux-editor__debug{background-color:#fff3cd;border:1px solid #f5c6cb;border-radius:.25rem;color:#856404;font:.85rem consolas,monospace,sans-serif;margin:var(--eui-base-spacing-m) 0;padding:var(--eui-base-spacing-s) 1.25rem;position:relative}.ux-editor__debug-section{align-items:center;display:flex;flex-wrap:wrap;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-title{color:#e83e8c;font-size:var(--eui-base-font-size-xl);font-weight:900;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-badge{font-size:var(--eui-base-font-size-xs);font-weight:400;margin:0 var(--eui-base-spacing-2xs);padding:var(--eui-base-spacing-3xs) var(--eui-base-spacing-xs)}.ux-editor__debug-badge--off{background-color:#e8e0c4;border:1px solid #d2d2d2;color:#888}.ux-editor__debug-badge--on{background-color:#28a745;border:1px solid #218037;color:var(--eui-base-color-white)}.ux-editor__debug-badge--alert{background-color:#dc3545;border:1px solid #721d25;color:var(--eui-base-color-white)}.ux-editor__debug-source{background-color:#ffeeba;font-size:var(--eui-base-font-size);height:auto;max-height:150px;outline:1px dashed silver;overflow-y:auto;padding:var(--eui-base-spacing-xs);position:relative}.ux-editor__debug-source-code{color:#e83e8c;font:90% consolas,monospace}.ux-editor__debug code{font-size:var(--eui-base-font-size-xs)}.ux-editor__about{background:var(--eui-base-color-white);display:block;height:10rem;left:50%;overflow-y:auto;padding:var(--eui-base-spacing-m);position:absolute;transform:translate(-50%,25%);width:20rem;z-index:1;box-shadow:var(--eui-base-shadow-3)}ux-editor.ng-invalid.ng-touched .ux-editor:not(.ux-editor--readonly) .ql-container{outline:1px solid var(--eui-base-color-danger-100)}\n"] }]
+            args: [{ selector: 'ux-editor', encapsulation: ViewEncapsulation.None, template: "<div class=\"ux-editor-wrapper\">\n    <quill-editor *ngIf=\"!isReadOnly || isUsedNativeEditorInReadMode\"\n                [id]=\"generatedId\"\n                class=\"ux-editor {{styleClass}}\"\n                [class.ux-editor--readonly]=\"isReadOnly\"\n                [class.ux-editor--focused]=\"isFocused\"\n                [class.ux-editor--editable]=\"!isReadOnly\"\n                [format]=\"format\"\n                [formats]=\"formats\"\n                [maxLength]=\"maxLength\"\n                [minLength]=\"minLength\"\n                [readOnly]=\"isReadOnly\"\n                [required]=\"isRequired\"\n                [sanitize]=\"isUsedSanitizationForHtml\"\n                [modules]=\"modules\"\n                [theme]=\"theme\"\n                [placeholder]=\"placeholder\"\n                [styles]=\"style\"\n                [customToolbarPosition]=\"customToolbarPosition\"\n                [preserveWhitespace]=\"preserveWhitespace\"\n                [spellcheck]=\"spellcheck\"\n                [formControl]=\"formControl\"\n                [debug]=\"false\"\n                [tabindex]=\"tabindex\"\n                [attr.aria-invalid]=\"ariaInvalid\"\n                [attr.aria-required]=\"isRequired\"\n                (onEditorCreated)=\"onEditorCreatedEmit($event)\"\n                (onEditorChanged)=\"onEditorChangedEmit($event)\"\n                (onContentChanged)=\"onContentChangedEmit($event)\"\n                (onSelectionChanged)=\"onSelectionChangedEmit($event)\"\n                (onFocus)=\"onFocusEmit($event)\"\n                (onBlur)=\"onBlurEmit($event)\">\n\n        <!-- PREDEFINED DEFAULT TOOLBAR -->\n        <div *ngIf=\"!customToolbarOptions && !customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <span class=\"ql-formats\">\n                <select class=\"ql-header\" title=\"Style{{crlf}}Apply an HTML tag or CSS class to the selected text\">\n                    <option value=\"1\">Heading 1</option>\n                    <option value=\"2\">Heading 2</option>\n                    <option value=\"3\">Heading 3</option>\n                    <option value=\"4\">Heading 4</option>\n                    <option value=\"5\">Heading 5</option>\n                    <option value=\"6\">Heading 6</option>\n                    <option selected>Normal</option>\n                </select>\n            </span>\n            <!-- <span class=\"ql-formats\">\n                <select class=\"ql-size\" title=\"Font size{{crlf}}Change the font size of the selected text\">\n                    <option value=\"small\">Small</option>\n                    <option selected>Normal</option>\n                    <option value=\"large\">Large</option>\n                    <option value=\"huge\">Huge</option>\n                </select>\n            </span> -->\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <select class=\"ql-font\" title=\"Font{{crlf}}Change the font face\">\n                    <option selected>Sans Serif</option>\n                    <option value=\"serif\">Serif</option>\n                    <option value=\"monospace\">Monospace</option>\n                </select>\n            </span>\n            <span class=\"ql-formats\">\n                <button class=\"ql-bold\" aria-label=\"Bold (Ctrl + B)\" title=\"Bold (Ctrl + B){{crlf}}Make the selected text bold\"></button>\n                <button class=\"ql-italic\" aria-label=\"Italic (Ctrl + I)\" title=\"Italic (Ctrl + I){{crlf}}Italicize the selected text\"></button>\n                <button class=\"ql-underline\" aria-label=\"Underline (Ctrl + U)\" title=\"Underline (Ctrl + U){{crlf}}Underline the selected text\"></button>\n                <button class=\"ql-strike\" aria-label=\"Strikethrough\" title=\"Strikethrough{{crlf}}Draw a line to the middle of the selected text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-color\" aria-label=\"Font Color\" title=\"Font Color{{crlf}}Change the text color\"></select>\n                <select class=\"ql-background\" aria-label=\"Text Highlight Color\" title=\"Text Highlight Color{{crlf}}Change the background color of the text\"></select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-script\" value=\"sub\" aria-label=\"Subscript\" title=\"Subscript{{crlf}}Create ssmall letters below the text baseline\"></button>\n                <button class=\"ql-script\" value=\"super\" aria-label=\"Superscript\" title=\"Superscript{{crlf}}Create small letters above the line of the text\"></button>\n            </span>\n            <span class=\"ql-formats\">\n                <select class=\"ql-align\" aria-label=\"Text Align\" title=\"Text Align{{crlf}}Align the text to the selected position: left (default), center, right or justify\">\n                    <option selected></option>\n                    <option value=\"center\"></option>\n                    <option value=\"right\"></option>\n                    <option value=\"justify\"></option>\n                </select>\n            </span>\n            <span *ngIf=\"!isMinimalToolbar\" class=\"ql-formats\">\n                <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" title=\"Numbering{{crlf}}Start an ordered list\"></button>\n                <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" title=\"Bullets{{crlf}}Start a bulleted list\"></button>\n                <button class=\"ql-indent\" value=\"-1\" type=\"button\" aria-label=\"Decrease Indent\" title=\"Decrease Indent{{crlf}}Decrease the indent level of the paragraph\"></button>\n                <button class=\"ql-indent\" value=\"+1\" type=\"button\" aria-label=\"Increase Indent\" title=\"Increase Indent{{crlf}}Increase the indent level of the paragraph\"></button>\n            </span>\n            <!-- Insert group -->\n            <span class=\"ql-formats\">\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-blockquote\" aria-label=\"Blockquote\" title=\"Blockquote{{crlf}}Create a quoted block of the selected text\"></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-code-block\" aria-label=\"Insert Code Block\" title=\"Insert Code Block{{crlf}}Insert a code block at the cursor row position\"></button>\n                <button class=\"ql-link\" aria-label=\"Insert Link\" title=\"Insert Hyperlink (Ctrl + K){{crlf}}Create a link to a Web page, a picture, an e-mail address or a program\"></button>\n                <button *ngIf=\"!isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image\" title=\"Insert Picture{{crlf}}Insert a picture from a file\"></button>\n                <button *ngIf=\"isImageUrl\" class=\"ql-image\" aria-label=\"Insert Image from URL\" title=\"Insert Picture from URL{{crlf}}Insert a picture from a remote URL\">\n                    <span class=\"eui-icon eui-icon-image-add\"></span></button>\n                <button *ngIf=\"!isMinimalToolbar\" class=\"ql-video\" aria-label=\"Insert Video\" title=\"Insert Video{{crlf}}Insert a video from a file\"></button>\n            </span>\n            <!-- Clean / Clear -->\n            <span class=\"ql-formats\">\n                <button class=\"ql-clean\" aria-label=\"Remove Styles\" title=\"Remove Styles{{crlf}}Remove the styles of the selected text\"></button>\n                <button aria-label=\"Delete\" title=\"Delete content{{crlf}}Permanently deletes editor's contents\" (click)=\"editorDeleteContent($event)\"><span class=\"eui-icon eui-icon-delete-forever\"></span></button>\n            </span>\n\n            <!-- Undo/Redo -->\n            <span class=\"ql-formats\">\n                <button aria-label=\"Undo (Ctrl + Z)\" title=\"Undo (Ctrl + Z){{crlf}}Cancels the previous action\" (click)=\"editorUndo()\"><span class=\"eui-icon eui-icon-undo\"></span></button>\n                <button aria-label=\"Redo (Ctrl + Y)\" title=\"Redo (Ctrl + Y){{crlf}}Do the next history action again\" (click)=\"editorRedo()\"><span class=\"eui-icon eui-icon-redo\"></span></button>\n            </span>\n            <!-- Counters -->\n            <span *ngIf=\"showCounters && (format === 'html' || format === 'text')\" class=\"ql-formats\">\n                <ux-editor-counters [charactersCounter]=\"charactersCounter\"\n                                    [charactersLabel]=\"charactersLabel\"\n                                    [wordsCounter]=\"wordsCounter\"\n                                    [wordsLabel]=\"wordsLabel\"\n                                    [isMaxLengthValid]=\"isMaxLengthValid\"\n                                    aria-label=\"Counters\"\n                                    title=\"Counters{{crlf}}Characters and words counters (stripped Html)\">\n                </ux-editor-counters>\n            </span>\n        </div>\n\n        <!-- USER CUSTOM TOOLBAR (HTML FORMAT) -->\n        <div *ngIf=\"customEditorToolbar\" quill-editor-toolbar (focusin)=\"onToolbarFocusIn($event)\" (focusout)=\"onToolbarFocusOut($event)\">\n            <ng-content select=\"uxEditorCustomToolbar\"></ng-content>\n        </div>\n    </quill-editor>\n\n    <!-- MAXLENGTH INDICATOR -->\n    <div *ngIf=\"!isReadOnly && charactersLeft > -1\" class=\"maxlength-wrapper\" [class.maxlength-wrapper--error]=\"!isMaxLengthValid\">{{ charactersLeft }}</div>\n</div>\n\n\n<!-- READONLY MODE -->\n<div *ngIf=\"isReadOnly && !isUsedNativeEditorInReadMode\" class=\"ux-editor ux-editor--readonly {{styleClass}}\" [class.ux-editor--empty]=\"!value\" tabindex=\"{{tabindex}}\" (click)=\"enableEditorOnClickFocus($event)\" (focusin)=\"enableEditorOnClickFocus($event)\">\n    <ux-editor-view-html *ngIf=\"format === 'html' || format === 'text'\" [content]=\"value\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view-html>\n    <ux-editor-view *ngIf=\"format === 'object' || format === 'json'\" [content]=\"value\" [format]=\"format\" [theme]=\"theme\" [styles]=\"hasReadOnlyStyles ? style : null\"></ux-editor-view>\n</div>\n\n\n<!-- DEBUGGER -->\n<div *ngIf=\"debug\" class=\"ux-editor__debug\">\n    <div class=\"ux-editor__debug-title\">UX-EDITOR debug</div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>OPTIONS:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">id: <span class=\"eui-u-color-black\">{{generatedId}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">toolbarPosition: {{customToolbarPosition}}</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isReadOnly\" [class.ux-editor__debug-badge--off]=\"!isReadOnly\">isReadOnly</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEnabledOnFocus\" [class.ux-editor__debug-badge--off]=\"!isEnabledOnFocus\">isEnabledOnFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"preserveWhitespace\" [class.ux-editor__debug-badge--off]=\"!preserveWhitespace\">preserveWhitespace</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"spellcheck\" [class.ux-editor__debug-badge--off]=\"!spellcheck\">spellcheck</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">maxLength: <span class=\"eui-u-color-black\">{{maxLength}}</span></span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>EVENTS:</strong>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFocused\" [class.ux-editor__debug-badge--off]=\"!isFocused\">onFocus</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isBlured\" [class.ux-editor__debug-badge--off]=\"!isBlured\">onBlur</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isEditorCreated\" [class.ux-editor__debug-badge--off]=\"!isEditorCreated\">onEditorCreated</span>\n        <!-- <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasEditorChanged\" [class.ux-editor__debug-badge--off]=\"!hasEditorChanged\">onEditorChanged</span> -->\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasContentChanged\" [class.ux-editor__debug-badge--off]=\"!hasContentChanged\">onContentChanged</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"hasSelectionChanged\" [class.ux-editor__debug-badge--off]=\"!hasSelectionChanged\">onSelectionChanged</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>FORM:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">controlName: <span class=\"eui-u-color-black\">{{formControlName}}</span></span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isRequired\" [class.ux-editor__debug-badge--off]=\"!isRequired\">isRequired</span>\n        <span class=\"ux-editor__debug-badge\" [class.ux-editor__debug-badge--on]=\"isFormControlValid\" [class.ux-editor__debug-badge--alert]=\"!isFormControlValid\">isFormControlValid</span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">validationErrorMessage: <span class=\"eui-u-color-{{feedbackTypeClass}}\">{{formValidationErrorMessage}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--on\" [class.ux-editor__debug-badge--alert]=\"!isMaxLengthValid\">isMaxLengthValid</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>STYLE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">{{ style | json}}</span>\n    </div>\n    <div class=\"ux-editor__debug-section\">\n        <strong>SOURCE:</strong>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">format: <span class=\"eui-u-color-black\">{{format}}</span></span>\n        <span class=\"ux-editor__debug-badge ux-editor__debug-badge--off\">charactersLeft: <span [ngClass]=\"isMaxLengthValid ? 'eui-u-color-black' : 'eui-u-color-danger'\">{{charactersLeft}}</span></span>\n\n    </div>\n    <div class=\"ux-editor__debug-source\">\n        <code *ngIf=\"format === 'text' || format === 'html'\">{{formControl.value}}</code>\n        <code *ngIf=\"format === 'json' || format === 'object'\"><pre class=\"ux-editor__debug-source-code\">{{formControl.value | json}}</pre></code>\n    </div>\n</div>\n", styles: ["/*!\n* eUI alignments & improvements for ux-editor based on (Ngx-)QuillJS Editor v1.3.7+\n*/.ux-editor-wrapper{position:relative}.ux-editor-wrapper .maxlength-wrapper{background-color:var(--eui-base-color-primary-50);border:1px solid var(--eui-base-color-primary-100);border-radius:3px;color:var(--eui-base-color-white);font-size:.75rem;padding:1px 3px;position:absolute;right:-.5rem;top:-.75rem;z-index:2}.ux-editor-wrapper .maxlength-wrapper.maxlength-wrapper--error{background-color:var(--eui-base-color-danger-75);border:1px solid var(--eui-base-color-danger-100)}.ux-editor{display:block;position:relative}.ux-editor--readonly{padding:var(--eui-base-spacing-s) 0 0 0}.ux-editor--readonly .ql-toolbar{display:none}.ux-editor--readonly .ql-container{border:none}.ux-editor--readonly .ql-editor{min-height:calc(var(--eui-base-spacing-2xl) + 2px);padding:0 var(--eui-base-spacing-m) 0 0!important}.ux-editor--readonly.ux-editor--empty .ql-container{border:none;outline:1px dashed var(--eui-base-color-grey-15)}.ux-editor--readonly.ux-editor--empty .ql-container:hover{outline:1px solid var(--eui-base-color-grey-20)}.ux-editor--focused .ql-container{outline:1px solid var(--eui-base-color-accent-110);box-shadow:var(--eui-base-shadow-1)}.ux-editor--editable .ql-container{background-color:var(--eui-base-color-white);border:1px solid #ccc;padding:.35rem}.ux-editor .ql-toolbar{background-color:var(--eui-base-color-grey-2);border:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0 var(--eui-base-spacing-xs);font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-toolbar.ql-snow button{background:none;border:none;cursor:pointer;display:inline-flex;padding:3px 5px;width:28px}.ux-editor .ql-toolbar.ql-snow .ql-formats{align-items:center;background-color:var(--eui-base-color-grey-5);border:1px solid var(--eui-base-color-grey-15);border-radius:5px;display:inline-flex;margin-bottom:var(--eui-base-spacing-xs);margin-right:var(--eui-base-spacing-xs);vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker{align-items:center;color:var(--eui-base-color-grey-90);display:inline-flex;font-size:var(--eui-base-font-size);height:var(--eui-base-spacing-xl);max-height:var(--eui-base-spacing-xl);position:relative;vertical-align:middle}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-picker.ql-expanded .ql-picker-label{border-color:transparent}.ux-editor .ql-toolbar.ql-snow .ql-formats button{align-items:center;background-color:transparent;border:0 solid var(--eui-base-color-grey-15);box-shadow:none;color:var(--eui-base-color-grey-90);display:inline-flex;height:var(--eui-base-spacing-xl);justify-content:center;min-width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:hover{background:var(--eui-base-color-grey-10);color:var(--eui-base-color-info-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.active,.ux-editor .ql-toolbar.ql-snow .ql-formats button.ql-active{background:var(--eui-base-color-accent-100);color:var(--eui-base-color-primary-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:first-child{border-radius:5px 0 0 5px}.ux-editor .ql-toolbar.ql-snow .ql-formats button:last-child{border-radius:0 5px 5px 0}.ux-editor .ql-toolbar.ql-snow .ql-formats button .eui-icon{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-formats button:active,.ux-editor .ql-toolbar.ql-snow .ql-formats button:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters{align-items:center;cursor:default;display:inline-flex;width:auto}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-counter.chars-counter--error{color:var(--eui-base-color-danger-100)}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-counter{color:var(--eui-base-color-info-100);font-size:var(--eui-base-font-size-s);font-weight:900}.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .chars-label,.ux-editor .ql-toolbar.ql-snow .ql-formats button.editor-counters .words-label{color:var(--eui-base-color-grey-80);font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-formats select{background-color:transparent;border:.5px solid var(--eui-base-color-black);border-radius:5px;cursor:pointer;font-size:var(--eui-base-font-size-s);outline:0;padding:.4rem;vertical-align:middle;width:90px}.ux-editor .ql-toolbar.ql-snow .ql-formats select:active,.ux-editor .ql-toolbar.ql-snow .ql-formats select:focus{z-index:auto;border-color:var(--eui-base-color-accessible-focus)!important;box-shadow:inset 0 0 0 1px var(--eui-base-color-accessible-focus),inset 0 0 0 2px var(--eui-base-color-grey-5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.ux-editor .ql-toolbar.ql-snow .ql-formats .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(7 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before{content:\"Small\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smaller]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{content:\"Smaller\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=smallest]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{content:\"Smallest\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before{content:\"Large\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-label[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=small]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-small{font-size:var(--eui-base-font-size-s)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smaller]:before{font-size:var(--eui-base-font-size-xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=smallest]:before{font-size:var(--eui-base-font-size-2xs)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=large]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-large{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-picker-item[data-value=huge]:before,.ux-editor .ql-toolbar.ql-snow .ql-size.ql-picker .ql-size-huge{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item:before{content:\"Normal\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"1\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"2\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"3\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"4\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"5\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-label[data-value=\"6\"]:before,.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"1\"]:before{font-size:var(--eui-base-font-size-4xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"2\"]:before{font-size:var(--eui-base-font-size-3xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"3\"]:before{font-size:var(--eui-base-font-size-2xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"4\"]:before{font-size:var(--eui-base-font-size-xl)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"5\"]:before{font-size:var(--eui-base-font-size-l)}.ux-editor .ql-toolbar.ql-snow .ql-header.ql-picker .ql-picker-item[data-value=\"6\"]:before{font-size:var(--eui-base-font-size-m)}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker{height:var(--eui-base-spacing-xl);padding:var(--eui-base-spacing-2xs) 0;width:calc(8 * var(--eui-base-spacing-m))}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item:before{content:\"Sans Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=serif]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-label[data-value=monospace]:before,.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=sans-serif]:before{font-family:arial,sans-serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=serif]:before{font-family:times new roman,serif!important}.ux-editor .ql-toolbar.ql-snow .ql-font.ql-picker .ql-picker-item[data-value=monospace]:before{font-family:courier new,monospace!important}.ux-editor .ql-toolbar.ql-snow .ql-color-picker{width:var(--eui-base-spacing-xl)}.ux-editor .ql-toolbar.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px;display:inline-flex}.ux-editor .ql-container{box-sizing:border-box;height:100%;margin:0;position:relative;resize:vertical;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-container:focus{outline:1px solid var(--eui-base-color-accent-110)}.ux-editor .ql-editor{box-sizing:border-box;height:100%;line-height:var(--eui-base-line-height);outline:none;overflow-y:auto;padding:var(--eui-base-spacing-s);tab-size:4;text-align:left;white-space:pre-wrap;word-break:normal;word-wrap:break-word;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-style:normal;font-weight:400}.ux-editor .ql-editor h1{font-size:var(--eui-base-font-size-4xl)!important}.ux-editor .ql-editor h2{font-size:var(--eui-base-font-size-3xl)!important}.ux-editor .ql-editor h3{font-size:var(--eui-base-font-size-2xl)!important}.ux-editor .ql-editor h4{font-size:var(--eui-base-font-size-xl)!important}.ux-editor .ql-editor h5{font-size:var(--eui-base-font-size-l)!important}.ux-editor .ql-editor h6{font-size:var(--eui-base-font-size-m)!important}.ux-editor .ql-editor .h7{font-size:var(--eui-base-font-size-s)!important}.ux-editor .ql-editor .h8{font-size:var(--eui-base-font-size-xs)!important}.ux-editor .ql-editor .h9{font-size:var(--eui-base-font-size-2xs)!important}.ux-editor .ql-editor p{padding-bottom:var(--eui-base-spacing-s)!important}.ux-editor .ql-editor p:last-child{padding-bottom:0!important}.ux-editor .ql-editor em,.ux-editor .ql-editor i{font-style:italic!important}.ux-editor .ql-editor strong,.ux-editor .ql-editor b{font-weight:700!important}.ux-editor .ql-editor strong em,.ux-editor .ql-editor strong i,.ux-editor .ql-editor b em,.ux-editor .ql-editor b i{font-style:italic!important;font-weight:700!important}.ux-editor .ql-editor strong em u,.ux-editor .ql-editor strong i u,.ux-editor .ql-editor b em u,.ux-editor .ql-editor b i u{text-decoration:underline!important}.ux-editor .ql-editor blockquote{border-left:var(--eui-base-spacing-xs) solid var(--eui-base-color-grey-20);margin-bottom:0;margin-top:0;padding-left:var(--eui-base-spacing-m)}.ux-editor .ql-editor code,.ux-editor .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ux-editor .ql-editor pre{margin-bottom:var(--eui-base-spacing-xs);margin-top:var(--eui-base-spacing-xs);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m);white-space:pre-wrap}.ux-editor .ql-editor code{font-size:85%;padding:2px 4px;word-break:break-word}.ux-editor .ql-editor ol,.ux-editor .ql-editor ul{padding-left:0}.ux-editor .ql-editor ol{counter-reset:inherit}.ux-editor .ql-editor pre.ql-syntax{background-color:var(--eui-base-color-grey-80);color:#f5f5f5;overflow:visible}.ux-editor .ql-editor iframe,.ux-editor .ql-editor img{display:inline-block;height:1;width:1}.ux-editor .ql-editor.ql-blank:before{left:var(--eui-base-spacing-m);position:absolute;right:0}.ux-editor .ql-tooltip{background-color:var(--eui-base-color-grey-10);left:50%!important;margin:0 auto;outline:2px solid var(--eui-base-color-primary-100);position:absolute;top:50%!important;transform:translate(-50%,-50%)!important;width:70%;box-shadow:var(--eui-base-shadow-1)}.ux-editor .ql-tooltip input[type=text]{border:1px solid #ccc;display:none;font-size:13px;height:26px;margin:0;padding:3px 5px;width:75%}.ux-editor .ql-tooltip a.ql-preview{display:inline-block;max-width:60%;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top;width:100%}.ux-editor__debug{background-color:#fff3cd;border:1px solid #f5c6cb;border-radius:.25rem;color:#856404;font:.85rem consolas,monospace,sans-serif;margin:var(--eui-base-spacing-m) 0;padding:var(--eui-base-spacing-s) 1.25rem;position:relative}.ux-editor__debug-section{align-items:center;display:flex;flex-wrap:wrap;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-title{color:#e83e8c;font-size:var(--eui-base-font-size-xl);font-weight:900;padding-bottom:var(--eui-base-spacing-xs)}.ux-editor__debug-badge{font-size:var(--eui-base-font-size-xs);font-weight:400;margin:0 var(--eui-base-spacing-2xs);padding:var(--eui-base-spacing-3xs) var(--eui-base-spacing-xs)}.ux-editor__debug-badge--off{background-color:#e8e0c4;border:1px solid #d2d2d2;color:#888}.ux-editor__debug-badge--on{background-color:#28a745;border:1px solid #218037;color:var(--eui-base-color-white)}.ux-editor__debug-badge--alert{background-color:#dc3545;border:1px solid #721d25;color:var(--eui-base-color-white)}.ux-editor__debug-source{background-color:#ffeeba;font-size:var(--eui-base-font-size);height:auto;max-height:150px;outline:1px dashed silver;overflow-y:auto;padding:var(--eui-base-spacing-xs);position:relative}.ux-editor__debug-source-code{color:#e83e8c;font:90% consolas,monospace}.ux-editor__debug code{font-size:var(--eui-base-font-size-xs)}.ux-editor__about{background:var(--eui-base-color-white);display:block;height:10rem;left:50%;overflow-y:auto;padding:var(--eui-base-spacing-m);position:absolute;transform:translate(-50%,25%);width:20rem;z-index:1;box-shadow:var(--eui-base-shadow-3)}ux-editor.ng-invalid.ng-touched .ux-editor:not(.ux-editor--readonly) .ql-container{outline:1px solid var(--eui-base-color-danger-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: i4.UxFormGroupComponent, decorators: [{
                     type: Optional
                 }, {