@libs-ui/components-inputs-quill 0.2.145 → 0.2.147

package/fesm2022/libs-ui-components-inputs-quill.mjs

@@ -14,9 +14,60 @@ import { patternUrl, convertFileToBase64, get, set, isNil, xssFilter, ERROR_MESS
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import Quill from 'quill';
-import { Subject, fromEvent, takeUntil } from 'rxjs';
+import { Subject, lastValueFrom, timer, fromEvent, takeUntil } from 'rxjs';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { returnListObject } from '@libs-ui/services-http-request';
+import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
+
+const Block = Quill.import("blots/block");
+class QuillDivBlot extends Block {
+    static tagName = "div";
+}
+
+const ImageFormat = Quill.import('formats/image');
+class CustomImageBlot extends ImageFormat {
+    static create(value) {
+        const node = super.create(value);
+        node.classList.add('libs-ui-quill-format-image');
+        return node;
+    }
+    formats() {
+        return {}; // Tránh Quill tự động thêm thẻ `<span>`
+    }
+}
+
+const Embed = Quill.import("blots/embed");
+class QuillMentionBlot extends Embed {
+    static blotName = "mention";
+    static tagName = "span";
+    static className = "libs-ui-quill-mention";
+    static create(data) {
+        const node = super.create();
+        node.innerText += data.value;
+        node.setAttribute('id', data.id);
+        node.setAttribute('feId', data.feId);
+        node.setAttribute('value', data.value);
+        return node;
+    }
+    static value(domNode) {
+        return {
+            id: domNode.getAttribute('id'),
+            feId: domNode.getAttribute('feId'),
+            value: domNode.getAttribute('value')
+        };
+    }
+    attach() {
+        super.attach();
+        if (!this.mounted) {
+            this.mounted = true;
+            this.clickHandler = this.getClickHandler;
+            this.domNode.addEventListener("click", this.clickHandler, false);
+        }
+    }
+    getClickHandler(event) {
+        event.stopPropagation();
+    }
+}
 
 const parchment = Quill.import('parchment');
 const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8];
@@ -86,39 +137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<libs_ui-components-modal [title]=\"'i18n_insert_link'\"\n  [mode]=\"'center'\"\n  [height]=\"'auto'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true}\"\n  [zIndex]=\"zIndex()\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'i18n_content', required: true}\"\n      [(item)]=\"dataLink\"\n      [fieldNameBind]=\"'title'\"\n      [placeholder]=\"'i18n_import_content'\"\n      [validRequired]=\"{isRequired: true}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    <div class=\"mt-[16px]\">\n      <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'Link', required: true}\"\n        [(item)]=\"dataLink\"\n        [fieldNameBind]=\"'link'\"\n        [placeholder]=\"'https:/\u2026'\"\n        [validRequired]=\"{isRequired: true}\"\n        [validPattern]=\"[{pattern: patternLink(), valuePatternShowError: false}]\"\n        [keySelectedUnitLeft]=\"'1'\"\n        [unitsLeft]=\"[{id:'1',label:'URL'}]\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    </div>\n  </div>\n</libs_ui-components-modal>\n" }]
         }] });
 
