@libs-ui/components-inputs-quill 0.2.326-1 → 0.2.327-1

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

@@ -215,174 +215,174 @@ const toolBarOptions = (mode, hasIconImage, hasIconPersonalize) => {
         {
             type: 'undo',
             classInclude: 'mr-[8px]',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 24,
         },
         {
             type: 'redo',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'line',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 1,
         },
         {
             type: 'header',
             classInclude: 'ml-[8px]',
-            mode: [],
+            mode: ['all'],
             width: 146,
         },
         {
             type: 'fontFamily',
             classInclude: 'ml-[8px]',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 136,
         },
         {
             type: 'fontSize',
             classInclude: 'ml-[8px] mr-[8px]',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 82,
         },
         {
             type: 'line',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 1,
         },
         {
             type: 'color',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'background',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'line',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 1,
         },
         {
             type: 'bold',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'italic',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'underline',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'strikeThrough',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'line',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 1,
         },
         {
             type: 'script.sub',
-            mode: [],
+            mode: ['all'],
             width: 32,
         },
         {
             type: 'script.super',
-            mode: [],
+            mode: ['all'],
             width: 32,
         },
         {
             type: 'line',
-            mode: [],
+            mode: ['all'],
             width: 1,
         },
         {
             type: 'adjust',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 52,
         },
         {
             type: 'line',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'indentIncrease',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'indentDecrease',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'listBulleted',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'listNumbered',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'listChecked',
-            mode: [],
+            mode: ['all'],
             width: 32,
         },
         {
             type: 'line',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 1,
         },
         {
             type: 'personalize',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'blockquote',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'link',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'unLink',
-            mode: ['default', 'basic'],
+            mode: ['all', 'default', 'basic'],
             width: 32,
         },
         {
             type: 'image',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 32,
         },
         {
             type: 'video',
-            mode: [],
+            mode: ['all'],
             width: 32,
         },
         {
             type: 'emoji',
             classInclude: 'ml-[8px]',
-            mode: ['default'],
+            mode: ['all', 'default'],
             width: 24,
         },
-        { type: 'table', width: 32, mode: [] },
+        { type: 'table', width: 32, mode: ['all'] },
     ].filter((item) => {
         if (!item.mode?.includes(mode)) {
             return false;
@@ -683,6 +683,8 @@ class LibsUiComponentsInputsQuillComponent {
     displayShowMoreToolbar = computed(() => this.toolbarOptionsConfig().some((item) => item.display === false));
     displaySkeleton = computed(() => this.toolbarOptionsConfig().every((item) => item.display === undefined));
     timeCalculationToolBar = signal(undefined);
+    timerCalculatorToolbar = signal(undefined);
+    totalRecallCalculatorToolbar = signal(0);
     popoverFunctionControl = signal(undefined);
     quill = signal(undefined);
     handlers = signal({ undo: this.handleUndo.bind(this), redo: this.handleRedo.bind(this) });
@@ -785,7 +787,7 @@ class LibsUiComponentsInputsQuillComponent {
                 this.scrollToSelectionWithElementScrollHeightAuto(range.indexSelect);
                 return;
             },
-            reCalculatorToolbar: this.calculatorToolbar.bind(this),
+            reCalculatorToolbar: async () => this.calculatorToolbar(true),
         };
     }
     async ngAfterViewInit() {
@@ -802,7 +804,9 @@ class LibsUiComponentsInputsQuillComponent {
             this.display.set(true);
             this.quill()?.blur();
         }
-        fromEvent(window, 'resize').pipe(takeUntil(this.onDestroy)).subscribe(this.calculatorToolbar.bind(this));
+        fromEvent(window, 'resize')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe(() => this.calculatorToolbar(true));
         await lastValueFrom(timer(400));
         this.display.set(true);
         const cursorSpan = this.quill()?.root.querySelector('.ql-cursor');
@@ -1096,32 +1100,41 @@ class LibsUiComponentsInputsQuillComponent {
         this.handleShowUploadLink(link);
         this.popoverFunctionControl()?.removePopoverOverlay();
     }
-    async calculatorToolbar() {
+    async calculatorToolbar(resetTotalRecall) {
+        clearTimeout(this.timerCalculatorToolbar());
+        if (resetTotalRecall) {
+            this.totalRecallCalculatorToolbar.set(0);
+        }
         this.cdr.detectChanges();
-        this.timeCalculationToolBar.set(setTimeout(() => {
-            const toolbarWidth = this.toolbarItemsEl().nativeElement.offsetWidth || 0;
-            let totalWidth = 32 + 28;
-            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;
+        const toolbarWidth = this.quillEditorEl().nativeElement.offsetWidth || 0;
+        let totalWidth = 60;
+        if (this.totalRecallCalculatorToolbar() < 10 && toolbarWidth <= totalWidth) {
+            this.totalRecallCalculatorToolbar.update((val) => val + 1);
+            this.timerCalculatorToolbar.set(setTimeout(() => {
+                this.calculatorToolbar();
+            }, 250));
+            return;
+        }
+        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;
                     }
-                });
-                return [...configs];
+                }
+                if (totalWidth > toolbarWidth) {
+                    item.display = false;
+                    return;
+                }
             });
-            this.cdr.detectChanges();
-        }, 600));
+            return [...configs];
+        });
+        this.cdr.detectChanges();
     }
     setStyle(type, data) {
         this.quill()?.format(type, data);
@@ -1684,10 +1697,14 @@ class LibsUiComponentsInputsQuill2xComponent {
         image: this.handlerShowUploadImage.bind(this),
     });
     timerSetFontSize = signal(undefined);
