@libs-ui/components-inputs-quill 0.2.324-0 → 0.2.326-0

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, input, output, ChangeDetectionStrategy, Component, computed, inject, model, viewChild, ChangeDetectorRef, effect, untracked } from '@angular/core';
+import { signal, input, output, ChangeDetectionStrategy, Component, computed, inject, model, viewChild, ChangeDetectorRef, effect, untracked, DestroyRef } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
@@ -14,82 +14,15 @@ import { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton'
 import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
 import { LibsUiNotificationService } from '@libs-ui/services-notification';
-import { patternUrl, convertFileToBase64_ObjectUrl, get, set, isNil, xssFilter, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH, getLabelBySizeFile } from '@libs-ui/utils';
+import { patternUrl, convertFileToBase64_ObjectUrl, get, set, isNil, xssFilter, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH, getLabelBySizeFile, setStylesElement, UtilsKeyCodeConstant, isTruthy } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import Quill from 'quill';
 import { Subject, lastValueFrom, timer, fromEvent, takeUntil } from 'rxjs';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { returnListObject } from '@libs-ui/services-http-request';
-
-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];
-const tabMultiplier = 3;
-class IndentAttributor extends parchment.Attributor.Style {
-    constructor(formatName, styleProperty, attributorOptions) {
-        super(formatName, styleProperty, attributorOptions);
-    }
-    add(node, value) {
-        return super.add(node, `${+value * tabMultiplier}em`);
-    }
-    value(node) {
-        return parseFloat(super.value(node)) / tabMultiplier || undefined; // Don't return NaN
-    }
-}
-const indentStyle = new IndentAttributor('indent', 'margin-left', {
-    scope: parchment.Scope.BLOCK,
-    whitelist: pixelLevels.map((value) => `${value * tabMultiplier}em`),
-});
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import Quill2x, { Delta } from 'quill2x';
 
 class LibsUiComponentsInputsQuillLinkComponent {
     dataLink = signal({ title: '', link: '' });
@@ -358,6 +291,21 @@ const toolBarOptions = (mode, hasIconImage, hasIconPersonalize) => {
             mode: ['default', 'basic'],
             width: 1,
         },
+        {
+            type: 'script.sub',
+            mode: [],
+            width: 32,
+        },
+        {
+            type: 'script.super',
+            mode: [],
+            width: 32,
+        },
+        {
+            type: 'line',
+            mode: [],
+            width: 1,
+        },
         {
             type: 'adjust',
             mode: ['default'],
@@ -388,6 +336,11 @@ const toolBarOptions = (mode, hasIconImage, hasIconPersonalize) => {
             mode: ['default'],
             width: 32,
         },
+        {
+            type: 'listChecked',
+            mode: [],
+            width: 32,
+        },
         {
             type: 'line',
             mode: ['default'],
@@ -418,12 +371,18 @@ const toolBarOptions = (mode, hasIconImage, hasIconPersonalize) => {
             mode: ['default'],
             width: 32,
         },
+        {
+            type: 'video',
+            mode: [],
+            width: 32,
+        },
         {
             type: 'emoji',
             classInclude: 'ml-[8px]',
             mode: ['default'],
             width: 24,
         },
+        { type: 'table', width: 32, mode: [] },
     ].filter((item) => {
         if (!item.mode?.includes(mode)) {
             return false;
@@ -465,7 +424,7 @@ const iconList = () => {
         },
         {
             key: 'redo',
-            icon: 'libs-ui-icon-undo scale-x-[-1]',
+            icon: 'libs-ui-icon-redo',
         },
         {
             key: 'strike',
@@ -523,6 +482,18 @@ const iconList = () => {
             key: 'emoji',
             icon: 'libs-ui-icon-face-smile',
         },
+        {
+            key: 'table',
+            icon: 'libs-ui-icon-table',
+        },
+        {
+            key: 'check',
+            icon: 'libs-ui-icon-task-list',
+        },
+        {
+            key: 'video',
+            icon: 'libs-ui-icon-video-outline',
+        },
     ];
 };
 const uploadImageConfigDefault = () => {
@@ -551,6 +522,142 @@ const linkDefault = () => {
         },
     };
 };
+const fontSizeWhiteList = () => [
+    '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',
+];
+
+const Block = Quill.import('blots/block');
+class QuillDivBlot extends Block {
+    static tagName = 'div';
+}
+
+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 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 parchment = Quill.import('parchment');
+const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8];
+const tabMultiplier = 3;
+class IndentAttributor extends parchment.Attributor.Style {
+    constructor(formatName, styleProperty, attributorOptions) {
+        super(formatName, styleProperty, attributorOptions);
+    }
+    add(node, value) {
+        return super.add(node, `${+value * tabMultiplier}em`);
+    }
+    value(node) {
+        return parseFloat(super.value(node)) / tabMultiplier || undefined; // Don't return NaN
+    }
+}
+const CustomIndentStyleBlot = new IndentAttributor('indent', 'margin-left', {
+    scope: parchment.Scope.BLOCK,
+    whitelist: pixelLevels.map((value) => `${value * tabMultiplier}em`),
+});
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsInputsQuillComponent {
@@ -709,73 +816,7 @@ class LibsUiComponentsInputsQuillComponent {
         const icons = Quill.import('ui/icons');
         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',
-        ];
+        size.whitelist = fontSizeWhiteList();
         italic.tagName = 'i';
         bold.tagName = 'b';
         Quill.register(bold, true);
@@ -788,7 +829,7 @@ class LibsUiComponentsInputsQuillComponent {
         this.blotsRegister()?.forEach((item) => {
             Quill.register(item.component, true);
         });
-        Quill.register({ 'formats/indent': indentStyle }, true);
+        Quill.register({ 'formats/indent': CustomIndentStyleBlot }, true);
         fromEvent(this.quillEditorEl()?.nativeElement, 'contextmenu')
             .pipe(takeUntil(this.onDestroy))
             .subscribe((e) => this.outContextMenu.emit(e));
@@ -1381,7 +1422,7 @@ class LibsUiComponentsInputsQuillComponent {
         clearTimeout(this.timeoutScrollToSelectionWithElementScrollHeightAuto());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, autoUpdateValueWhenTextChange: { classPropertyName: "autoUpdateValueWhenTextChange", publicName: "autoUpdateValueWhenTextChange", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, focusBottom: { classPropertyName: "focusBottom", publicName: "focusBottom", 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 }, heightAuto: { classPropertyName: "heightAuto", publicName: "heightAuto", isSignal: true, isRequired: false, transformFunction: null }, elementScrollHeightAuto: { classPropertyName: "elementScrollHeightAuto", publicName: "elementScrollHeightAuto", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopupEditLink: { classPropertyName: "ignoreShowPopupEditLink", publicName: "ignoreShowPopupEditLink", isSignal: true, isRequired: false, transformFunction: null }, ignoreCommunicateMicroEventPopup: { classPropertyName: "ignoreCommunicateMicroEventPopup", publicName: "ignoreCommunicateMicroEventPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outShowPopupEditLink: "outShowPopupEditLink", 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 }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #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\n      #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div\n        #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation' : '' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\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\n        #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      <ng-container\n        #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\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\n    class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\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<ng-template\n  #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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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\n        [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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\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\n        [zIndex]=\"zIndex()\"\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\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\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\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [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\n        [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] .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:0}: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: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { 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", "fieldLabel", "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", "initEventInElementRefCustom", "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", "outColorChangeMultipleType"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "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", "debounceTimeValidate"], 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", "outFunctionsControl"] }, { 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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 }, autoUpdateValueWhenTextChange: { classPropertyName: "autoUpdateValueWhenTextChange", publicName: "autoUpdateValueWhenTextChange", 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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, focusBottom: { classPropertyName: "focusBottom", publicName: "focusBottom", 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 }, heightAuto: { classPropertyName: "heightAuto", publicName: "heightAuto", isSignal: true, isRequired: false, transformFunction: null }, elementScrollHeightAuto: { classPropertyName: "elementScrollHeightAuto", publicName: "elementScrollHeightAuto", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopupEditLink: { classPropertyName: "ignoreShowPopupEditLink", publicName: "ignoreShowPopupEditLink", isSignal: true, isRequired: false, transformFunction: null }, ignoreCommunicateMicroEventPopup: { classPropertyName: "ignoreCommunicateMicroEventPopup", publicName: "ignoreCommunicateMicroEventPopup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outShowPopupEditLink: "outShowPopupEditLink", 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 }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #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\n      #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div\n        #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation' : '' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\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\n        #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      <ng-container\n        #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\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\n    class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\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<ng-template\n  #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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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\n        [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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\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\n        [zIndex]=\"zIndex()\"\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\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\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\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [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\n        [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] .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:0}: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-active span:before{color:var(--libs-ui-color-light-1)!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: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { 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", "fieldLabel", "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", "initEventInElementRefCustom", "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", "outColorChangeMultipleType"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "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", "debounceTimeValidate"], 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", "outFunctionsControl"] }, { 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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, decorators: [{
             type: Component,
@@ -1399,12 +1440,850 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsButtonsButtonComponent,
                         LibsUiComponentsSpinnerComponent,
                         LibsUiComponentsSkeletonComponent,
-                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #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\n      #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div\n        #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation' : '' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\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\n        #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      <ng-container\n        #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\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\n    class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\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<ng-template\n  #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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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\n        [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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\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\n        [zIndex]=\"zIndex()\"\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\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\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\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [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\n        [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] .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:0}: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"] }]
+                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #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\n      #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div\n        #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation' : '' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\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\n        #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      <ng-container\n        #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\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\n    class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\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<ng-template\n  #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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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\n        [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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\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\n        [zIndex]=\"zIndex()\"\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\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\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\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [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\n        [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] .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:0}: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-active span:before{color:var(--libs-ui-color-light-1)!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: () => [] });
 
+//region Function Table
+const createTableSelector = (quill, anchorEl, translate) => {
+    // Đóng popup cũ nếu còn tồn tại
+    document.querySelectorAll('.manual-table-creator').forEach((el) => el.parentElement?.removeChild(el));
+    const popup = document.createElement('div');
+    popup.className = 'manual-table-creator';
+    // Inline style để đảm bảo hiển thị ngay cả khi CSS component không áp dụng
+    popup.style.position = 'absolute';
+    popup.style.background = '#fff';
+    popup.style.border = '1px solid #ddd';
+    popup.style.borderRadius = '6px';
+    popup.style.boxShadow = '0 6px 16px rgba(0,0,0,0.12)';
+    popup.style.padding = '12px';
+    popup.style.zIndex = '10000';
+    popup.style.minWidth = '200px';
+    setStylesElement(popup, {
+        position: 'absolute',
+        background: '#fff',
+        border: '1px solid #ddd',
+        borderRadius: '6px',
+        boxShadow: '0 6px 16px rgba(0,0,0,0.12)',
+        padding: '12px',
+        zIndex: '10000',
+        minWidth: '200px',
+    });
+    const info = document.createElement('div');
+    info.textContent = translate.instant('i18n_select_cell');
+    setStylesElement(info, {
+        fontSize: '12px',
+        color: '#333',
+        marginBottom: '10px',
+        textAlign: 'center',
+        fontWeight: '600',
+    });
+    popup.appendChild(info);
+    const grid = document.createElement('div');
+    setStylesElement(grid, {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(8, 18px)',
+        gap: '4px',
+    });
+    const max = 8;
+    for (let r = 1; r <= max; r++) {
+        for (let c = 1; c <= max; c++) {
+            const cell = document.createElement('div');
+            cell.style.width = '18px';
+            cell.style.height = '18px';
+            cell.style.border = '1px solid #e5e7eb';
+            cell.style.background = '#fff';
+            cell.style.cursor = 'pointer';
+            cell.addEventListener('mouseenter', () => {
+                info.textContent = `${r} × ${c}`;
+                Array.from(grid.children).forEach((el, idx) => {
+                    const rr = Math.floor(idx / max) + 1;
+                    const cc = (idx % max) + 1;
+                    el.style.background = rr <= r && cc <= c ? '#dbeafe' : '#fff';
+                    el.style.borderColor = rr <= r && cc <= c ? '#93c5fd' : '#e5e7eb';
+                });
+            });
+            cell.addEventListener('click', () => {
+                try {
+                    quill.focus();
+                    const tableModule = quill.getModule('table');
+                    if (tableModule && typeof tableModule.insertTable === 'function') {
+                        tableModule.insertTable(r, c);
+                    }
+                }
+                finally {
+                    if (document.body.contains(popup)) {
+                        document.body.removeChild(popup);
+                    }
+                    document.removeEventListener('click', onOutsideClick, true);
+                }
+            });
+            grid.appendChild(cell);
+        }
+    }
+    popup.appendChild(grid);
+    const placePopup = () => {
+        const rect = anchorEl?.getBoundingClientRect();
+        const top = rect ? rect.bottom + window.scrollY + 6 : 100;
+        const left = rect ? rect.left + window.scrollX : 100;
+        popup.style.top = `${top}px`;
+        popup.style.left = `${left}px`;
+    };
+    const onOutsideClick = (ev) => {
+        if (!popup.contains(ev.target)) {
+            if (document.body.contains(popup)) {
+                document.body.removeChild(popup);
+            }
+            document.removeEventListener('click', onOutsideClick, true);
+        }
+    };
+    document.body.appendChild(popup);
+    placePopup();
+    setTimeout(() => document.addEventListener('click', onOutsideClick, true));
+};
+const createContextMenuOptionTable = (quill, translate) => {
+    let lastContextIndex = null;
+    const closeAnyMenu = () => {
+        document.querySelectorAll('.manual-table-menu').forEach((el) => el.parentElement?.removeChild(el));
+    };
+    const runWithSelection = (fn) => {
+        try {
+            quill.focus();
+            if (typeof lastContextIndex === 'number') {
+                quill.setSelection(lastContextIndex, 0, 'silent');
+            }
+        }
+        catch {
+            /* no-op: giữ yên nếu không thể set selection */
+        }
+        fn();
+    };
+    const createMenuItem = (label, onClick) => {
+        const item = document.createElement('div');
+        item.textContent = label;
+        item.style.padding = '6px 12px';
+        item.style.cursor = 'pointer';
+        item.addEventListener('click', () => {
+            runWithSelection(onClick);
+            closeAnyMenu();
+        });
+        item.addEventListener('mouseenter', () => {
+            item.style.background = '#f5f5f5';
+        });
+        item.addEventListener('mouseleave', () => {
+            item.style.background = 'transparent';
+        });
+        return item;
+    };
+    const openContextMenu = (pageX, pageY) => {
+        closeAnyMenu();
+        const menu = document.createElement('div');
+        menu.className = 'manual-table-menu';
+        menu.style.position = 'absolute';
+        menu.style.top = `${pageY}px`;
+        menu.style.left = `${pageX}px`;
+        menu.style.background = '#fff';
+        menu.style.border = '1px solid #ccc';
+        menu.style.borderRadius = '4px';
+        menu.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
+        menu.style.zIndex = '10001';
+        menu.style.padding = '4px';
+        menu.style.minWidth = '180px';
+        const tableModule = quill.getModule('table');
+        const safeCall = (method, ...args) => {
+            if (tableModule && typeof tableModule[method] === 'function') {
+                tableModule[method](...args);
+            }
+        };
+        menu.appendChild(createMenuItem(translate.instant('i18n_add_new_row_above'), () => safeCall('insertRowAbove')));
+        menu.appendChild(createMenuItem(translate.instant('i18n_add_new_row_below'), () => safeCall('insertRowBelow')));
+        menu.appendChild(createMenuItem(translate.instant('i18n_add_new_column_left'), () => safeCall('insertColumnLeft')));
+        menu.appendChild(createMenuItem(translate.instant('i18n_add_new_column_right'), () => safeCall('insertColumnRight')));
+        const divider = document.createElement('div');
+        divider.style.height = '1px';
+        divider.style.background = '#eee';
+        divider.style.margin = '4px 0';
+        menu.appendChild(divider);
+        menu.appendChild(createMenuItem(translate.instant('i18n_delete_row'), () => safeCall('deleteRow')));
+        menu.appendChild(createMenuItem(translate.instant('i18n_delete_column'), () => safeCall('deleteColumn')));
+        menu.appendChild(createMenuItem(translate.instant('i18n_delete_table'), () => safeCall('deleteTable')));
+        document.body.appendChild(menu);
+        const onOutside = (ev) => {
+            if (!menu.contains(ev.target)) {
+                closeAnyMenu();
+                document.removeEventListener('click', onOutside, true);
+            }
+        };
+        setTimeout(() => document.addEventListener('click', onOutside, true));
+        const onScroll = () => {
+            closeAnyMenu();
+            window.removeEventListener('scroll', onScroll, true);
+            window.removeEventListener('resize', onScroll, true);
+        };
+        window.addEventListener('scroll', onScroll, true);
+        window.addEventListener('resize', onScroll, true);
+    };
+    fromEvent(quill.root, 'contextmenu').subscribe((ev) => {
+        const target = ev.target;
+        const isCell = !!target.closest('td,th,table,.ql-table');
+        if (!isCell)
+            return;
+        ev.preventDefault();
+        try {
+            // Ưu tiên lấy index từ blot tương ứng node
+            const QuillAny = Quill2x;
+            const blot = QuillAny?.find?.(target);
+            if (blot && typeof blot.offset === 'function') {
+                lastContextIndex = blot.offset(quill.scroll);
+            }
+            else {
+                // Fallback: đặt selection hiện tại nếu không xác định được
+                const sel = quill.getSelection(true);
+                lastContextIndex = sel ? sel.index : 0;
+            }
+        }
+        catch {
+            const sel = quill.getSelection(true);
+            lastContextIndex = sel ? sel.index : 0;
+        }
+        quill.focus();
+        openContextMenu(ev.pageX, ev.pageY);
+    });
+};
+let register = false;
+const registerQuill2x = () => {
+    if (register)
+        return;
+    register = true;
+    const Quill = Quill2x;
+    const size = Quill.import('attributors/style/size');
+    const alignStyle = Quill.import('attributors/style/align');
+    const italic = Quill.import('formats/italic');
+    const bold = Quill.import('formats/bold');
+    const icons = Quill.import('ui/icons');
+    size.whitelist = fontSizeWhiteList();
+    italic.tagName = 'i';
+    bold.tagName = 'b';
+    Quill.register(bold, true);
+    Quill.register(italic, true);
+    Quill.register(size, true);
+    Quill.register(alignStyle, true);
+    Quill.register(QuillMentionBlot, true);
+    [...iconList()].forEach((element) => set(icons, element.key, `<span class="${element.icon} ${element.key === 'unLink' ? 'hover:text-[#ee2d41] ' : 'hover:text-[var(--libs-ui-color-light-1)]'} text-[16px] text-[#6a7383]"></span>`));
+};
+
+class LibsUiComponentsInputsQuill2xComponent {
+    //region Private
+    quill;
+    addEditLinkComponentRef = signal(undefined);
+    uploadImageComponentRef = signal(undefined);
+    handlers = signal({
+        link: this.handleShowUploadLink.bind(this),
+        undo: this.handleUndo.bind(this),
+        redo: this.handleRedo.bind(this),
+        table: this.handleTable.bind(this),
+        image: this.handlerShowUploadImage.bind(this),
+    });
+    timerSetFontSize = signal(undefined);
+    //endregion
+    //region Protected
+    containerToolbarClass = computed(() => this.quillCustomConfig()?.toolbar?.classCustomContainerToolbar || 'border-t border-l border-r border-[#e5e7eb] rounded-t-[4px]');
+    containerEditorClass = computed(() => this.quillCustomConfig()?.editor?.classCustomContainerEditor || '!border !border-[#e5e7eb] !rounded-b-[4px]' + (this.quillCustomConfig()?.toolbar?.hidden ? ' rounded-t-[4px]' : ''));
+    showButtonMoreToolbar = computed(() => this.toolbarOptionsConfig().some((item) => item.display === false));
+    displaySkeletonToolbar = computed(() => this.toolbarOptionsConfig().every((item) => item.display === undefined));
+    labelFontSelectedComputed = computed(() => get(this.fontSelected(), 'item.label') || 'Sans Serif');
+    fontSelected = signal(undefined);
+    listConfigFont = signal(listConfigFont());
+    listConfigHeader = signal(listConfigHeader());
+    headerSelected = signal(undefined);
+    labelHeaderSelectedComputed = computed(() => get(this.headerSelected(), 'item.label') || 'Normal');
+    listConfigAlign = signal(listConfigAlign());
+    alignSelected = signal(undefined);
+    iconAlignSelectedComputed = computed(() => get(this.alignSelected(), 'item.icon'));
+    colorSelected = signal(false);
+    backgroundSelected = signal(false);
+    size = signal({ value: 14 });
+    link = signal(linkDefault());
+    showMoreAction = signal(false);
+    toolbarOptionsConfig = signal([]);
+    loadingUploadImage = signal(false);
+    uploadImageConfig = input(uploadImageConfigDefault(), { transform: (value) => value || uploadImageConfigDefault() });
+    //region Inputs
+    placeholder = input('i18n_import_content', { transform: (value) => value || 'i18n_import_content' });
+    blotsRegister = input();
+    readonly = input(false, { transform: (value) => value ?? false });
+    quillCustomConfig = input();
+    label = input();
+    item = model.required();
+    fieldBind = input.required();
+    autoUpdateValueWhenTextChange = input(true, { transform: (value) => value ?? true });
+    templateToolBarPersonalize = input();
+    zIndex = input(1250, { transform: (value) => value ?? 1250 });
+    ignoreShowPopupEditLink = input();
+    ignoreCommunicateMicroEventPopup = input();
+    handlersExpand = input();
+    //endregion
+    //region Outputs
+    outShowPopupEditLink = output();
+    outMessageError = output();
+    outBlur = output();
+    outFocus = output();
+    outChange = output();
+    outSelectionChange = output();
+    outTextChange = output();
+    outContextMenu = output();
+    outFunctionsControl = output();
+    //endregion
+    //region ViewChild
+    htmlContainer = viewChild.required('htmlContainer');
+    quillBodyContainer = viewChild.required('snowContainer');
+    toolbarContainer = viewChild.required('toolbarContainer');
+    inputSizeRef = viewChild.required('inputSizeRef');
+    inputLinkRef = viewChild.required('inputLinkRef');
+    //endregion
+    //region Inject
+    destroyRef = inject(DestroyRef);
+    notificationService = inject(LibsUiNotificationService);
+    translate = inject(TranslateService);
+    cdr = inject(ChangeDetectorRef);
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
+    //endregion
+    ngOnInit() {
+        const type = this.quillCustomConfig()?.toolbar?.type || 'default';
+        const hasIconImage = this.uploadImageConfig().showIcon ?? false;
+        const hasIconPersonalize = !!this.templateToolBarPersonalize();
+        this.toolbarOptionsConfig.set(this.quillCustomConfig()?.toolbar?.options || [...toolBarOptions(type, hasIconImage, hasIconPersonalize)]);
+        this.calculatorToolbar();
+        registerQuill2x();
+        this.blotsRegister()?.forEach((item) => {
+            Quill2x.register(item.component, true);
+        });
+        this.updateHandlerFunction();
+        const options = {
+            theme: 'snow',
+            placeholder: this.translate.instant(this.placeholder()),
+            readOnly: this.readonly(),
+            modules: {
+                toolbar: {
+                    container: this.toolbarContainer().nativeElement,
+                    handlers: this.handlers(),
+                },
+                table: true,
+                clipboard: {
+                    matchers: [[Node.TEXT_NODE, (node) => new Delta().insert(node.data)]],
+                },
+                keyboard: {
+                    bindings: {
+                        backspace: {
+                            key: UtilsKeyCodeConstant.BACKSPACE,
+                            handler: (range) => this.noPreventEmbedDeletion(range),
+                        },
+                        delete: {
+                            key: UtilsKeyCodeConstant.DELETE,
+                            handler: (range) => this.noPreventEmbedDeletion(range),
+                        },
+                    },
+                },
+                history: {
+                    delay: 2000,
+                    maxStack: 500,
+                    userOnly: true,
+                },
+            },
+        };
+        this.quill = new Quill2x(this.quillBodyContainer().nativeElement, options);
+        fromEvent(this.quillBodyContainer()?.nativeElement, 'contextmenu')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((e) => this.outContextMenu.emit(e));
+        fromEvent(window, 'resize').pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.calculatorToolbar.bind(this));
+        this.setContent(this.item()[this.fieldBind()]);
+        this.outFunctionsControl.emit(this.FunctionsControl);
+        createContextMenuOptionTable(this.quill, this.translate);
+        this.setStyleForContent();
+        this.handlerTextChange();
+        this.handlerSelectionChange();
+        this.handlerPaste();
+    }
+    get FunctionsControl() {
+        return {
+            quill: () => this.quill,
+        };
+    }
+    //region handler Event HTML
+    handlerChangeShowMoreAction(event) {
+        event.stopPropagation();
+        this.showMoreAction.update((showMoreAction) => !showMoreAction);
+    }
+    handleSelectFont(event) {
+        this.fontSelected.set(event);
+        this.quill?.format('font', event?.key);
+    }
+    handleSelectHeader(event) {
+        this.headerSelected.set(event);
+        this.quill?.format('header', event?.key);
+    }
+    handlerValueChangeFontSize(value) {
+        clearTimeout(this.timerSetFontSize());
+        this.timerSetFontSize.set(setTimeout(() => {
+            this.size.update((item) => ({ ...item, value: value }));
+            this.quill?.format('size', `${this.size().value}px`);
+            this.quill?.blur();
+            this.inputSizeRef()?.FunctionsControl?.focus?.();
+        }, 400));
+    }
+    handleSelectAlign(event) {
+        this.alignSelected.set(event);
+        this.quill?.format('align', event?.key);
+    }
+    handlerSetFormat(type, data) {
+        this.quill?.format(type, data);
+    }
+    handlerInsertEmoji(emoji) {
+        this.insertText(emoji, undefined, true);
+    }
+    //endregion
+    //region Private Method
+    //region Quill Methods
+    handleTable() {
+        const button = this.htmlContainer().nativeElement.querySelector?.('button.ql-table');
+        createTableSelector(this.quill, button, this.translate);
+    }
+    handleUndo() {
+        this.quill?.history?.undo();
+    }
+    handleRedo() {
+        this.quill?.history?.redo();
+    }
+    handlerShowUploadImage() {
+        if (this.uploadImageConfig().modeCustom) {
+            this.uploadImageComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsQuillUploadImageComponent));
+            const instance = this.uploadImageComponentRef()?.instance;
+            this.uploadImageComponentRef()?.setInput('uploadImageConfig', this.uploadImageConfig());
+            this.uploadImageComponentRef()?.setInput('ignoreCommunicateMicroEvent', this.ignoreCommunicateMicroEventPopup());
+            instance?.outClose.subscribe((link) => {
+                this.dynamicComponentService.remove(this.uploadImageComponentRef());
+                if (link) {
+                    this.insertImage(link);
+                }
+            });
+            this.dynamicComponentService.addToBody(this.uploadImageComponentRef());
+            return;
+        }
+        const input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.click();
+        input.onchange = async () => {
+            await this.uploadImagesAndInsert(input?.files);
+        };
+    }
+    async insertText(content, index, focusLast) {
+        index = index ?? this.quill?.getSelection(true).index;
+        if (!isNil(index)) {
+            this.quill?.insertText(index, content, Quill2x.sources.USER);
+            if (focusLast) {
+                await lastValueFrom(timer(0));
+                this.quill?.setSelection(index + content.length, 0, Quill2x.sources.USER);
+            }
+        }
+    }
+    handlerSelectionChange() {
+        this.quill?.on('selection-change', (range, oldRange, source) => {
+            if (this.readonly()) {
+                return;
+            }
+            if (range === null && oldRange !== null) {
+                this.outBlur.emit();
+                return;
+            }
+            if (range !== null && oldRange === null) {
+                this.outFocus.emit();
+                return;
+            }
+            const format = this.quill?.getFormat();
+            if (format) {
+                this.setFontSizeSelected(format);
+                this.setFontSelected(format);
+                this.setColorSelected(format);
+            }
+            this.outSelectionChange.emit({
+                quill: this.quill,
+                range,
+                oldRange,
+                source,
+            });
+            if (range.length !== 0 || !format?.link || source !== 'user') {
+                return;
+            }
+            const selection = document.getSelection();
+            const anchorNode = selection?.anchorNode;
+            let linkNode = anchorNode;
+            while (linkNode && linkNode.tagName !== 'A') {
+                linkNode = linkNode.parentNode;
+            }
+            if (!linkNode || linkNode.tagName !== 'A') {
+                return;
+            }
+            const linkText = linkNode.innerText;
+            const linksIndices = [];
+            let indexReturn = -1;
+            while (!isNil(indexReturn) && indexReturn < range.index) {
+                const textContent = this.quill?.getText();
+                const linkIndex = textContent?.indexOf(linkText, linksIndices.length > 0 ? linksIndices[linksIndices.length - 1] + linkText.length : 0);
+                if (!isNil(linkIndex)) {
+                    if (linkIndex !== -1) {
+                        linksIndices.push(linkIndex);
+                        indexReturn = linkIndex + linkText.length;
+                    }
+                    if (linkIndex === -1) {
+                        indexReturn = undefined;
+                    }
+                }
+            }
+            if (linksIndices && linksIndices.length) {
+                const rangeIndex = linksIndices[linksIndices.length - 1];
+                const countImage = this.adjustIndexForImages(rangeIndex);
+                setTimeout(() => {
+                    this.link.set({
+                        title: linkText,
+                        url: linkNode.href,
+                        range: {
+                            index: rangeIndex + countImage,
+                            length: linkText.length,
+                        },
+                    });
+                    this.inputLinkRef().FunctionsControl?.showPopover(linkNode);
+                });
+            }
+        });
+    }
+    handlerPaste() {
+        set(this.quill, 'root.onpaste', async (event) => {
+            if (!event || !event.clipboardData) {
+                return;
+            }
+            const files = event.clipboardData.files;
+            if (!files.length) {
+                if (event.clipboardData.getData('text')) {
+                    this.scrollToSelectionWithElementScrollHeightAuto();
+                }
+                return;
+            }
+            event.preventDefault();
+            await this.uploadImagesAndInsert(files);
+        });
+    }
+    handlerTextChange() {
+        this.quill?.on('text-change', (event) => {
+            this.outTextChange.emit({
+                quill: this.quill,
+                delta: event,
+            });
+            setTimeout(() => {
+                if (event?.ops[1]?.insert === '\n') {
+                    const range = { index: event?.ops[0].retain };
+                    const currentLeaf = this.quill?.getLeaf(range.index)[0];
+                    const nextLeaf = this.quill?.getLeaf(range.index + 1)[0];
+                    this.quill?.insertEmbed(range.index, 'break', true, 'user');
+                    if (nextLeaf === null || currentLeaf.parent !== nextLeaf.parent) {
+                        this.quill?.insertEmbed(range.index, 'break', true, 'user');
+                    }
+                    this.quill?.setSelection((range.index || 0) + 1, 0, Quill2x.sources.SILENT);
+                }
+            });
+            if (!this.autoUpdateValueWhenTextChange()) {
+                return;
+            }
+            // this.updateValueByRootQuillHtml();
+        });
+    }
+    //endregion
+    updateHandlerFunction() {
+        const handlersExpand = this.handlersExpand();
+        if (handlersExpand && handlersExpand.length) {
+            handlersExpand.forEach((element) => {
+                if (element.title && element.action) {
+                    this.handlers.update((item) => ({ ...item, [element.title]: element.action }));
+                }
+            });
+        }
+    }
+    noPreventEmbedDeletion(range) {
+        if (!this.quill)
+            return false;
+        const delta = this.quill?.getContents(range.index, 1);
+        if (delta?.ops.some((option) => this.blotsRegister()?.find((item) => get(option.insert, item.component['blotName']) && item.ignoreDelete))) {
+            return false; // Ngăn không cho Quill xử lý xóa
+        }
+        return true;
+    }
+    setFontSizeSelected(format) {
+        const fontSize = format?.size?.toString()?.replace('px', '');
+        if (isNaN(parseFloat(fontSize))) {
+            this.size.set({ value: 14 });
+            return;
+        }
+        this.size.set({ value: parseFloat(fontSize) });
+    }
+    setFontSelected(format) {
+        const font = listFont().find((item) => item.key === format.font);
+        if (!font) {
+            this.fontSelected.set({ key: '', item: listFont().find((item) => item.key === '') });
+            return;
+        }
+        this.fontSelected.set({ key: format.font, item: font });
+    }
+    setColorSelected(format) {
+        this.colorSelected.set(isTruthy(format?.color));
+        this.backgroundSelected.set(isTruthy(format?.background));
+    }
+    async calculatorToolbar() {
+        this.cdr.detectChanges();
+        const toolbarWidth = this.toolbarContainer().nativeElement.offsetWidth || 0;
+        let totalWidth = 84;
+        this.toolbarOptionsConfig.update((configs) => {
+            configs.forEach((item, index) => {
+                item.display = true;
+                totalWidth += item.width;
+                if (item.type === 'line') {
+                    const nextItemWidth = totalWidth + this.toolbarOptionsConfig()[+index + 1].width;
+                    const preItem = this.toolbarOptionsConfig()[+index - 1];
+                    if (nextItemWidth > toolbarWidth && preItem.display === true) {
+                        item.display = undefined;
+                        return;
+                    }
+                }
+                if (totalWidth > toolbarWidth) {
+                    item.display = false;
+                    return;
+                }
+            });
+            return [...configs];
+        });
+        this.cdr.detectChanges();
+    }
+    setStyleForContent() {
+        const styleArray = [
+            { selector: '.ql-font-Arial', style: 'font-family: Arial' },
+            { selector: '.ql-font-sans-serif', style: 'font-family: sans-serif' },
+            { selector: '.ql-font-serif', style: 'font-family: serif' },
+            { selector: '.ql-font-monospace', style: 'font-family: monospace' },
+            { selector: '.ql-font-Helvetica', style: 'font-family: Helvetica' },
+            { selector: '.libs-ui-quill-format-image', style: 'max-width: 100%; height: auto', overrideStyle: true },
+            { selector: '.libs-ui-quill-mention', style: 'font-weight: 600;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; color: #7239EA', overrideStyle: true },
+            { selector: 'blockquote', style: 'border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px', overrideStyle: true },
+        ];
+        this.blotsRegister()?.forEach((item) => {
+            styleArray.push({ selector: `.${item.className}`, style: item.style, overrideStyle: true });
+        });
+        styleArray.forEach((item) => {
+            const elements = this.quill?.root.querySelectorAll(item.selector);
+            elements?.forEach((element) => {
+                if (item.overrideStyle) {
+                    element.setAttribute('style', item.style);
+                    return;
+                }
+                // Fixbug issue: https://admin-cv.mobio.vn/issues/49092
+                let styleExist = element.getAttribute('style');
+                if (styleExist) {
+                    ['font-family: Arial', 'font-family: sans-serif', 'font-family: serif', 'font-family: monospace', 'font-family: Helvetica'].forEach((font) => {
+                        styleExist = (styleExist?.includes(`${font};`) ? styleExist?.replace(`${font};`, '') : styleExist?.replace(font, ''));
+                    });
+                }
+                element.setAttribute('style', styleExist ? `${styleExist}${styleExist[styleExist.length - 1] === ';' ? '' : ';'}${item.style};` : item.style);
+            });
+        });
+    }
+    async setContent(content) {
+        if (!this.quill) {
+            return;
+        }
+        const contentXssFilter = await xssFilter(this.removeUnwantedPart(content || ''));
+        this.quill.clipboard.dangerouslyPasteHTML(contentXssFilter);
+    }
+    adjustIndexForImages(index) {
+        const content = this.quill?.root;
+        let imageCount = 0;
+        let adjustedIndex = 0;
+        const adjustTextIndex = (node) => {
+            if (adjustedIndex > index) {
+                return;
+            }
+            if (node.nodeType === Node.TEXT_NODE) {
+                adjustedIndex += node.textContent?.length || 0;
+                return;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'IMG') {
+                if (adjustedIndex <= index) {
+                    imageCount++;
+                }
+                return;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                Array.from(node.childNodes).forEach(adjustTextIndex);
+            }
+        };
+        adjustTextIndex(content);
+        return imageCount;
+    }
+    async uploadImagesAndInsert(files) {
+        if (!files) {
+            return;
+        }
+        const maxImageSize = this.uploadImageConfig()?.maxImageSize || 5 * 1024 * 1024;
+        const images = Array.from(files).filter((file) => file && file.type.split('/')[0] === 'image' && (!this.uploadImageConfig().maxImageSize || file.size <= maxImageSize));
+        if (!images.length) {
+            this.notificationService.showCompTypeTextWarning(this.translate.instant('i18n_note_upload_image_volume', { value: getLabelBySizeFile(maxImageSize) }), { timeRemove: 8000 });
+            return;
+        }
+        try {
+            this.loadingUploadImage.set(true);
+            const indexInsert = this.quill?.getSelection(true).index;
+            const links = await this.uploadImageConfig().functionUploadImage?.(images);
+            if (!links?.length) {
+                return;
+            }
+            links.forEach((link) => {
+                if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(patternUrl()).test(link)))) {
+                    return;
+                }
+                this.insertImage(link, indexInsert);
+            });
+            this.scrollToSelectionWithElementScrollHeightAuto(indexInsert);
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            this.loadingUploadImage.set(false);
+        }
+        return;
+    }
+    scrollToSelectionWithElementScrollHeightAuto(index) {
+        // clearTimeout(this.timeoutScrollToSelectionWithElementScrollHeightAuto());
+        // if (!this.elementScrollHeightAuto()) {
+        //   return;
+        // }
+        // this.timeoutScrollToSelectionWithElementScrollHeightAuto.set(
+        //   setTimeout(() => {
+        //     index = index ?? this.quill?.getSelection(true).index;
+        //     if (!isNil(index)) {
+        //       const bounds = this.quill?.getBounds(index, 1);
+        //       this.elementScrollHeightAuto()?.scrollTo(0, (bounds?.top || 0) - 20);
+        //     }
+        //   }, 100)
+        // );
+    }
+    async insertImage(content, index) {
+        const selection = index ?? this.quill?.getSelection(true).index;
+        if (!isNil(selection)) {
+            this.quill?.insertEmbed(selection, 'image', content);
+            this.quill?.setSelection(selection + 1, 0);
+        }
+    }
+    handlerPopoverEvent(event) {
+        setTimeout(() => {
+            if (event === 'remove') {
+                this.link.set(linkDefault());
+            }
+        }, 100);
+    }
+    async insertLink(text, url, index) {
+        const selection = this.quill?.getSelection(true);
+        const indexInsert = index ?? selection?.index;
+        if (selection?.length) {
+            this.quill?.deleteText(selection.index, selection.length, Quill.sources.USER);
+        }
+        if (!isNil(indexInsert)) {
+            this.quill?.insertText(indexInsert, text, 'link', url);
+        }
+    }
+    handlerEditLink(event) {
+        event.stopPropagation();
+        const link = this.link();
+        if (this.ignoreShowPopupEditLink()) {
+            this.outShowPopupEditLink.emit({
+                dataLink: link,
+                callback: async (linkEdit) => {
+                    if (link instanceof Object && link.url) {
+                        this.quill?.deleteText(link.range.index, link.range.length, Quill.sources.USER);
+                        this.quill?.insertText(link.range.index, linkEdit.title, 'link', linkEdit.link);
+                        return;
+                    }
+                    this.insertLink(linkEdit.title, linkEdit.link);
+                },
+            });
+            return;
+        }
+        this.handleShowUploadLink(link);
+        this.inputLinkRef().FunctionsControl?.removePopoverOverlay();
+    }
+    handleShowUploadLink(event) {
+        this.addEditLinkComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsQuillLinkComponent));
+        const instance = this.addEditLinkComponentRef()?.instance;
+        const selection = this.quill?.getSelection();
+        const textSelected = selection?.length ? this.quill?.getText(selection?.index, selection?.length) : '';
+        const data = event;
+        this.addEditLinkComponentRef()?.setInput('zIndex', this.zIndex());
+        this.addEditLinkComponentRef()?.setInput('title', data?.title || textSelected);
+        this.addEditLinkComponentRef()?.setInput('link', data?.url || '');
+        this.addEditLinkComponentRef()?.setInput('ignoreCommunicateMicroEvent', this.ignoreCommunicateMicroEventPopup());
+        instance?.outSaveLink.subscribe((item) => {
+            if (data instanceof Object && data.url) {
+                this.quill?.deleteText(data.range.index, data.range.length, Quill.sources.USER);
+                this.quill?.insertText(data.range.index, item.title, 'link', item.link);
+                return;
+            }
+            this.insertLink(item.title, item.link);
+        });
+        instance?.outClose.subscribe(() => this.dynamicComponentService.remove(this.addEditLinkComponentRef()));
+        this.dynamicComponentService.addToBody(this.addEditLinkComponentRef());
+    }
+    handlerUnlink(event) {
+        event.stopPropagation();
+        const link = this.link();
+        console.log('handlerUnlink', link);
+        this.quill?.formatText(link.range.index, link.range.length, { link: false });
+        this.inputLinkRef().FunctionsControl?.removePopoverOverlay();
+    }
+    handlerUnInsertLink() {
+        console.log('handlerUnInsertLink');
+        const selection = this.quill?.getSelection(true);
+        if (!isNil(selection)) {
+            this.quill?.formatText(selection, 'link', false);
+        }
+    }
+    removeUnwantedPart(html) {
+        if (!html) {
+            return '';
+        }
+        return html
+            .replace(/^\s*<p><br><\/p>/, '')
+            .replace(/<div><br><\/div>/gi, '')
+            .replace(/[\u200B-\u200D\uFEFF]/g, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x", inputs: { uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, blotsRegister: { classPropertyName: "blotsRegister", publicName: "blotsRegister", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, quillCustomConfig: { classPropertyName: "quillCustomConfig", publicName: "quillCustomConfig", 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: true, transformFunction: null }, fieldBind: { classPropertyName: "fieldBind", publicName: "fieldBind", isSignal: true, isRequired: true, transformFunction: null }, autoUpdateValueWhenTextChange: { classPropertyName: "autoUpdateValueWhenTextChange", publicName: "autoUpdateValueWhenTextChange", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopupEditLink: { classPropertyName: "ignoreShowPopupEditLink", publicName: "ignoreShowPopupEditLink", isSignal: true, isRequired: false, transformFunction: null }, ignoreCommunicateMicroEventPopup: { classPropertyName: "ignoreCommunicateMicroEventPopup", publicName: "ignoreCommunicateMicroEventPopup", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outShowPopupEditLink: "outShowPopupEditLink", outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outSelectionChange: "outSelectionChange", outTextChange: "outTextChange", outContextMenu: "outContextMenu", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "htmlContainer", first: true, predicate: ["htmlContainer"], descendants: true, isSignal: true }, { propertyName: "quillBodyContainer", first: true, predicate: ["snowContainer"], descendants: true, isSignal: true }, { propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, isSignal: true }, { propertyName: "inputSizeRef", first: true, predicate: ["inputSizeRef"], descendants: true, isSignal: true }, { propertyName: "inputLinkRef", first: true, predicate: ["inputLinkRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [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)=\"handlerValueChangeFontSize($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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('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            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('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            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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]=\"zIndex() + 1\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\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\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [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: [":host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "fieldLabel", "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: 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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "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", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange", "outColorChangeMultipleType"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-inputs-quill2x', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule,
+                        NgTemplateOutlet,
+                        LibsUiComponentsDropdownComponent,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsSkeletonComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiComponentsEmojiComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsInputsValidComponent,
+                        LibsUiComponentsButtonsSelectColorComponent,
+                        LibsUiComponentsLabelComponent,
+                    ], template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [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\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] 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\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [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 class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\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 === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\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=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [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)=\"handlerValueChangeFontSize($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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('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            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></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: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('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            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div 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: zIndex() }\">\n        <libs_ui-components-dropdown\n          [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]=\"zIndex() + 1\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></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\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\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\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [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: [":host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}\n"] }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsInputsQuillComponent };
+export { LibsUiComponentsInputsQuill2xComponent, LibsUiComponentsInputsQuillComponent };
 //# sourceMappingURL=libs-ui-components-inputs-quill.mjs.map