-const Embed = Quill.import("blots/embed");
-class QuillMentionBlot extends Embed {
-    static create(data) {
-        const node = super.create();
-        node.innerText += data.value;
-        node.setAttribute('id', data.id);
-        node.setAttribute('feId', data.feId);
-        node.setAttribute('value', data.value);
-        return node;
-    }
-    static value(domNode) {
-        return {
-            id: domNode.getAttribute('id'),
-            feId: domNode.getAttribute('feId'),
-            value: domNode.getAttribute('value')
-        };
-    }
-    attach() {
-        super.attach();
-        if (!this.mounted) {
-            this.mounted = true;
-            this.clickHandler = this.getClickHandler;
-            this.domNode.addEventListener("click", this.clickHandler, false);
-        }
-    }
-    getClickHandler(event) {
-        event.stopPropagation();
-    }
-}
-QuillMentionBlot.blotName = "mention";
-QuillMentionBlot.tagName = "span";
-QuillMentionBlot.className = "libs-ui-quill-mention";
-
 class LibsUiComponentsInputsQuillUploadImageComponent {
     buttonFooter = signal([
         {
@@ -501,6 +519,8 @@ const linkDefault = () => {
 };
 
 class LibsUiComponentsInputsQuillComponent {
+    loadingUploadImage = signal(false);
+    timeDelayInit = signal(20);
     messageError = signal('');
     display = signal(false);
     listConfigAlign = signal(listConfigAlign());
@@ -531,7 +551,7 @@ class LibsUiComponentsInputsQuillComponent {
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     translate = inject(TranslateService);
     isShowToolBar = input(true, { transform: val => val ?? true });
-    isToolbarPositonFixed = input(false, { transform: val => val ?? false });
+    isToolbarPositionFixed = input(false, { transform: val => val ?? false });
     classIncludeToolbar = input('');
     stylesIncludeToolbar = input();
     toolbarConfig = input();
@@ -554,7 +574,7 @@ class LibsUiComponentsInputsQuillComponent {
     blotsRegister = input();
     heightAuto = input();
     autoFocus = input();
-    autoFocusBottom = input();
+    blockUndoRedoKeyboard = input();
     templateToolBarPersonalize = input();
     template = input();
     uploadImageConfig = input(uploadImageConfigDefault(), { transform: (value) => value || uploadImageConfigDefault() });
@@ -594,43 +614,40 @@ class LibsUiComponentsInputsQuillComponent {
             quill: () => this.quill()
         });
     }
-    ngAfterViewInit() {
-        if (this.autoFocus()) {
-            this.display.set(true);
-        }
+    async ngAfterViewInit() {
         this.setHandlerFunction();
+        await lastValueFrom(timer(this.timeDelayInit()));
         this.initQuill();
-        if (!this.autoFocus()) {
-            setTimeout(() => this.display.set(true), 400);
-        }
-        this.setContent(get(this.item(), this.fieldNameBind(), '').replace(/[\u200B-\u200D\uFEFF]/g, ''));
+        this.display.set(true);
+        this.setContent(get(this.item(), this.fieldNameBind(), ''));
         this.handlerTextChange();
         this.handlerSelectionChange();
         this.handlerPaste();
-        if (this.autoFocus()) {
+        if (!this.autoFocus()) {
+            // gọi hàm này để quill đánh dấu là đã focus trong khi quill chưa khởi tạo xong để không bị scroll xuống dưới.sau khi quill khởi tạo xong và check nếu đang focus đang được bật thì nó không gọi lại hàm focus nữa
             this.quill()?.focus();
         }
         fromEvent(window, 'resize').pipe(takeUntil(this.onDestroy)).subscribe(this.calculatorToolbar.bind(this));
+        await lastValueFrom(timer(400));
+        const cursorSpan = this.quill()?.root.querySelector('.ql-cursor');
+        if (cursorSpan) {
+            cursorSpan.remove();
+        }
     }
     initQuill() {
         const size = Quill.import('attributors/style/size');
-        const image = Quill.import('formats/image');
-        const parchment = Quill.import('parchment');
         const alignStyle = Quill.import('attributors/style/align');
         const icons = Quill.import('ui/icons');
-        const block = parchment.query('block');
         const italic = Quill.import('formats/italic');
         const bold = Quill.import('formats/bold');
         size.whitelist = ['8px', '9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '21px', '22px', '23px', '24px', '25px', '26px', '27px', '28px', '29px', '30px', '31px', '32px', '33px', '34px', '35px', '36px', '37px', '38px', '39px', '40px', '41px', '42px', '43px', '44px', '45px', '46px', '47px', '48px', '49px', '50px', '51px', '52px', '53px', '54px', '55px', '56px', '57px', '58px', '59px', '60px', '61px', '62px', '63px', '64px', '65px', '66px', '67px', '68px', '69px', '70px', '71px', '72px'];
-        image.className = 'libs-ui-quill-format-image';
-        block.tagName = 'DIV';
         italic.tagName = 'i';
-        bold.tagName = 'B';
+        bold.tagName = 'b';
         Quill.register(bold, true);
         Quill.register(italic, true);
         Quill.register(size, true);
-        Quill.register(image, true);
-        Quill.register(block, true);
+        Quill.register(CustomImageBlot, true);
+        Quill.register(QuillDivBlot, true);
         Quill.register(alignStyle, true);
         Quill.register(QuillMentionBlot, true);
         this.blotsRegister()?.forEach(item => {
@@ -668,10 +685,30 @@ class LibsUiComponentsInputsQuillComponent {
             bounds: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : this.quillEditorEl()?.nativeElement,
             scrollingContainer: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : null
         }));
-        this.quill()?.keyboard.addBinding({ key: 'Backspace' }, this.preventEmbedDeletion.bind(this));
-        this.quill()?.keyboard.addBinding({ key: 'Delete' }, this.preventEmbedDeletion.bind(this));
+        this.quill()?.keyboard.addBinding({ key: 'Backspace' }, this.noPreventEmbedDeletion.bind(this));
+        this.quill()?.keyboard.addBinding({ key: 'Delete' }, this.noPreventEmbedDeletion.bind(this));
+        this.setupUndoRedoBlocking();
     }
-    preventEmbedDeletion(range) {
+    setupUndoRedoBlocking() {
+        const editorRoot = this.quill()?.root;
+        if (editorRoot && this.blockUndoRedoKeyboard()) {
+            const keydownHandler = (e) => {
+                const isUndo = (e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey) && !e.shiftKey;
+                const isRedo = ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey) && e.shiftKey) ||
+                    ((e.key === 'y' || e.key === 'Y') && e.ctrlKey);
+                if (isUndo || isRedo) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log(`Blocking ${isUndo ? 'undo' : 'redo'} keyboard shortcut`);
+                }
+            };
+            editorRoot.addEventListener('keydown', keydownHandler, true);
+            this.onDestroy.subscribe(() => {
+                editorRoot.removeEventListener('keydown', keydownHandler, true);
+            });
+        }
+    }
+    noPreventEmbedDeletion(range) {
         if (!this.quill())
             return false;
         const delta = this.quill()?.getContents(range.index, 1);
@@ -801,21 +838,7 @@ class LibsUiComponentsInputsQuillComponent {
                 return;
             }
             event.preventDefault();
-            const images = [];
-            Array.from(files).forEach((file) => {
-                if (file && file.type.split('/')[0] === 'image') {
-                    images.push(file);
-                }
-            });
-            const links = await this.uploadImageConfig().functionUploadImage?.(images);
-            if (links && links.length) {
-                links.forEach(link => {
-                    if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(patternUrl()).test(link)))) {
-                        return;
-                    }
-                    this.insertImage(link);
-                });
-            }
+            await this.uploadImagesAndInsert(files);
         });
     }
     handlerTextChange() {
@@ -918,33 +941,20 @@ class LibsUiComponentsInputsQuillComponent {
         this.quill()?.history?.redo();
     }
     async setContent(content) {
-        const contentXssFilter = await xssFilter(content || '');
-        setTimeout(() => set(this.quill, 'root.innerHTML', contentXssFilter));
-        if (!contentXssFilter) {
-            return;
-        }
-        if (!this.autoFocusBottom()) {
+        const contentXssFilter = (await xssFilter(content || '')).replace(/^\s*<p><br><\/p>/, '').replace(/[\u200B-\u200D\uFEFF]/g, '');
+        await lastValueFrom(timer(1));
+        set(this.quill, 'root.innerHTML', contentXssFilter);
+        if (!this.autoFocus()) {
             return;
         }
-        setTimeout(() => {
-            this.quill()?.blur();
-            const range = document.createRange();
-            const sel = window.getSelection();
-            const target = this.quillEditorEl()?.nativeElement.querySelector('[contenteditable="true"]');
-            const contentScroll = this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : target;
-            range.selectNodeContents(target);
-            range.collapse(false);
-            sel?.removeAllRanges();
-            sel?.addRange(range);
-            target.focus();
-            contentScroll.scrollTop = contentScroll.scrollHeight;
-        }, 100);
+        await lastValueFrom(timer(100));
+        const target = this.quillEditorEl()?.nativeElement.querySelector('[contenteditable="true"]');
+        const contentScroll = this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : target;
+        contentScroll.scrollTop = contentScroll.scrollHeight;
+        this.quill()?.setSelection(contentXssFilter.length, 0, Quill.sources.SILENT);
     }
     handlerAddEmoji(emoji) {
-        const selection = this.quill()?.getSelection(true).index;
-        if (!isNil(selection)) {
-            this.quill()?.insertText(selection, emoji);
-        }
+        this.insertText(emoji, undefined, true);
     }
     handleShowUploadLink(event) {
         this.addEditLinkComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsQuillLinkComponent));
@@ -1005,10 +1015,14 @@ class LibsUiComponentsInputsQuillComponent {
             this.quill()?.setSelection(selection + 1, 0);
         }
     }
-    async insertText(content, index) {
-        const selection = index ?? this.quill()?.getSelection(true).index;
-        if (!isNil(selection)) {
-            this.quill()?.insertText(selection, content);
+    async insertText(content, index, focusLast) {
+        index = index ?? this.quill()?.getSelection(true).index;
+        if (!isNil(index)) {
+            this.quill()?.insertText(index, content, Quill.sources.USER);
+            if (focusLast) {
+                await lastValueFrom(timer(0));
+                this.quill()?.setSelection(index + content.length, 0, Quill.sources.USER);
+            }
         }
     }
     async insertLink(text, url, index) {
@@ -1079,20 +1093,38 @@ class LibsUiComponentsInputsQuillComponent {
         input.setAttribute('accept', 'image/*');
         input.click();
         input.onchange = async () => {
-            const file = input?.files?.[0];
-            if (!file || file.type.split('/')[0] !== 'image') {
+            await this.uploadImagesAndInsert(input?.files);
+        };
+    }
+    async uploadImagesAndInsert(files) {
+        if (!files) {
+            return;
+        }
+        const images = Array.from(files).filter((file) => file && file.type.split('/')[0] === 'image');
+        if (!images.length) {
+            return;
+        }
+        try {
+            this.loadingUploadImage.set(true);
+            const indexInsert = this.quill()?.getSelection(true).index;
+            const links = await this.uploadImageConfig().functionUploadImage?.(images);
+            if (!links?.length) {
                 return;
             }
-            const links = await this.uploadImageConfig().functionUploadImage?.([file]);
-            if (links && links.length) {
-                links.forEach(link => {
-                    if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(patternUrl()).test(link)))) {
-                        return;
-                    }
-                    this.insertImage(link);
-                });
-            }
-        };
+            links.forEach(link => {
+                if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(patternUrl()).test(link)))) {
+                    return;
+                }
+                this.insertImage(link, indexInsert);
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            this.loadingUploadImage.set(false);
+        }
+        return;
     }
     insertMention(event) {
         const range = this.quill()?.getSelection();
@@ -1103,7 +1135,7 @@ class LibsUiComponentsInputsQuillComponent {
         const startPosInsert = cursorPos - event.lengthKey;
         this.quill()?.deleteText(startPosInsert, event.lengthKey, Quill.sources.USER);
         this.quill()?.insertEmbed(startPosInsert, 'mention', event.data, Quill.sources.USER);
-        this.quill()?.insertText(startPosInsert + 1, ' ', Quill.sources.USER);
+        this.insertText(' ', startPosInsert + 1);
         this.quill()?.setSelection(startPosInsert + 2, 0, Quill.sources.USER);
     }
     handlerInsertMention(data) {
@@ -1136,7 +1168,7 @@ class LibsUiComponentsInputsQuillComponent {
         clearTimeout(this.timeCalculationToolBar());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsQuillComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill", inputs: { isShowToolBar: { classPropertyName: "isShowToolBar", publicName: "isShowToolBar", isSignal: true, isRequired: false, transformFunction: null }, isToolbarPositonFixed: { classPropertyName: "isToolbarPositonFixed", publicName: "isToolbarPositonFixed", isSignal: true, isRequired: false, transformFunction: null }, classIncludeToolbar: { classPropertyName: "classIncludeToolbar", publicName: "classIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, stylesIncludeToolbar: { classPropertyName: "stylesIncludeToolbar", publicName: "stylesIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, toolbarConfig: { classPropertyName: "toolbarConfig", publicName: "toolbarConfig", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, fieldNameBind: { classPropertyName: "fieldNameBind", publicName: "fieldNameBind", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null }, onlyShowErrorBorderInContent: { classPropertyName: "onlyShowErrorBorderInContent", publicName: "onlyShowErrorBorderInContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTemplate: { classPropertyName: "classIncludeTemplate", publicName: "classIncludeTemplate", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, dataConfigMention: { classPropertyName: "dataConfigMention", publicName: "dataConfigMention", isSignal: true, isRequired: false, transformFunction: null }, blotsRegister: { classPropertyName: "blotsRegister", publicName: "blotsRegister", isSignal: true, isRequired: false, transformFunction: null }, heightAuto: { classPropertyName: "heightAuto", publicName: "heightAuto", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, autoFocusBottom: { classPropertyName: "autoFocusBottom", publicName: "autoFocusBottom", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outFunctionsControl: "outFunctionsControl", outSelectionChange: "outSelectionChange", outTextChange: "outTextChange", outContextMenu: "outContextMenu" }, viewQueries: [{ propertyName: "wrapperEditorEl", first: true, predicate: ["wrapperEditor"], descendants: true, isSignal: true }, { propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "quillOptionEl", first: true, predicate: ["quillOption"], descendants: true, isSignal: true }, { propertyName: "quillEditorEl", first: true, predicate: ["quillEditor"], descendants: true, isSignal: true }, { propertyName: "toolbarItemsEl", first: true, predicate: ["toolbarItems"], descendants: true, isSignal: true }, { propertyName: "itemsEl", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositonFixed]=\"isToolbarPositonFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div #quillOption\n        [class.!hidden]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly()\"\n        class=\"{{ isToolbarPositonFixed() ? 'fixed !z-10 px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation':'' }} {{ classIncludeToolbar() }}\"\n        [class.bg-[#f8f9fa]]=\"!readonly()\"\n        [class.libs-ui-readonly-background]=\"readonly()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div #item\n          [id]=\"option.type+'_'+$index\"\n          class=\"items-center\"\n          [class.hidden]=\"itemHidden().includes($index) || itemHiddenExpand().includes($index)\"\n          [class.flex]=\"!itemHidden().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (itemHidden().length) {\n          <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div [class.hidden]=\"!showMoreAction() || !itemHidden().length\"\n          class=\"absolute bg-[#ffffff] shadow-md z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"!itemHidden().includes($index)\"\n              [class.flex]=\"itemHidden().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div class=\"relative w-[128px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div\n            class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex:1250}\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div\n      class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_quote', zIndex:1250}\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_image', zIndex:1250}\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji [zIndex]=\"1250\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{template: viewLink, whiteTheme: true, ignoreArrow: true}\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective>{{ link().url }}</div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631'\n          },\n          rootColor: '#071631'\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LibsUiComponentsInputsMentionDirective, selector: "[LibsUiComponentsInputsMentionDirective]", inputs: ["mentionConfig", "mentionListTemplate"], outputs: ["outSearchTerm", "outItemSelected", "outToggle", "outInsertMention", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "moFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsQuillComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill", inputs: { isShowToolBar: { classPropertyName: "isShowToolBar", publicName: "isShowToolBar", isSignal: true, isRequired: false, transformFunction: null }, isToolbarPositionFixed: { classPropertyName: "isToolbarPositionFixed", publicName: "isToolbarPositionFixed", isSignal: true, isRequired: false, transformFunction: null }, classIncludeToolbar: { classPropertyName: "classIncludeToolbar", publicName: "classIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, stylesIncludeToolbar: { classPropertyName: "stylesIncludeToolbar", publicName: "stylesIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, toolbarConfig: { classPropertyName: "toolbarConfig", publicName: "toolbarConfig", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, fieldNameBind: { classPropertyName: "fieldNameBind", publicName: "fieldNameBind", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null }, onlyShowErrorBorderInContent: { classPropertyName: "onlyShowErrorBorderInContent", publicName: "onlyShowErrorBorderInContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTemplate: { classPropertyName: "classIncludeTemplate", publicName: "classIncludeTemplate", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, dataConfigMention: { classPropertyName: "dataConfigMention", publicName: "dataConfigMention", isSignal: true, isRequired: false, transformFunction: null }, blotsRegister: { classPropertyName: "blotsRegister", publicName: "blotsRegister", isSignal: true, isRequired: false, transformFunction: null }, heightAuto: { classPropertyName: "heightAuto", publicName: "heightAuto", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, blockUndoRedoKeyboard: { classPropertyName: "blockUndoRedoKeyboard", publicName: "blockUndoRedoKeyboard", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outFunctionsControl: "outFunctionsControl", outSelectionChange: "outSelectionChange", outTextChange: "outTextChange", outContextMenu: "outContextMenu" }, viewQueries: [{ propertyName: "wrapperEditorEl", first: true, predicate: ["wrapperEditor"], descendants: true, isSignal: true }, { propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "quillOptionEl", first: true, predicate: ["quillOption"], descendants: true, isSignal: true }, { propertyName: "quillEditorEl", first: true, predicate: ["quillEditor"], descendants: true, isSignal: true }, { propertyName: "toolbarItemsEl", first: true, predicate: ["toolbarItems"], descendants: true, isSignal: true }, { propertyName: "itemsEl", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositionFixed]=\"isToolbarPositionFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div #quillOption\n        [class.!hidden]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation':'' }} {{ classIncludeToolbar() }}\"\n        [class.bg-[#f8f9fa]]=\"!readonly() && !loadingUploadImage()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [timeDelayInit]=\"timeDelayInit()+50\"\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\"\n        [class.pointer-events-none]=\"loadingUploadImage()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n    @if (loadingUploadImage()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div #item\n          [id]=\"option.type+'_'+$index\"\n          class=\"items-center\"\n          [class.hidden]=\"itemHidden().includes($index) || itemHiddenExpand().includes($index)\"\n          [class.flex]=\"!itemHidden().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (itemHidden().length) {\n          <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div [class.hidden]=\"!showMoreAction() || !itemHidden().length\"\n          class=\"absolute bg-[#ffffff] shadow-md z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"!itemHidden().includes($index)\"\n              [class.flex]=\"itemHidden().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div class=\"relative w-[128px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div\n            class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex:1250}\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div\n      class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_quote', zIndex:1250}\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_image', zIndex:1250}\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji [zIndex]=\"1250\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{template: viewLink, whiteTheme: true, ignoreArrow: true}\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective>{{ link().url }}</div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631'\n          },\n          rootColor: '#071631'\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LibsUiComponentsInputsMentionDirective, selector: "[LibsUiComponentsInputsMentionDirective]", inputs: ["timeDelayInit", "mentionConfig", "mentionListTemplate"], outputs: ["outSearchTerm", "outItemSelected", "outToggle", "outInsertMention", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "moFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, decorators: [{
             type: Component,
@@ -1145,8 +1177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LibsUiComponentsLabelComponent, LibsUiComponentsDropdownComponent,
                         LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsSelectColorComponent,
                         LibsUiComponentsInputsValidComponent, LibsUiComponentsEmojiComponent,
-                        LibsUiComponentsButtonsButtonComponent
-                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositonFixed]=\"isToolbarPositonFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div #quillOption\n        [class.!hidden]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly()\"\n        class=\"{{ isToolbarPositonFixed() ? 'fixed !z-10 px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation':'' }} {{ classIncludeToolbar() }}\"\n        [class.bg-[#f8f9fa]]=\"!readonly()\"\n        [class.libs-ui-readonly-background]=\"readonly()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div #item\n          [id]=\"option.type+'_'+$index\"\n          class=\"items-center\"\n          [class.hidden]=\"itemHidden().includes($index) || itemHiddenExpand().includes($index)\"\n          [class.flex]=\"!itemHidden().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (itemHidden().length) {\n          <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div [class.hidden]=\"!showMoreAction() || !itemHidden().length\"\n          class=\"absolute bg-[#ffffff] shadow-md z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"!itemHidden().includes($index)\"\n              [class.flex]=\"itemHidden().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div class=\"relative w-[128px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div\n            class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex:1250}\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div\n      class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_quote', zIndex:1250}\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_image', zIndex:1250}\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji [zIndex]=\"1250\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{template: viewLink, whiteTheme: true, ignoreArrow: true}\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective>{{ link().url }}</div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631'\n          },\n          rootColor: '#071631'\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositonFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
+                        LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSpinnerComponent
+                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositionFixed]=\"isToolbarPositionFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div #quillOption\n        [class.!hidden]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation':'' }} {{ classIncludeToolbar() }}\"\n        [class.bg-[#f8f9fa]]=\"!readonly() && !loadingUploadImage()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [timeDelayInit]=\"timeDelayInit()+50\"\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\"\n        [class.pointer-events-none]=\"loadingUploadImage()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n    @if (loadingUploadImage()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div #item\n          [id]=\"option.type+'_'+$index\"\n          class=\"items-center\"\n          [class.hidden]=\"itemHidden().includes($index) || itemHiddenExpand().includes($index)\"\n          [class.flex]=\"!itemHidden().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (itemHidden().length) {\n          <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div [class.hidden]=\"!showMoreAction() || !itemHidden().length\"\n          class=\"absolute bg-[#ffffff] shadow-md z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"!itemHidden().includes($index)\"\n              [class.flex]=\"itemHidden().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div class=\"relative w-[128px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div\n            class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex:1250}\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"true\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div\n      class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_quote', zIndex:1250}\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_image', zIndex:1250}\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji [zIndex]=\"1250\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{template: viewLink, whiteTheme: true, ignoreArrow: true}\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective>{{ link().url }}</div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631'\n          },\n          rootColor: '#071631'\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 /**