+    timerCalculatorToolbar = signal(undefined);
+    totalRecallCalculatorToolbar = signal(0);
+    isCalculatorToolbarSuccess = signal(false);
+    borderColor = computed(() => (this.messageError() && this.showErrorBorder() ? ' !border-[var(--libs-ui-color-border-error,#ee2d41)] ' : '!border-[#e5e7eb] '));
     //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]' : ''));
+    containerToolbarClass = computed(() => (this.quillCustomConfig()?.toolbar?.classCustomContainerToolbar || '') + ` border-t border-l border-r ${this.borderColor()}rounded-t-[4px]`);
+    containerEditorClass = computed(() => (this.quillCustomConfig()?.editor?.classCustomContainerEditor || '') + ` !border ${this.borderColor()} !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');
@@ -1701,6 +1718,7 @@ class LibsUiComponentsInputsQuill2xComponent {
     iconAlignSelectedComputed = computed(() => get(this.alignSelected(), 'item.icon'));
     colorSelected = signal(false);
     backgroundSelected = signal(false);
+    messageError = signal('');
     size = signal({ value: 14 });
     link = signal(linkDefault());
     showMoreAction = signal(false);
@@ -1721,6 +1739,13 @@ class LibsUiComponentsInputsQuill2xComponent {
     ignoreShowPopupEditLink = input();
     ignoreCommunicateMicroEventPopup = input();
     handlersExpand = input();
+    autoFocus = input();
+    focusBottom = input();
+    validRequired = input();
+    validMinLength = input();
+    validMaxLength = input();
+    showErrorLabel = input(true, { transform: (val) => val ?? true });
+    showErrorBorder = input(true);
     //endregion
     //region Outputs
     outShowPopupEditLink = output();
@@ -1747,8 +1772,8 @@ class LibsUiComponentsInputsQuill2xComponent {
     cdr = inject(ChangeDetectorRef);
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     //endregion
-    ngOnInit() {
-        const type = this.quillCustomConfig()?.toolbar?.type || 'default';
+    async 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)]);
@@ -1794,18 +1819,36 @@ class LibsUiComponentsInputsQuill2xComponent {
         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();
+        fromEvent(window, 'resize')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.calculatorToolbar(true));
         this.handlerTextChange();
         this.handlerSelectionChange();
         this.handlerPaste();
+        createContextMenuOptionTable(this.quill, this.translate);
+        this.outFunctionsControl.emit(this.FunctionsControl);
+        await this.setContent(this.item()[this.fieldBind()]);
+        this.setStyleForContent();
+        if (this.autoFocus()) {
+            timer(1000)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.focus());
+        }
     }
     get FunctionsControl() {
         return {
             quill: () => this.quill,
+            checkIsValid: this.validate.bind(this),
+            refreshItemValue: this.updateValueByRootQuillHtml.bind(this),
+            setContent: this.setContent.bind(this),
+            insertText: this.insertText.bind(this),
+            insertLink: this.insertLink.bind(this),
+            insertImage: this.insertImage.bind(this),
+            setFontSize: async (size) => this.quill?.format('size', `${size}px`),
+            setColor: async (color) => this.quill?.format('color', color),
+            setBackground: async (color) => this.quill?.format('background', color),
+            setMessageError: async (message) => this.messageError.set(message),
+            reCalculatorToolbar: async () => this.calculatorToolbar(true),
         };
     }
     //region handler Event HTML
@@ -1840,6 +1883,32 @@ class LibsUiComponentsInputsQuill2xComponent {
     handlerInsertEmoji(emoji) {
         this.insertText(emoji, undefined, true);
     }
+    handlerUnlink(event) {
+        event.stopPropagation();
+        const link = this.link();
+        this.quill?.formatText(link.range.index, link.range.length, { link: false });
+        this.inputLinkRef().FunctionsControl?.removePopoverOverlay();
+    }
+    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();
+    }
     //endregion
     //region Private Method
     //region Quill Methods
@@ -1876,11 +1945,11 @@ class LibsUiComponentsInputsQuill2xComponent {
             await this.uploadImagesAndInsert(input?.files);
         };
     }
-    async insertText(content, index, focusLast) {
+    async insertText(content, index, focusLastValueInsert) {
         index = index ?? this.quill?.getSelection(true).index;
         if (!isNil(index)) {
             this.quill?.insertText(index, content, Quill2x.sources.USER);
-            if (focusLast) {
+            if (focusLastValueInsert) {
                 await lastValueFrom(timer(0));
                 this.quill?.setSelection(index + content.length, 0, Quill2x.sources.USER);
             }
@@ -1993,10 +2062,36 @@ class LibsUiComponentsInputsQuill2xComponent {
             if (!this.autoUpdateValueWhenTextChange()) {
                 return;
             }
-            // this.updateValueByRootQuillHtml();
+            this.updateValueByRootQuillHtml();
         });
     }
     //endregion
+    async validate() {
+        this.messageError.set('');
+        const validRequired = this.validRequired();
+        const item = this.item();
+        const fieldNameBind = this.fieldBind();
+        const value = get(item, fieldNameBind);
+        if (validRequired && validRequired.isRequired && !this.readonly() && !this.quillBodyContainer().nativeElement.getElementsByClassName('ql-blank').length) {
+            this.messageError.set(validRequired.message || ERROR_MESSAGE_EMPTY_VALID);
+            this.outMessageError.emit(this.messageError());
+            return false;
+        }
+        const validMinLength = this.validMinLength();
+        if (validMinLength && fieldNameBind && value && value.trim().length < validMinLength.length) {
+            this.messageError.set(validMinLength.message || ERROR_MESSAGE_MIN_LENGTH);
+            this.outMessageError.emit(this.messageError());
+            return false;
+        }
+        const validMaxLength = this.validMaxLength();
+        if (validMaxLength && fieldNameBind && value && value.trim().length > this.validMaxLength.length) {
+            this.messageError.set(validMaxLength.message || ERROR_MESSAGE_MAX_LENGTH);
+            this.outMessageError.emit(this.messageError());
+            return false;
+        }
+        this.outMessageError.emit(this.messageError());
+        return true;
+    }
     updateHandlerFunction() {
         const handlersExpand = this.handlersExpand();
         if (handlersExpand && handlersExpand.length) {
@@ -2036,10 +2131,22 @@ class LibsUiComponentsInputsQuill2xComponent {
         this.colorSelected.set(isTruthy(format?.color));
         this.backgroundSelected.set(isTruthy(format?.background));
     }
-    async calculatorToolbar() {
+    async calculatorToolbar(resetTotalRecall) {
+        clearTimeout(this.timerCalculatorToolbar());
+        if (resetTotalRecall) {
+            this.totalRecallCalculatorToolbar.set(0);
+        }
         this.cdr.detectChanges();
         const toolbarWidth = this.toolbarContainer().nativeElement.offsetWidth || 0;
         let totalWidth = 84;
+        if (!this.isCalculatorToolbarSuccess() && this.totalRecallCalculatorToolbar() < 10 && toolbarWidth < (this.quillCustomConfig()?.toolbar?.lessWidthToolbarRecallCalculator || totalWidth)) {
+            this.totalRecallCalculatorToolbar.update((val) => val + 1);
+            this.timerCalculatorToolbar.set(setTimeout(() => {
+                this.calculatorToolbar();
+            }, 250));
+            return;
+        }
+        this.isCalculatorToolbarSuccess.set(true);
         this.toolbarOptionsConfig.update((configs) => {
             configs.forEach((item, index) => {
                 item.display = true;
@@ -2197,26 +2304,6 @@ class LibsUiComponentsInputsQuill2xComponent {
             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;
@@ -2238,19 +2325,21 @@ class LibsUiComponentsInputsQuill2xComponent {
         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);
+    updateValueByRootQuillHtml() {
+        const html = this.removeUnwantedPart(this.quill?.root.innerHTML || '');
+        if (!this.quill?.root.getElementsByTagName('img').length && !this.quill?.getText()) {
+            set(this.item(), this.fieldBind(), '');
+            this.validate();
+            this.outChange.emit(get(this.item, this.fieldBind()));
+            return;
         }
+        this.convertInnerHTMLAndSetValue(html);
+        this.validate();
+        this.outChange.emit(get(this.item, this.fieldBind()));
+    }
+    convertInnerHTMLAndSetValue(html) {
+        this.setStyleForContent();
+        set(this.item(), this.fieldBind(), html);
     }
     removeUnwantedPart(html) {
         if (!html) {
@@ -2261,8 +2350,22 @@ class LibsUiComponentsInputsQuill2xComponent {
             .replace(/<div><br><\/div>/gi, '')
             .replace(/[\u200B-\u200D\uFEFF]/g, '');
     }
+    focus() {
+        if (this.focusBottom()) {
+            this.quill?.setSelection(this.quill.root.innerHTML.length, 0, Quill.sources.SILENT);
+            return;
+        }
+        this.quill?.setSelection(0, 0, Quill.sources.SILENT);
+    }
+    //endregion
+    ngOnDestroy() {
+        clearTimeout(this.timerSetFontSize());
+        clearTimeout(this.timerCalculatorToolbar());
+        this.dynamicComponentService.remove(this.addEditLinkComponentRef());
+        this.dynamicComponentService.remove(this.uploadImageComponentRef());
+    }
     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 });
+    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 }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, focusBottom: { classPropertyName: "focusBottom", publicName: "focusBottom", 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 }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", 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\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  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\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: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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,
@@ -2278,7 +2381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         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"] }]
+                    ], 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\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  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\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"] }]
         }] });
 
 /**