@libs-ui/components-inputs-quill 0.2.77 → 0.2.78

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

@@ -1,85 +1,22 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, input, output, Component, ChangeDetectionStrategy, computed, inject, viewChild } from '@angular/core';
+import { signal, model, output, Component, ChangeDetectionStrategy, computed, inject, input, viewChild, viewChildren } from '@angular/core';
 import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
 import { LibsUiComponentsEmojiComponent } from '@libs-ui/components-inputs-emoji';
+import { LibsUiComponentsInputsMentionDirective } from '@libs-ui/components-inputs-mention';
 import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
 import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
-import { PATTERN_URL, get, set, xssFilter, isNil, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH } from '@libs-ui/utils';
+import { PATTERN_URL, convertFileToBase64, get, set, xssFilter, isNil, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MIN_LENGTH, ERROR_MESSAGE_MAX_LENGTH } from '@libs-ui/utils';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import Quill from 'quill';
 import { Subject, fromEvent, takeUntil } from 'rxjs';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { returnListObject } from '@libs-ui/services-http-request';
-
-class LibsUiComponentsInputsQuillCustomUploadImageComponent {
-    buttonFooter = signal([{
-            label: 'i18n_save',
-            action: () => this.handlerSaveImage()
-        },
-        {
-            type: 'button-third',
-            label: 'i18n_cancel',
-            action: async () => this.outClose.emit()
-        }]);
-    disable = signal(false);
-    // private mediaFile =signal<IMediaFile | undefined>(undefined);
-    // private mediaUploadFunctionControl =signal<IMediaUploadBaseFunctionControlEvent | undefined>(undefined);
-    zIndex = input(1202, { transform: (value) => value ? value + 1 : 1202 });
-    maxImageSize = input(1048576, { transform: (value) => value ?? 1048576 });
-    labelConfig = input();
-    outClose = output();
-    // protected handlerFunctionsControl(event: IMediaUploadBaseFunctionControlEvent) {
-    //   this.mediaUploadFunctionControl.set(event);
-    // }
-    // protected handlerChangeFile(event: IChangeFile) {
-    //   this.mediaFile.set(event.files[0]);
-    // }
-    async handlerSaveImage() {
-        // if (!await this.mediaUploadFunctionControl()?.valid()) {
-        //   return;
-        // }
-        // if (this.mediaFile?.origin_url) {
-        //   this.moClose.emit(this.mediaFile.origin_url);
-        //   return;
-        // }
-        // const body: IOptionsUploadMedia = {
-        //   do_not_delete: true,
-        //   file: this.mediaFile?.file,
-        //   option: 'thumb',
-        //   size: [{ 'width': '200', 'height': '200' }]
-        // };
-        // this.disable = true;
-        // try {
-        //   const params = new HttpParamsRequest({ fromObject: { pem: BUILD_PEM_OBJECT({ isCheck: 0, action: DefineConstants.PERMISSION_ACTION_VIEW, pathCheck: '/other' }) } });
-        //   const res = await this.mediaService.uploadImage(params, body);
-        //   this.moClose.emit(res.data?.url);
-        // } catch (error) {
-        //   console.log(error);
-        //   this.pushMessageService.showCompTypeText('i18n_notification_manipulation_not_success', undefined, undefined, { timeRemove: 2000, type: 'error' });
-        //   this.moClose.emit();
-        // } finally {
-        //   this.disable = false;
-        // }
-    }
-    handlerEventModal(event) {
-        if (event === 'close') {
-            this.outClose.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillCustomUploadImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsInputsQuillCustomUploadImageComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill-custom_upload_image", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, maxImageSize: { classPropertyName: "maxImageSize", publicName: "maxImageSize", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose" }, ngImport: i0, template: "<libs_ui-components-modal [title]=\"'i18n_download_image'\"\n  [mode]=\"'center'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme:true}\"\n  [maxHeight]=\"'calc(100% - 100px)'\"\n  [height]=\"'auto'\"\n  [zIndex]=\"zIndex()\"\n  [disable]=\"disable()\"\n  [buttonsFooter]=\"buttonFooter()\"\n  (outEvent)=\"handlerEventModal($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <!-- <mo-libs-shared-components-media-upload [zIndex]=\"zIndex+1\"\n      [labelConfig]=\"labelConfig\"\n      [multiple]=\"false\"\n      [fileType]=\"'image'\"\n      [doNotDelete]=\"true\"\n      [maxImageSize]=\"maxImageSize\"\n      [limitFile]=\"10\"\n      [validRequired]=\"{isRequired: true}\"\n      (moChangeFile)=\"handlerChangeFile($event)\"\n      (moFunctionsControl)=\"handlerFunctionsControl($event)\">\n    </mo-libs-shared-components-media-upload> -->\n  </div>\n</libs_ui-components-modal>\n", dependencies: [{ kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillCustomUploadImageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-quill-custom_upload_image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        LibsUiComponentsModalComponent
-                    ], template: "<libs_ui-components-modal [title]=\"'i18n_download_image'\"\n  [mode]=\"'center'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme:true}\"\n  [maxHeight]=\"'calc(100% - 100px)'\"\n  [height]=\"'auto'\"\n  [zIndex]=\"zIndex()\"\n  [disable]=\"disable()\"\n  [buttonsFooter]=\"buttonFooter()\"\n  (outEvent)=\"handlerEventModal($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <!-- <mo-libs-shared-components-media-upload [zIndex]=\"zIndex+1\"\n      [labelConfig]=\"labelConfig\"\n      [multiple]=\"false\"\n      [fileType]=\"'image'\"\n      [doNotDelete]=\"true\"\n      [maxImageSize]=\"maxImageSize\"\n      [limitFile]=\"10\"\n      [validRequired]=\"{isRequired: true}\"\n      (moChangeFile)=\"handlerChangeFile($event)\"\n      (moFunctionsControl)=\"handlerFunctionsControl($event)\">\n    </mo-libs-shared-components-media-upload> -->\n  </div>\n</libs_ui-components-modal>\n" }]
-        }] });
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 
 const parchment = Quill.import('parchment');
 const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8];
@@ -104,8 +41,8 @@ class LibsUiComponentsInputsQuillLinkComponent {
     dataLink = signal({ title: '', link: '' });
     patternLink = signal(PATTERN_URL());
     inputValidFunctionControl = signal([]);
-    zIndex = input(1200, { transform: (value) => value ? value + 1 : 1200 });
-    textSelected = input();
+    zIndex = model(1200);
+    textSelected = model();
     outClose = output();
     outSaveLink = output();
     ngOnInit() {
@@ -137,14 +74,14 @@ class LibsUiComponentsInputsQuillLinkComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsInputsQuillLinkComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill-link", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, textSelected: { classPropertyName: "textSelected", publicName: "textSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outClose: "outClose", outSaveLink: "outSaveLink" }, ngImport: i0, template: "<libs_ui-components-modal [title]=\"'i18n_insert_link'\"\n  [height]=\"'auto'\"\n  [width]=\"'598px'\"\n  [zIndex]=\"zIndex()\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'i18n_content', required: true}\"\n      [(item)]=\"dataLink\"\n      [fieldNameBind]=\"'title'\"\n      [placeholder]=\"'i18n_import_content'\"\n      [validRequired]=\"{isRequired:true}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    <div class=\"mt-[16px]\">\n      <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'Link', required: true}\"\n        [(item)]=\"dataLink\"\n        [fieldNameBind]=\"'link'\"\n        [placeholder]=\"'https:/\u2026'\"\n        [validRequired]=\"{isRequired:true}\"\n        [validPattern]=\"[{pattern:patternLink}]\"\n        keySelectedUnitLeft=\"1\"\n        [unitsLeft]=\"[{id:'1',label:'URL'}]\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    </div>\n  </div>\n</libs_ui-components-modal>\n", dependencies: [{ kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsInputsQuillLinkComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill-link", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, textSelected: { classPropertyName: "textSelected", publicName: "textSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zIndex: "zIndexChange", textSelected: "textSelectedChange", outClose: "outClose", outSaveLink: "outSaveLink" }, ngImport: i0, template: "<libs_ui-components-modal [title]=\"'i18n_insert_link'\"\n  [mode]=\"'center'\"\n  [height]=\"'auto'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true}\"\n  [zIndex]=\"zIndex()\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'i18n_content', required: true}\"\n      [(item)]=\"dataLink\"\n      [fieldNameBind]=\"'title'\"\n      [placeholder]=\"'i18n_import_content'\"\n      [validRequired]=\"{isRequired: true}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    <div class=\"mt-[16px]\">\n      <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'Link', required: true}\"\n        [(item)]=\"dataLink\"\n        [fieldNameBind]=\"'link'\"\n        [placeholder]=\"'https:/\u2026'\"\n        [validRequired]=\"{isRequired: true}\"\n        [validPattern]=\"[{pattern: patternLink(), valuePatternShowError: false}]\"\n        [keySelectedUnitLeft]=\"'1'\"\n        [unitsLeft]=\"[{id:'1',label:'URL'}]\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    </div>\n  </div>\n</libs_ui-components-modal>\n", dependencies: [{ kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-inputs-quill-link', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         LibsUiComponentsModalComponent,
                         LibsUiComponentsInputsValidComponent
-                    ], template: "<libs_ui-components-modal [title]=\"'i18n_insert_link'\"\n  [height]=\"'auto'\"\n  [width]=\"'598px'\"\n  [zIndex]=\"zIndex()\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'i18n_content', required: true}\"\n      [(item)]=\"dataLink\"\n      [fieldNameBind]=\"'title'\"\n      [placeholder]=\"'i18n_import_content'\"\n      [validRequired]=\"{isRequired:true}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    <div class=\"mt-[16px]\">\n      <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'Link', required: true}\"\n        [(item)]=\"dataLink\"\n        [fieldNameBind]=\"'link'\"\n        [placeholder]=\"'https:/\u2026'\"\n        [validRequired]=\"{isRequired:true}\"\n        [validPattern]=\"[{pattern:patternLink}]\"\n        keySelectedUnitLeft=\"1\"\n        [unitsLeft]=\"[{id:'1',label:'URL'}]\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    </div>\n  </div>\n</libs_ui-components-modal>\n" }]
+                    ], template: "<libs_ui-components-modal [title]=\"'i18n_insert_link'\"\n  [mode]=\"'center'\"\n  [height]=\"'auto'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true}\"\n  [zIndex]=\"zIndex()\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'i18n_content', required: true}\"\n      [(item)]=\"dataLink\"\n      [fieldNameBind]=\"'title'\"\n      [placeholder]=\"'i18n_import_content'\"\n      [validRequired]=\"{isRequired: true}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    <div class=\"mt-[16px]\">\n      <libs_ui-components-inputs-valid [labelConfig]=\"{labelLeft: 'Link', required: true}\"\n        [(item)]=\"dataLink\"\n        [fieldNameBind]=\"'link'\"\n        [placeholder]=\"'https:/\u2026'\"\n        [validRequired]=\"{isRequired: true}\"\n        [validPattern]=\"[{pattern: patternLink(), valuePatternShowError: false}]\"\n        [keySelectedUnitLeft]=\"'1'\"\n        [unitsLeft]=\"[{id:'1',label:'URL'}]\"\n        (outFunctionsControl)=\"handlerFunctionsControl($event)\" />\n    </div>\n  </div>\n</libs_ui-components-modal>\n" }]
         }] });
 
 const Embed = Quill.import("blots/embed");
@@ -180,12 +117,77 @@ QuillMentionBlot.blotName = "mention";
 QuillMentionBlot.tagName = "span";
 QuillMentionBlot.className = "libs-ui-quill-mention";
 
+class LibsUiComponentsInputsQuillUploadImageComponent {
+    buttonFooter = signal([
+        {
+            type: 'button-third',
+            label: 'i18n_cancel',
+            action: async () => this.outClose.emit()
+        },
+        {
+            label: 'i18n_save',
+            action: () => this.handlerSaveImage()
+        }
+    ]);
+    disable = signal(false);
+    // private mediaFile =signal<IMediaFile | undefined>(undefined);
+    // private mediaUploadFunctionControl =signal<IMediaUploadBaseFunctionControlEvent | undefined>(undefined);
+    uploadImageConfig = model.required();
+    outClose = output();
+    // protected handlerFunctionsControl(event: IMediaUploadBaseFunctionControlEvent) {
+    //   this.mediaUploadFunctionControl.set(event);
+    // }
+    // protected handlerChangeFile(event: IChangeFile) {
+    //   this.mediaFile.set(event.files[0]);
+    // }
+    async handlerSaveImage() {
+        // if (!await this.mediaUploadFunctionControl()?.valid()) {
+        //   return;
+        // }
+        // if (this.mediaFile?.origin_url) {
+        //   this.moClose.emit(this.mediaFile.origin_url);
+        //   return;
+        // }
+        // const body: IOptionsUploadMedia = {
+        //   do_not_delete: true,
+        //   file: this.mediaFile?.file,
+        //   option: 'thumb',
+        //   size: [{ 'width': '200', 'height': '200' }]
+        // };
+        // this.disable = true;
+        // try {
+        //   const params = new HttpParamsRequest({ fromObject: { pem: BUILD_PEM_OBJECT({ isCheck: 0, action: DefineConstants.PERMISSION_ACTION_VIEW, pathCheck: '/other' }) } });
+        //   const res = await this.mediaService.uploadImage(params, body);
+        //   this.moClose.emit(res.data?.url);
+        // } catch (error) {
+        //   console.log(error);
+        //   this.pushMessageService.showCompTypeText('i18n_notification_manipulation_not_success', undefined, undefined, { timeRemove: 2000, type: 'error' });
+        //   this.moClose.emit();
+        // } finally {
+        //   this.disable = false;
+        // }
+    }
+    handlerEventModal(event) {
+        if (event === 'close') {
+            this.outClose.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillUploadImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LibsUiComponentsInputsQuillUploadImageComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill-upload_image", inputs: { uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { uploadImageConfig: "uploadImageConfigChange", outClose: "outClose" }, ngImport: i0, template: "<libs_ui-components-modal [title]=\"'i18n_download_image'\"\n  [mode]=\"'center'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme:true}\"\n  [maxHeight]=\"'calc(100% - 100px)'\"\n  [height]=\"'auto'\"\n  [zIndex]=\"uploadImageConfig().zIndex || 1203\"\n  [disable]=\"disable()\"\n  [buttonsFooter]=\"buttonFooter()\"\n  (outEvent)=\"handlerEventModal($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <!-- <mo-libs-shared-components-media-upload [zIndex]=\"zIndex+1\"\n      [labelConfig]=\"labelConfig\"\n      [multiple]=\"false\"\n      [fileType]=\"'image'\"\n      [doNotDelete]=\"true\"\n      [maxImageSize]=\"maxImageSize || 1048576\"\n      [limitFile]=\"10\"\n      [validRequired]=\"{isRequired: true}\"\n      (moChangeFile)=\"handlerChangeFile($event)\"\n      (moFunctionsControl)=\"handlerFunctionsControl($event)\">\n    </mo-libs-shared-components-media-upload> -->\n  </div>\n</libs_ui-components-modal>\n", dependencies: [{ kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillUploadImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-inputs-quill-upload_image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        LibsUiComponentsModalComponent
+                    ], template: "<libs_ui-components-modal [title]=\"'i18n_download_image'\"\n  [mode]=\"'center'\"\n  [width]=\"'598px'\"\n  [headerConfig]=\"{ignoreHeaderTheme:true}\"\n  [maxHeight]=\"'calc(100% - 100px)'\"\n  [height]=\"'auto'\"\n  [zIndex]=\"uploadImageConfig().zIndex || 1203\"\n  [disable]=\"disable()\"\n  [buttonsFooter]=\"buttonFooter()\"\n  (outEvent)=\"handlerEventModal($event)\">\n  <div class=\"libs-ui-modal-body-custom\">\n    <!-- <mo-libs-shared-components-media-upload [zIndex]=\"zIndex+1\"\n      [labelConfig]=\"labelConfig\"\n      [multiple]=\"false\"\n      [fileType]=\"'image'\"\n      [doNotDelete]=\"true\"\n      [maxImageSize]=\"maxImageSize || 1048576\"\n      [limitFile]=\"10\"\n      [validRequired]=\"{isRequired: true}\"\n      (moChangeFile)=\"handlerChangeFile($event)\"\n      (moFunctionsControl)=\"handlerFunctionsControl($event)\">\n    </mo-libs-shared-components-media-upload> -->\n  </div>\n</libs_ui-components-modal>\n" }]
+        }] });
+
 const listDataAlign = () => {
     return [
-        { key: '', icon: 'libs-ui-align-left text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
-        { key: 'right', icon: 'libs-ui-align-right text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
-        { key: 'center', icon: 'libs-ui-align-center text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
-        { key: 'justify', icon: 'libs-ui-align-justify text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
+        { key: '', icon: 'libs-ui-icon-align-left text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
+        { key: 'right', icon: 'libs-ui-icon-align-right text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
+        { key: 'center', icon: 'libs-ui-icon-align-center text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
+        { key: 'justify', icon: 'libs-ui-icon-align-justify text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]' },
     ];
 };
 const listFont = () => {
@@ -206,7 +208,8 @@ const listConfigAlign = () => {
         }),
         configTemplateText: signal({
             fieldKey: 'key',
-            getValue: item => `<i class="${item.icon} ml-[6px]"></i>`,
+            getClassItem: () => '!px-[8px] !py-[4px]',
+            getValue: item => `<i class='flex ${item.icon}'></i>`,
             ignoreIconSelected: true
         })
     };
@@ -290,27 +293,27 @@ const iconList = [
         icon: 'libs-ui-icon-editor-color-text'
     },
     {
-        key: "indent['-1']",
+        key: "indent.-1",
         icon: 'libs-ui-icon-indent-decrease'
     },
     {
-        key: "indent['+1']",
+        key: "indent.+1",
         icon: 'libs-ui-icon-indent-increase'
     },
     {
-        key: "align['']",
+        key: "align.",
         icon: 'align-quill libs-ui-icon-align-left'
     },
     {
-        key: "align['center']",
+        key: "align.center",
         icon: 'align-quill libs-ui-icon-align-center'
     },
     {
-        key: "align['right']",
+        key: "align.right",
         icon: 'align-quill libs-ui-icon-align-right'
     },
     {
-        key: "align['justify']",
+        key: "align.justify",
         icon: 'align-quill libs-ui-icon-align-justify'
     },
     {
@@ -322,12 +325,23 @@ const iconList = [
         icon: 'libs-ui-icon-face-smile'
     }
 ];
+const uploadImageConfigDefault = {
+    modeCustom: true,
+    zIndex: 1202,
+    showIcon: true,
+    onlyAcceptImageHttpsLink: false,
+    functionUploadImage: async (links) => {
+        const data = [];
+        for (const element of links) {
+            data.push(await convertFileToBase64(element));
+        }
+        return data;
+    }
+};
 
 class LibsUiComponentsInputsQuillComponent {
-    quill = signal(undefined);
-    messageErr = signal('');
+    messageError = signal('');
     display = signal(false);
-    handlers = signal({ undo: this.handleUndo, redo: this.handleRedo });
     listConfigAlign = signal(listConfigAlign());
     alignSelected = signal(undefined);
     iconAlignSelectedComputed = computed(() => get(this.alignSelected(), 'item.icon'));
@@ -335,86 +349,89 @@ class LibsUiComponentsInputsQuillComponent {
     fontSelected = signal(undefined);
     labelFontSelectedComputed = computed(() => get(this.fontSelected(), 'item.label') || 'Sans Serif');
     size = signal({ value: 14 });
-    headingKeySelected = signal(undefined);
-    addLinkComponentRef = signal(undefined);
-    mediaUploadComponentRef = signal(undefined);
+    itemShow = signal([]);
+    showMoreAction = signal(false);
+    quill = signal(undefined);
+    handlers = signal({ undo: this.handleUndo.bind(this), redo: this.handleRedo.bind(this) });
     showMention = signal(false);
+    addLinkComponentRef = signal(undefined);
+    uploadImageComponentRef = signal(undefined);
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     translate = inject(TranslateService);
     onDestroy = new Subject();
     optionsToolbar = input(toolBarOptionDefault, { transform: value => value || toolBarOptionDefault });
+    showToolBar = input();
+    classIncludeToolbar = input('bottom-[-66px] left-[18px]');
     placeholder = input('i18n_import_content', { transform: (value) => value || 'i18n_import_content' });
-    labelConfig = input();
+    label = input();
     item = input();
     fieldNameBind = input('value');
     readonly = input(false);
-    typeOutPutContent = input('style');
-    ignoreShowErrorLabel = input(false);
+    showErrorLabel = input(true);
     showErrorBorder = input(false);
-    template = input();
+    onlyShowErrorBorderInContent = input(false);
     classIncludeTemplate = input();
     classInclude = input();
-    handlerClickHeader = input();
+    handlersExpand = input();
     validRequired = input();
     validMinLength = input();
     validMaxLength = input();
     onlyShowContent = input(false);
     zIndex = input(1201, { transform: (value) => value || 1201 });
-    // readonly dataConfigMention: IMentionsConfig | undefined;
-    notAllowUploadImage = input();
-    isHeightAuto = input();
-    customUploadImage = input({ modeCustom: true, zIndex: 1202 }, { transform: (value) => value || { modeCustom: true, zIndex: 1202 } });
+    dataConfigMention = input();
+    heightAuto = input();
     autoFocus = input();
     autoFocusBottom = input();
-    isShowToolBar = input();
-    classIncludeToolbar = input('bottom-[-66px] left-[18px]');
     templateToolBarPersonalize = input();
-    onlyShowErrorBorderInContent = input(false);
-    functionUploadImage = input(); // cần truyền nếu cho phép tải ảnh lên, yêu cầu tải xong ảnh phải gọi hàm insertImage để thêm ảnh vào content
-    outLabelError = output();
+    template = input();
+    uploadImageConfig = input(uploadImageConfigDefault, { transform: (value) => value || uploadImageConfigDefault });
+    outMessageError = output();
     outBlur = output();
     outFocus = output();
     outChange = output();
     outFunctionsControl = output();
-    outImagePaste = output();
     outSelectionChange = output();
     wrapperEditorEl = viewChild('wrapperEditor');
     editorEl = viewChild('editor');
     quillOptionEl = viewChild('quillOption');
     quillEditorEl = viewChild('quillEditor');
     quillToolbarEl = viewChild('quillToolbar');
+    toolbarItemsEl = viewChild('toolbarItems');
+    itemsEl = viewChildren('item');
     ngOnInit() {
+        this.itemShow.set(this.optionsToolbar().map((item, index) => index));
         this.outFunctionsControl.emit({
-            setContent: this.setContent.bind(this),
             checkIsValid: this.validate.bind(this),
-            insertContent: this.handleAddContentText.bind(this),
-            insertLink: this.handleAddLinkQuill.bind(this),
-            insertImage: this.insertImage.bind(this),
+            setContent: this.setContent.bind(this),
+            insertText: this.insertText.bind(this),
+            insertLink: this.insertLink.bind(this),
+            insertHtml: this.insertHtml.bind(this),
             setFontSize: this.setFontSize.bind(this),
             setColor: this.setColor.bind(this),
             setBackground: this.setBackground.bind(this)
         });
     }
     ngAfterViewInit() {
+        this.calc();
         if (this.autoFocus()) {
             this.display.set(true);
         }
-        if (this.customUploadImage().modeCustom) {
-            this.handlers.update(item => ({ ...item, image: this.handlerShowUploadImage.bind(this), emoji: this.handlerAddEmoji.bind(this) }));
+        if (this.uploadImageConfig().modeCustom) {
+            this.handlers.update(item => ({ ...item, image: this.handlerShowUploadImage.bind(this), emoji: () => { return; } }));
         }
-        let handlerClickLink = false;
-        const handlerClickHeader = this.handlerClickHeader();
-        if (handlerClickHeader && handlerClickHeader.length) {
-            handlerClickHeader.forEach(element => {
+        let link = false;
+        const handlersExpand = this.handlersExpand();
+        if (handlersExpand && handlersExpand.length) {
+            handlersExpand.forEach(element => {
                 if (element.title && element.action) {
                     if (element.title === 'link') {
-                        handlerClickLink = true;
+                        link = true;
                     }
                     this.handlers.update(item => ({ ...item, [element.title]: element.action }));
                 }
             });
         }
-        if (!handlerClickLink) {
+        if (!link) {
             this.handlers.update(item => ({ ...item, link: this.handleShowUploadLink.bind(this), unLink: this.handlerUnInsertLink.bind(this) }));
         }
         const size = Quill.import('attributors/style/size');
@@ -438,9 +455,7 @@ class LibsUiComponentsInputsQuillComponent {
         Quill.register(alignStyle, true);
         Quill.register(QuillMentionBlot, true);
         Quill.register({ 'formats/indent': indentStyle }, true);
-        iconList.forEach(element => {
-            set(icons, element.key, `<span class="${element.icon} hover:text-[var(--libs-ui-color-light-1)] text-[16px] text-[#6a7383]"></span>`);
-        });
+        iconList.forEach(element => set(icons, element.key, `<span class="${element.icon} hover:text-[var(--libs-ui-color-light-1)] text-[16px] text-[#6a7383]"></span>`));
         this.quill.set(new Quill(this.quillEditorEl()?.nativeElement, {
             modules: {
                 toolbar: {
@@ -467,8 +482,8 @@ class LibsUiComponentsInputsQuillComponent {
             readOnly: this.readonly(),
             placeholder: this.translate.instant(this.placeholder()),
             theme: 'snow',
-            bounds: this.isHeightAuto() ? this.wrapperEditorEl()?.nativeElement : this.quillEditorEl()?.nativeElement,
-            scrollingContainer: this.isHeightAuto() ? this.wrapperEditorEl()?.nativeElement : null
+            bounds: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : this.quillEditorEl()?.nativeElement,
+            scrollingContainer: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : null
         }));
         if (!this.autoFocus()) {
             setTimeout(() => this.display.set(true), 200);
@@ -539,11 +554,10 @@ class LibsUiComponentsInputsQuillComponent {
             if (format) {
                 this.getFont(format);
                 this.getFontSize(format);
-                this.getHeading(format);
             }
             this.outSelectionChange.emit(range && range.length ? true : false);
         });
-        set(this.quill(), 'root.onpaste', (event) => {
+        set(this.quill, 'root.onpaste', async (event) => {
             if (!event || !event.clipboardData) {
                 return;
             }
@@ -558,11 +572,15 @@ class LibsUiComponentsInputsQuillComponent {
                     images.push(file);
                 }
             });
-            if (this.notAllowUploadImage()) {
-                this.outImagePaste.emit(images);
-                return;
+            const links = await this.uploadImageConfig().functionUploadImage?.(images);
+            if (links && links.length) {
+                links.forEach(link => {
+                    if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(PATTERN_URL()).test(link)))) {
+                        return;
+                    }
+                    this.insertHtml('image', link);
+                });
             }
-            this.functionUploadImage()?.(images);
         });
         if (this.autoFocus()) {
             this.quill()?.focus();
@@ -577,6 +595,23 @@ class LibsUiComponentsInputsQuillComponent {
         }
         fromEvent(this.quillEditorEl()?.nativeElement.querySelector('.ql-tooltip'), 'mousedown').pipe(takeUntil(this.onDestroy)).subscribe(event => event.stopPropagation());
     }
+    calc() {
+        setTimeout(() => {
+            this.itemShow.set([]);
+            const toolbarWidth = this.toolbarItemsEl()?.nativeElement.offsetWidth || 0;
+            let itemWidth = 36;
+            // console.log(this.toolbarItemsEl()?.nativeElement, this.toolbarItemsEl()?.nativeElement.offsetWidth);
+            this.itemsEl().forEach((item, index) => {
+                const width = item.nativeElement.offsetWidth || 0;
+                itemWidth += width + (index === this.itemsEl().length - 1 ? 0 : 17);
+                console.log(itemWidth, toolbarWidth);
+                if (itemWidth <= toolbarWidth) {
+                    this.itemShow.update(items => [...items, index]);
+                }
+            });
+            console.log(this.itemShow());
+        }, 300);
+    }
     setStyle(type, data) {
         this.quill()?.format(type, data);
     }
@@ -596,12 +631,6 @@ class LibsUiComponentsInputsQuillComponent {
         }
         this.fontSelected.set({ key: format.font, item: font });
     }
-    getHeading(format) {
-        if (!format.header || format.header instanceof Array) {
-            return;
-        }
-        this.headingKeySelected = format.header;
-    }
     handleUndo() {
         this.quill()?.history?.undo();
     }
@@ -610,11 +639,11 @@ class LibsUiComponentsInputsQuillComponent {
     }
     async setContent(content) {
         if (!content) {
-            setTimeout(() => set(this.quill(), 'root.innerHTML', ''));
+            setTimeout(() => set(this.quill, 'root.innerHTML', ''));
             return;
         }
         const contentXssFilter = await xssFilter(content);
-        setTimeout(() => set(this.quill(), 'root.innerHTML', contentXssFilter));
+        setTimeout(() => set(this.quill, 'root.innerHTML', contentXssFilter));
         if (!this.autoFocusBottom()) {
             return;
         }
@@ -623,7 +652,7 @@ class LibsUiComponentsInputsQuillComponent {
             const range = document.createRange();
             const sel = window.getSelection();
             const target = this.quillEditorEl()?.nativeElement.querySelector('[contenteditable="true"]');
-            const contentScroll = this.isHeightAuto() ? this.wrapperEditorEl()?.nativeElement : target;
+            const contentScroll = this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : target;
             range.selectNodeContents(target);
             range.collapse(false);
             sel?.removeAllRanges();
@@ -644,10 +673,10 @@ class LibsUiComponentsInputsQuillComponent {
         const selection = this.quill()?.getSelection();
         const textSelected = selection?.length ? this.quill()?.getText(selection?.index, selection?.length) : '';
         if (instance) {
-            instance.zIndex = this.zIndex;
-            instance.textSelected = signal(textSelected);
+            instance.zIndex.set(this.zIndex());
+            instance.textSelected.set(textSelected);
             instance.outSaveLink.subscribe((item) => {
-                this.handleAddLinkQuill(item.title, item.link);
+                this.insertLink(item.title, item.link);
             });
             instance.outClose.subscribe(() => this.dynamicComponentService.remove(this.addLinkComponentRef()));
         }
@@ -660,45 +689,45 @@ class LibsUiComponentsInputsQuillComponent {
         }
     }
     async validate() {
-        this.messageErr.set('');
+        this.messageError.set('');
         const validRequired = this.validRequired();
         const item = this.item();
         const fieldNameBind = this.fieldNameBind();
         const value = get(item, fieldNameBind);
         if (validRequired && validRequired.isRequired && (!fieldNameBind || !value || !value.trim())) {
-            this.messageErr.set(validRequired.message || ERROR_MESSAGE_EMPTY_VALID);
-            this.outLabelError.emit(this.messageErr());
+            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.messageErr.set(validMinLength.message || ERROR_MESSAGE_MIN_LENGTH);
-            this.outLabelError.emit(this.messageErr());
+            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.messageErr.set(validMaxLength.message || ERROR_MESSAGE_MAX_LENGTH);
-            this.outLabelError.emit(this.messageErr());
+            this.messageError.set(validMaxLength.message || ERROR_MESSAGE_MAX_LENGTH);
+            this.outMessageError.emit(this.messageError());
             return false;
         }
-        this.outLabelError.emit(this.messageErr());
+        this.outMessageError.emit(this.messageError());
         return true;
     }
-    handleAddContentHTML(tagName, content, index) {
+    async insertHtml(tagName, content, index) {
         const selection = (index || index === 0) ? index : this.quill()?.getSelection(true).index;
         if (!isNil(selection)) {
             this.quill()?.insertEmbed(selection, tagName, content);
             this.setSelection(selection, content.length);
         }
     }
-    async handleAddContentText(content, index) {
+    async insertText(content, index) {
         const selection = (index || index === 0) ? index : this.quill()?.getSelection(true).index;
         if (!isNil(selection)) {
             this.quill()?.insertText(selection, content);
         }
     }
-    async handleAddLinkQuill(text, url, index) {
+    async insertLink(text, url, index) {
         const selection = this.quill()?.getSelection(true);
         const indexInsert = (index || index === 0) ? index : selection?.index;
         if (selection?.length) {
@@ -744,55 +773,38 @@ class LibsUiComponentsInputsQuillComponent {
     handleToggleMention(show) {
         this.showMention.set(show);
     }
-    async insertImage(image) {
-        const sel = window.getSelection();
-        if (!sel) {
-            return;
-        }
-        const range = sel.getRangeAt(0);
-        if (!this.quill()?.root.contains(range.commonAncestorContainer)) {
-            return;
-        }
-        const selection = this.quill()?.getSelection(true);
-        if (!isNil(selection?.index)) {
-            this.quill()?.clipboard.dangerouslyPasteHTML(selection.index, image.outerHTML);
-        }
-        image.remove();
-    }
     handlerShowUploadImage() {
-        this.mediaUploadComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsQuillCustomUploadImageComponent));
-        const instance = this.mediaUploadComponentRef()?.instance;
+        this.uploadImageComponentRef.set(this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsInputsQuillUploadImageComponent));
+        const instance = this.uploadImageComponentRef()?.instance;
         if (instance) {
-            instance.zIndex = input(this.customUploadImage().zIndex || 1203, { transform: value => value });
-            instance.maxImageSize = input(this.customUploadImage().maxImageSize || 1048576, { transform: value => value });
-            instance.labelConfig = input(this.customUploadImage().labelConfig);
+            instance.uploadImageConfig.set(this.uploadImageConfig());
             instance.outClose.subscribe((event) => {
-                this.dynamicComponentService.remove(this.mediaUploadComponentRef());
+                this.dynamicComponentService.remove(this.uploadImageComponentRef());
                 if (event) {
-                    this.handleAddContentHTML('image', event);
+                    this.insertHtml('image', event);
                 }
             });
         }
-        this.dynamicComponentService.addToBody(this.mediaUploadComponentRef());
+        this.dynamicComponentService.addToBody(this.uploadImageComponentRef());
     }
     setSelection(index, length, sources) {
         this.quill()?.setSelection(index, length, sources);
     }
-    // private insertMention(event: IMentionInsert) {
-    //   const range = this.quill()?.getSelection();
-    //   if (!range) {
-    //     return;
-    //   }
-    //   const cursorPos = range.index;
-    //   const startPosInsert = cursorPos - event.lengthKey;
-    //   this.quill()?.deleteText(startPosInsert, event.lengthKey, Quill.sources.USER);
-    //   this.quill()?.insertEmbed(startPosInsert, 'mention', event.data, Quill.sources.USER);
-    //   this.quill()?.insertText(startPosInsert + 1, ' ', Quill.sources.USER);
-    //   this.setSelection(startPosInsert + 2, 0, Quill.sources.USER);
-    // }
-    // protected handlerInsertMention(data: IMentionInsert) {
-    //   this.insertMention(data);
-    // }
+    insertMention(event) {
+        const range = this.quill()?.getSelection();
+        if (!range) {
+            return;
+        }
+        const cursorPos = range.index;
+        const startPosInsert = cursorPos - event.lengthKey;
+        this.quill()?.deleteText(startPosInsert, event.lengthKey, Quill.sources.USER);
+        this.quill()?.insertEmbed(startPosInsert, 'mention', event.data, Quill.sources.USER);
+        this.quill()?.insertText(startPosInsert + 1, ' ', Quill.sources.USER);
+        this.setSelection(startPosInsert + 2, 0, Quill.sources.USER);
+    }
+    handlerInsertMention(data) {
+        this.insertMention(data);
+    }
     async setFontSize(size) {
         this.quill()?.format('size', `${size}px`);
     }
@@ -814,23 +826,28 @@ class LibsUiComponentsInputsQuillComponent {
         this.fontSelected.set(event);
         this.setStyle('font', event?.key);
     }
+    handlerChangeShowMoreAction(event) {
+        event.stopPropagation();
+        this.showMoreAction.update(item => !item);
+    }
     ngOnDestroy() {
         this.onDestroy.next();
         this.onDestroy.complete();
         this.dynamicComponentService.remove(this.addLinkComponentRef());
-        this.dynamicComponentService.remove(this.mediaUploadComponentRef());
+        this.dynamicComponentService.remove(this.uploadImageComponentRef());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsQuillComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill", inputs: { optionsToolbar: { classPropertyName: "optionsToolbar", publicName: "optionsToolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, fieldNameBind: { classPropertyName: "fieldNameBind", publicName: "fieldNameBind", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, typeOutPutContent: { classPropertyName: "typeOutPutContent", publicName: "typeOutPutContent", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowErrorLabel: { classPropertyName: "ignoreShowErrorLabel", publicName: "ignoreShowErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTemplate: { classPropertyName: "classIncludeTemplate", publicName: "classIncludeTemplate", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, handlerClickHeader: { classPropertyName: "handlerClickHeader", publicName: "handlerClickHeader", 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 }, onlyShowContent: { classPropertyName: "onlyShowContent", publicName: "onlyShowContent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, notAllowUploadImage: { classPropertyName: "notAllowUploadImage", publicName: "notAllowUploadImage", isSignal: true, isRequired: false, transformFunction: null }, isHeightAuto: { classPropertyName: "isHeightAuto", publicName: "isHeightAuto", isSignal: true, isRequired: false, transformFunction: null }, customUploadImage: { classPropertyName: "customUploadImage", publicName: "customUploadImage", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, autoFocusBottom: { classPropertyName: "autoFocusBottom", publicName: "autoFocusBottom", isSignal: true, isRequired: false, transformFunction: null }, isShowToolBar: { classPropertyName: "isShowToolBar", publicName: "isShowToolBar", isSignal: true, isRequired: false, transformFunction: null }, classIncludeToolbar: { classPropertyName: "classIncludeToolbar", publicName: "classIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, onlyShowErrorBorderInContent: { classPropertyName: "onlyShowErrorBorderInContent", publicName: "onlyShowErrorBorderInContent", isSignal: true, isRequired: false, transformFunction: null }, functionUploadImage: { classPropertyName: "functionUploadImage", publicName: "functionUploadImage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outLabelError: "outLabelError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outFunctionsControl: "outFunctionsControl", outImagePaste: "outImagePaste", outSelectionChange: "outSelectionChange" }, viewQueries: [{ propertyName: "wrapperEditorEl", first: true, predicate: ["wrapperEditor"], descendants: true, isSignal: true }, { propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "quillOptionEl", first: true, predicate: ["quillOption"], descendants: true, isSignal: true }, { propertyName: "quillEditorEl", first: true, predicate: ["quillEditor"], descendants: true, isSignal: true }, { propertyName: "quillToolbarEl", first: true, predicate: ["quillToolbar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n      [required]=\"labelConfig.required\"\n      [labelLeft]=\"labelConfig.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.isHeightAuto]=\"isHeightAuto()\"\n    [attr.hiddenToolBar]=\"onlyShowContent()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageErr() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageErr() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageErr() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      @if (!onlyShowContent()) {\n        <div #quillOption\n          class=\"'ql-toolbar ql-snow bg-[#f8f9fa] {{ classIncludeToolbar() }}\">\n          <ng-container *ngTemplateOutlet=\"toolbarRef\"></ng-container>\n        </div>\n      }\n      <div #quillEditor></div>\n      <!-- MoLibsCoreUIMentionConfig\n       [mentionConfig]=\"dataConfigMention\"\n       (moToggle)=\"handleToggleMention($event)\"\n       (moInsertMention)=\"handlerInsertMention($event)\" -->\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageErr() && !ignoreShowErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageErr() | translate }}</span>\n    </div>\n  }\n</div>\n<div #quillToolbar\n  [class]=\"'ql-snow absolute px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation ' + classIncludeToolbar() + (isShowToolBar() ? ' block' : ' hidden')\">\n  <ng-container *ngTemplateOutlet=\"toolbarRef\"></ng-container>\n</div>\n\n<ng-template #toolbarRef>\n  <div class=\"toolbar\">\n    <div class=\"ql-formats items-center\">\n      @for (option of optionsToolbar(); track $index) {\n        <div class=\"flex items-center h-[32px] {{ option.styleGapItem ? option.styleGapItem : 'gap-4' }}\">\n          @if (option.undo) {\n            <button LibsUiComponentsPopoverDirective\n              [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n              class=\"ql-undo\"></button>\n          }\n          @if (option.redo) {\n            <button LibsUiComponentsPopoverDirective\n              [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n              class=\"ql-redo\"></button>\n          }\n          @if (option.fontFamily) {\n            <div class=\"relative w-[117px] h-full bg-[#ffffff] rounded-[4px] libs-ui-border-general\">\n              <libs_ui-components-dropdown [isNgContent]=\"true\"\n                [labelPopoverFullWidth]=\"true\"\n                [listConfig]=\"listConfigFont()\"\n                [listHasButtonUnSelectOption]=\"false\"\n                [listHiddenInputSearch]=\"true\"\n                [listMaxItemShow]=\"8\"\n                [zIndex]=\"1250\"\n                (outSelectKey)=\"handleSelectFont($event)\">\n                @if (fontSelected(); as fontSelected) {\n                  <div class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n                    <libs_ui-components-popover [type]=\"'text'\"\n                      [ignoreStopPropagationEvent]=\"true\"\n                      [config]=\"{zIndex:1250}\">\n                      {{ labelFontSelectedComputed() }}\n                    </libs_ui-components-popover>\n                    <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n                  </div>\n                }\n              </libs_ui-components-dropdown>\n            </div>\n          }\n          @if (option.fontSize) {\n            <div class=\"ql-picker\">\n              <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n                [(item)]=\"size\"\n                [fieldNameBind]=\"'value'\"\n                [defaultHeight]=\"32\"\n                [valueUpDownNumber]=\"1\"\n                [maxValueNumber]=\"72\"\n                [minValueNumber]=\"8\"\n                [readonly]=\"readonly()\"\n                [classContainerInput]=\"'w-[72px] h-[32px]'\"\n                (outValueChange)=\"handlerValueChange($event)\" />\n            </div>\n          }\n          @if (option.color) {\n            <div class=\"ql-color ql-picker ql-color-picker !flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n                <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n                  [externalContent]=\"true\"\n                  (outColorChange)=\"setStyle('color', $event)\">\n                  <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n                  </div>\n                </libs_ui-components-buttons-select_color>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.background) {\n            <div class=\"ql-background ql-picker ql-color-picker !flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n                <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n                  [externalContent]=\"true\"\n                  (outColorChange)=\"setStyle('background', $event)\">\n                  <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n                  </div>\n                </libs_ui-components-buttons-select_color>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.bold) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\">\n                <button class=\"ql-bold\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.italic) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n                class=\"ql-italic\"></button>\n            </div>\n          }\n          @if (option.underline) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n                class=\"ql-underline\"></button>\n            </div>\n          }\n          @if (option.strikeThrough) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n                class=\"ql-strike\"></button>\n            </div>\n          }\n          @if (option.adjust) {\n            <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n                <libs_ui-components-dropdown [isNgContent]=\"true\"\n                  [ignoreStopPropagationEvent]=\"true\"\n                  [labelPopoverFullWidth]=\"true\"\n                  [listConfig]=\"listConfigAlign()\"\n                  [listHiddenInputSearch]=\"true\"\n                  [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: 'w-[32px] overflow-hidden', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n                  [listHasButtonUnSelectOption]=\"false\"\n                  [listMaxItemShow]=\"8\"\n                  [zIndex]=\"1250\"\n                  (outSelectKey)=\"handleSelectAlign($event)\">\n                  @if (alignSelected(); as alignSelected) {\n                    <div class=\"flex items-center cursor-pointer\">\n                      <i [class]=\"iconAlignSelectedComputed()\"></i>\n                      <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n                    </div>\n                  }\n                </libs_ui-components-dropdown>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.indentIncrease) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n                class=\"ql-indent\"\n                value=\"+1\"></button>\n            </div>\n          }\n          @if (option.indentDecrease) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n                class=\"ql-indent\"\n                value=\"-1\"></button>\n            </div>\n          }\n          @if (option.listBulleted) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n                class=\"ql-list ql-bullet\"\n                value=\"bullet\"></button>\n            </div>\n          }\n          @if (option.listNumbered) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n                class=\"ql-list ql-ordered\"\n                value=\"ordered\"></button>\n            </div>\n          }\n          @if (option.personalize && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n            <div class=\"flex items-center\">\n              <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n            </div>\n          }\n          @if (option.blockquote) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_quote', zIndex:1250}\"\n                class=\"ql-blockquote\"></button>\n            </div>\n          }\n          @if (option.link) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_insert_link', zIndex:1250}\">\n                <button class=\"ql-link\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.unLink) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_unlink', zIndex:1250}\">\n                <button class=\"ql-unLink\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.image && customUploadImage().showIconUploadImage) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_image', zIndex:1250}\">\n                <button class=\"ql-image\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.emoji) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-emoji [zIndex]=\"1250\"\n                [isNgContent]=\"true\"\n                (outEventEmoji)=\"handlerAddEmoji($event)\">\n                <button class=\"ql-emoji\"></button>\n              </libs_ui-components-emoji>\n            </div>\n          }\n        </div>\n        @if (!$last) {\n          <div class=\"w-[1px] h-[16px] libs-ui-border-right-general mx-[8px]\"></div>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[isHeightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[hiddenToolBar=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex;flex-wrap:wrap}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "moFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsQuillComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill", inputs: { optionsToolbar: { classPropertyName: "optionsToolbar", publicName: "optionsToolbar", isSignal: true, isRequired: false, transformFunction: null }, showToolBar: { classPropertyName: "showToolBar", publicName: "showToolBar", isSignal: true, isRequired: false, transformFunction: null }, classIncludeToolbar: { classPropertyName: "classIncludeToolbar", publicName: "classIncludeToolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, fieldNameBind: { classPropertyName: "fieldNameBind", publicName: "fieldNameBind", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null }, onlyShowErrorBorderInContent: { classPropertyName: "onlyShowErrorBorderInContent", publicName: "onlyShowErrorBorderInContent", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTemplate: { classPropertyName: "classIncludeTemplate", publicName: "classIncludeTemplate", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, onlyShowContent: { classPropertyName: "onlyShowContent", publicName: "onlyShowContent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, dataConfigMention: { classPropertyName: "dataConfigMention", publicName: "dataConfigMention", isSignal: true, isRequired: false, transformFunction: null }, heightAuto: { classPropertyName: "heightAuto", publicName: "heightAuto", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, autoFocusBottom: { classPropertyName: "autoFocusBottom", publicName: "autoFocusBottom", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outFunctionsControl: "outFunctionsControl", outSelectionChange: "outSelectionChange" }, viewQueries: [{ propertyName: "wrapperEditorEl", first: true, predicate: ["wrapperEditor"], descendants: true, isSignal: true }, { propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, isSignal: true }, { propertyName: "quillOptionEl", first: true, predicate: ["quillOption"], descendants: true, isSignal: true }, { propertyName: "quillEditorEl", first: true, predicate: ["quillEditor"], descendants: true, isSignal: true }, { propertyName: "quillToolbarEl", first: true, predicate: ["quillToolbar"], descendants: true, isSignal: true }, { propertyName: "toolbarItemsEl", first: true, predicate: ["toolbarItems"], descendants: true, isSignal: true }, { propertyName: "itemsEl", predicate: ["item"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.hiddenToolBar]=\"onlyShowContent()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      @if (!onlyShowContent()) {\n        <div #quillOption\n          class=\"'ql-toolbar ql-snow bg-[#f8f9fa] {{ classIncludeToolbar() }}\">\n          <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n        </div>\n      }\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [mentionConfig]=\"dataConfigMention()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n@if (showToolBar()) {\n  <div #quillToolbar\n    [class]=\"'ql-snow absolute px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation ' + classIncludeToolbar()\">\n    <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n  </div>\n}\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of optionsToolbar(); track option) {\n        <div #item\n          class=\"items-center\"\n          [class.hidden]=\"!itemShow().includes($index)\"\n          [class.flex]=\"itemShow().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n          [iconOnlyType]=\"true\"\n          [classInclude]=\"'!p-[1px] !h-[20px]'\"\n          [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n          (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        <div [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] top-[10px] shadow-md z-[1] flex items-center px-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of optionsToolbar(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"itemShow().includes($index)\"\n              [class.flex]=\"!itemShow().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  <div class=\"flex items-center h-[32px] {{ option.styleGapItem ? option.styleGapItem : 'gap-4' }}\">\n    @if (option.undo) {\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    }\n    @if (option.redo) {\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    }\n    @if (option.fontFamily) {\n      <div class=\"relative w-[117px] h-full bg-[#ffffff] rounded-[4px] libs-ui-border-general\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigFont()\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listHiddenInputSearch]=\"true\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectFont($event)\">\n          @if (fontSelected(); as fontSelected) {\n            <div class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n              <libs_ui-components-popover [type]=\"'text'\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [config]=\"{zIndex:1250}\">\n                {{ labelFontSelectedComputed() }}\n              </libs_ui-components-popover>\n              <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </div>\n    }\n    @if (option.fontSize) {\n      <div class=\"ql-picker\">\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [(item)]=\"size\"\n          [fieldNameBind]=\"'value'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"72\"\n          [minValueNumber]=\"8\"\n          [readonly]=\"readonly()\"\n          [classContainerInput]=\"'w-[72px] h-[32px]'\"\n          (outValueChange)=\"handlerValueChange($event)\" />\n      </div>\n    }\n    @if (option.color) {\n      <div class=\"ql-color ql-picker ql-color-picker !flex items-center\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n          <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n            [direction]=\"'top'\"\n            [externalContent]=\"true\"\n            [applyNow]=\"true\"\n            (outColorChange)=\"setStyle('color', $event)\">\n            <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n            </div>\n          </libs_ui-components-buttons-select_color>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.background) {\n      <div class=\"ql-background ql-picker ql-color-picker !flex items-center\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n          <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n            [direction]=\"'top'\"\n            [externalContent]=\"true\"\n            [applyNow]=\"true\"\n            (outColorChange)=\"setStyle('background', $event)\">\n            <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n            </div>\n          </libs_ui-components-buttons-select_color>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.bold) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n          class=\"ql-bold\"></button>\n      </div>\n    }\n    @if (option.italic) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n          class=\"ql-italic\"></button>\n      </div>\n    }\n    @if (option.underline) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n          class=\"ql-underline\"></button>\n      </div>\n    }\n    @if (option.strikeThrough) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n          class=\"ql-strike\"></button>\n      </div>\n    }\n    @if (option.adjust) {\n      <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n          <libs_ui-components-dropdown [isNgContent]=\"true\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [labelPopoverFullWidth]=\"true\"\n            [listConfig]=\"listConfigAlign()\"\n            [listHiddenInputSearch]=\"true\"\n            [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n            [listHasButtonUnSelectOption]=\"false\"\n            [listMaxItemShow]=\"8\"\n            [zIndex]=\"1250\"\n            (outSelectKey)=\"handleSelectAlign($event)\">\n            @if (alignSelected(); as alignSelected) {\n              <div class=\"flex items-center cursor-pointer\">\n                <i [class]=\"iconAlignSelectedComputed()\"></i>\n                <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n              </div>\n            }\n          </libs_ui-components-dropdown>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.indentIncrease) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n          class=\"ql-indent\"\n          value=\"+1\"></button>\n      </div>\n    }\n    @if (option.indentDecrease) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n          class=\"ql-indent\"\n          value=\"-1\"></button>\n      </div>\n    }\n    @if (option.listBulleted) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n          class=\"ql-list ql-bullet\"\n          value=\"bullet\"></button>\n      </div>\n    }\n    @if (option.listNumbered) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n          class=\"ql-list ql-ordered\"\n          value=\"ordered\"></button>\n      </div>\n    }\n    @if (option.personalize && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n      </div>\n    }\n    @if (option.blockquote) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_quote', zIndex:1250}\"\n          class=\"ql-blockquote\"></button>\n      </div>\n    }\n    @if (option.link) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n          class=\"ql-link\"></button>\n      </div>\n    }\n    @if (option.unLink) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n          class=\"ql-unLink\"></button>\n      </div>\n    }\n    @if (option.image && uploadImageConfig().showIcon) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_image', zIndex:1250}\"\n          class=\"ql-image\"></button>\n      </div>\n    }\n    @if (option.emoji) {\n      <div class=\"flex items-center\">\n        <libs_ui-components-emoji [zIndex]=\"1250\"\n          [isNgContent]=\"true\"\n          (outEventEmoji)=\"handlerAddEmoji($event)\">\n          <button class=\"ql-emoji\"></button>\n        </libs_ui-components-emoji>\n      </div>\n    }\n  </div>\n  @if (!$last) {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general mx-[8px]\"></div>\n  }\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[hiddenToolBar=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip[data-mode=link]:before{content:var(--libs-ui-quill-tool-edit-link, \"Enter link:\")}:host ::ng-deep .ql-tooltip{border:1px solid #e6e7ea!important;border-radius:4px;display:flex;align-items:center;padding:8px 16px;color:#6a7383}:host ::ng-deep .ql-tooltip a{color:var(--libs-ui-color-light-1)!important;font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px;padding-top:4px;padding-bottom:4px}:host ::ng-deep .ql-tooltip:before{content:var(--libs-ui-quill-tool-link, \"Link:\")}:host ::ng-deep .ql-tooltip .ql-action:after{border-right:1px solid #e6e7ea;content:var(--libs-ui-quill-tool-link-action, \"Edit\")!important}:host ::ng-deep .ql-tooltip .ql-remove:before{content:var(--libs-ui-quill-tool-link-remove, \"Delete\")!important;color:#ee2d41}:host ::ng-deep .ql-tooltip input{max-width:100%;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400;font-size:12px;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px;border:1px solid #e6e7ea;border-radius:4px}:host ::ng-deep .ql-tooltip input:focus{outline:none}:host ::ng-deep .ql-tooltip input:focus:not(:read-only):not(:disabled){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}:host ::ng-deep .ql-editing .ql-action:after{content:var(--libs-ui-quill-tool-link-save, \"Save\")!important}:host ::ng-deep .ql-hidden{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LibsUiComponentsInputsMentionDirective, selector: "[LibsUiComponentsInputsMentionDirective]", inputs: ["mentionConfig", "mentionListTemplate"], outputs: ["outSearchTerm", "outItemSelected", "outToggle", "outInsertMention", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "moFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsQuillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-inputs-quill', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        TranslateModule, NgTemplateOutlet,
+                        TranslateModule, NgTemplateOutlet, LibsUiComponentsInputsMentionDirective,
                         LibsUiComponentsLabelComponent, LibsUiComponentsDropdownComponent,
                         LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsSelectColorComponent,
-                        LibsUiComponentsInputsValidComponent, LibsUiComponentsEmojiComponent
-                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [classInclude]=\"labelConfig.classInclude\"\n      [required]=\"labelConfig.required\"\n      [labelLeft]=\"labelConfig.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.isHeightAuto]=\"isHeightAuto()\"\n    [attr.hiddenToolBar]=\"onlyShowContent()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageErr() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageErr() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageErr() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      @if (!onlyShowContent()) {\n        <div #quillOption\n          class=\"'ql-toolbar ql-snow bg-[#f8f9fa] {{ classIncludeToolbar() }}\">\n          <ng-container *ngTemplateOutlet=\"toolbarRef\"></ng-container>\n        </div>\n      }\n      <div #quillEditor></div>\n      <!-- MoLibsCoreUIMentionConfig\n       [mentionConfig]=\"dataConfigMention\"\n       (moToggle)=\"handleToggleMention($event)\"\n       (moInsertMention)=\"handlerInsertMention($event)\" -->\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageErr() && !ignoreShowErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageErr() | translate }}</span>\n    </div>\n  }\n</div>\n<div #quillToolbar\n  [class]=\"'ql-snow absolute px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation ' + classIncludeToolbar() + (isShowToolBar() ? ' block' : ' hidden')\">\n  <ng-container *ngTemplateOutlet=\"toolbarRef\"></ng-container>\n</div>\n\n<ng-template #toolbarRef>\n  <div class=\"toolbar\">\n    <div class=\"ql-formats items-center\">\n      @for (option of optionsToolbar(); track $index) {\n        <div class=\"flex items-center h-[32px] {{ option.styleGapItem ? option.styleGapItem : 'gap-4' }}\">\n          @if (option.undo) {\n            <button LibsUiComponentsPopoverDirective\n              [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n              class=\"ql-undo\"></button>\n          }\n          @if (option.redo) {\n            <button LibsUiComponentsPopoverDirective\n              [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n              class=\"ql-redo\"></button>\n          }\n          @if (option.fontFamily) {\n            <div class=\"relative w-[117px] h-full bg-[#ffffff] rounded-[4px] libs-ui-border-general\">\n              <libs_ui-components-dropdown [isNgContent]=\"true\"\n                [labelPopoverFullWidth]=\"true\"\n                [listConfig]=\"listConfigFont()\"\n                [listHasButtonUnSelectOption]=\"false\"\n                [listHiddenInputSearch]=\"true\"\n                [listMaxItemShow]=\"8\"\n                [zIndex]=\"1250\"\n                (outSelectKey)=\"handleSelectFont($event)\">\n                @if (fontSelected(); as fontSelected) {\n                  <div class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n                    <libs_ui-components-popover [type]=\"'text'\"\n                      [ignoreStopPropagationEvent]=\"true\"\n                      [config]=\"{zIndex:1250}\">\n                      {{ labelFontSelectedComputed() }}\n                    </libs_ui-components-popover>\n                    <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n                  </div>\n                }\n              </libs_ui-components-dropdown>\n            </div>\n          }\n          @if (option.fontSize) {\n            <div class=\"ql-picker\">\n              <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n                [(item)]=\"size\"\n                [fieldNameBind]=\"'value'\"\n                [defaultHeight]=\"32\"\n                [valueUpDownNumber]=\"1\"\n                [maxValueNumber]=\"72\"\n                [minValueNumber]=\"8\"\n                [readonly]=\"readonly()\"\n                [classContainerInput]=\"'w-[72px] h-[32px]'\"\n                (outValueChange)=\"handlerValueChange($event)\" />\n            </div>\n          }\n          @if (option.color) {\n            <div class=\"ql-color ql-picker ql-color-picker !flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n                <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n                  [externalContent]=\"true\"\n                  (outColorChange)=\"setStyle('color', $event)\">\n                  <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n                  </div>\n                </libs_ui-components-buttons-select_color>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.background) {\n            <div class=\"ql-background ql-picker ql-color-picker !flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n                <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n                  [externalContent]=\"true\"\n                  (outColorChange)=\"setStyle('background', $event)\">\n                  <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n                  </div>\n                </libs_ui-components-buttons-select_color>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.bold) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\">\n                <button class=\"ql-bold\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.italic) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n                class=\"ql-italic\"></button>\n            </div>\n          }\n          @if (option.underline) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n                class=\"ql-underline\"></button>\n            </div>\n          }\n          @if (option.strikeThrough) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n                class=\"ql-strike\"></button>\n            </div>\n          }\n          @if (option.adjust) {\n            <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n                <libs_ui-components-dropdown [isNgContent]=\"true\"\n                  [ignoreStopPropagationEvent]=\"true\"\n                  [labelPopoverFullWidth]=\"true\"\n                  [listConfig]=\"listConfigAlign()\"\n                  [listHiddenInputSearch]=\"true\"\n                  [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: 'w-[32px] overflow-hidden', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n                  [listHasButtonUnSelectOption]=\"false\"\n                  [listMaxItemShow]=\"8\"\n                  [zIndex]=\"1250\"\n                  (outSelectKey)=\"handleSelectAlign($event)\">\n                  @if (alignSelected(); as alignSelected) {\n                    <div class=\"flex items-center cursor-pointer\">\n                      <i [class]=\"iconAlignSelectedComputed()\"></i>\n                      <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n                    </div>\n                  }\n                </libs_ui-components-dropdown>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.indentIncrease) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n                class=\"ql-indent\"\n                value=\"+1\"></button>\n            </div>\n          }\n          @if (option.indentDecrease) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n                class=\"ql-indent\"\n                value=\"-1\"></button>\n            </div>\n          }\n          @if (option.listBulleted) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n                class=\"ql-list ql-bullet\"\n                value=\"bullet\"></button>\n            </div>\n          }\n          @if (option.listNumbered) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n                class=\"ql-list ql-ordered\"\n                value=\"ordered\"></button>\n            </div>\n          }\n          @if (option.personalize && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n            <div class=\"flex items-center\">\n              <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n            </div>\n          }\n          @if (option.blockquote) {\n            <div class=\"flex items-center\">\n              <button LibsUiComponentsPopoverDirective\n                [config]=\"{content:'i18n_quote', zIndex:1250}\"\n                class=\"ql-blockquote\"></button>\n            </div>\n          }\n          @if (option.link) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_insert_link', zIndex:1250}\">\n                <button class=\"ql-link\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.unLink) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_unlink', zIndex:1250}\">\n                <button class=\"ql-unLink\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.image && customUploadImage().showIconUploadImage) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-popover [config]=\"{content:'i18n_image', zIndex:1250}\">\n                <button class=\"ql-image\"></button>\n              </libs_ui-components-popover>\n            </div>\n          }\n          @if (option.emoji) {\n            <div class=\"flex items-center\">\n              <libs_ui-components-emoji [zIndex]=\"1250\"\n                [isNgContent]=\"true\"\n                (outEventEmoji)=\"handlerAddEmoji($event)\">\n                <button class=\"ql-emoji\"></button>\n              </libs_ui-components-emoji>\n            </div>\n          }\n        </div>\n        @if (!$last) {\n          <div class=\"w-[1px] h-[16px] libs-ui-border-right-general mx-[8px]\"></div>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[isHeightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[isHeightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[hiddenToolBar=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex;flex-wrap:wrap}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
+                        LibsUiComponentsInputsValidComponent, LibsUiComponentsEmojiComponent,
+                        LibsUiComponentsButtonsButtonComponent
+                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.hiddenToolBar]=\"onlyShowContent()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      @if (!onlyShowContent()) {\n        <div #quillOption\n          class=\"'ql-toolbar ql-snow bg-[#f8f9fa] {{ classIncludeToolbar() }}\">\n          <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n        </div>\n      }\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [mentionConfig]=\"dataConfigMention()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n@if (showToolBar()) {\n  <div #quillToolbar\n    [class]=\"'ql-snow absolute px-[8px] py-[4px] p-0 w-[500px] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation ' + classIncludeToolbar()\">\n    <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n  </div>\n}\n\n<ng-template #toolbar>\n  <div class=\"toolbar\"\n    #toolbarItems>\n    <div class=\"ql-formats items-center\">\n      @for (option of optionsToolbar(); track option) {\n        <div #item\n          class=\"items-center\"\n          [class.hidden]=\"!itemShow().includes($index)\"\n          [class.flex]=\"itemShow().includes($index)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n          [iconOnlyType]=\"true\"\n          [classInclude]=\"'!p-[1px] !h-[20px]'\"\n          [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n          (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        <div [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] top-[10px] shadow-md z-[1] flex items-center px-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of optionsToolbar(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"itemShow().includes($index)\"\n              [class.flex]=\"!itemShow().includes($index)\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  <div class=\"flex items-center h-[32px] {{ option.styleGapItem ? option.styleGapItem : 'gap-4' }}\">\n    @if (option.undo) {\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: 1250}\"\n        class=\"ql-undo\"></button>\n    }\n    @if (option.redo) {\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: 1250}\"\n        class=\"ql-redo\"></button>\n    }\n    @if (option.fontFamily) {\n      <div class=\"relative w-[117px] h-full bg-[#ffffff] rounded-[4px] libs-ui-border-general\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigFont()\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listHiddenInputSearch]=\"true\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectFont($event)\">\n          @if (fontSelected(); as fontSelected) {\n            <div class=\"flex items-center cursor-pointer py-[8px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n              <libs_ui-components-popover [type]=\"'text'\"\n                [ignoreStopPropagationEvent]=\"true\"\n                [config]=\"{zIndex:1250}\">\n                {{ labelFontSelectedComputed() }}\n              </libs_ui-components-popover>\n              <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </div>\n    }\n    @if (option.fontSize) {\n      <div class=\"ql-picker\">\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [(item)]=\"size\"\n          [fieldNameBind]=\"'value'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"72\"\n          [minValueNumber]=\"8\"\n          [readonly]=\"readonly()\"\n          [classContainerInput]=\"'w-[72px] h-[32px]'\"\n          (outValueChange)=\"handlerValueChange($event)\" />\n      </div>\n    }\n    @if (option.color) {\n      <div class=\"ql-color ql-picker ql-color-picker !flex items-center\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:1250}\">\n          <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n            [direction]=\"'top'\"\n            [externalContent]=\"true\"\n            [applyNow]=\"true\"\n            (outColorChange)=\"setStyle('color', $event)\">\n            <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n            </div>\n          </libs_ui-components-buttons-select_color>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.background) {\n      <div class=\"ql-background ql-picker ql-color-picker !flex items-center\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex:1250}\">\n          <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n            [direction]=\"'top'\"\n            [externalContent]=\"true\"\n            [applyNow]=\"true\"\n            (outColorChange)=\"setStyle('background', $event)\">\n            <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n            </div>\n          </libs_ui-components-buttons-select_color>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.bold) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_font_weight_bold', zIndex:1250}\"\n          class=\"ql-bold\"></button>\n      </div>\n    }\n    @if (option.italic) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_font_style_italic', zIndex:1250}\"\n          class=\"ql-italic\"></button>\n      </div>\n    }\n    @if (option.underline) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_text_decoration_underline', zIndex:1250}\"\n          class=\"ql-underline\"></button>\n      </div>\n    }\n    @if (option.strikeThrough) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_text_line_through', zIndex:1250}\"\n          class=\"ql-strike\"></button>\n      </div>\n    }\n    @if (option.adjust) {\n      <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max\">\n        <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex:1250}\">\n          <libs_ui-components-dropdown [isNgContent]=\"true\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [labelPopoverFullWidth]=\"true\"\n            [listConfig]=\"listConfigAlign()\"\n            [listHiddenInputSearch]=\"true\"\n            [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n            [listHasButtonUnSelectOption]=\"false\"\n            [listMaxItemShow]=\"8\"\n            [zIndex]=\"1250\"\n            (outSelectKey)=\"handleSelectAlign($event)\">\n            @if (alignSelected(); as alignSelected) {\n              <div class=\"flex items-center cursor-pointer\">\n                <i [class]=\"iconAlignSelectedComputed()\"></i>\n                <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n              </div>\n            }\n          </libs_ui-components-dropdown>\n        </libs_ui-components-popover>\n      </div>\n    }\n    @if (option.indentIncrease) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_indent_increase', zIndex:1250}\"\n          class=\"ql-indent\"\n          value=\"+1\"></button>\n      </div>\n    }\n    @if (option.indentDecrease) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_indent_decrease', zIndex:1250}\"\n          class=\"ql-indent\"\n          value=\"-1\"></button>\n      </div>\n    }\n    @if (option.listBulleted) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_list_bulleted', zIndex:1250}\"\n          class=\"ql-list ql-bullet\"\n          value=\"bullet\"></button>\n      </div>\n    }\n    @if (option.listNumbered) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_list_numbered', zIndex:1250}\"\n          class=\"ql-list ql-ordered\"\n          value=\"ordered\"></button>\n      </div>\n    }\n    @if (option.personalize && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n      <div class=\"flex items-center\">\n        <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n      </div>\n    }\n    @if (option.blockquote) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_quote', zIndex:1250}\"\n          class=\"ql-blockquote\"></button>\n      </div>\n    }\n    @if (option.link) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_insert_link', zIndex:1250}\"\n          class=\"ql-link\"></button>\n      </div>\n    }\n    @if (option.unLink) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_unlink', zIndex:1250}\"\n          class=\"ql-unLink\"></button>\n      </div>\n    }\n    @if (option.image && uploadImageConfig().showIcon) {\n      <div class=\"flex items-center\">\n        <button LibsUiComponentsPopoverDirective\n          [config]=\"{content:'i18n_image', zIndex:1250}\"\n          class=\"ql-image\"></button>\n      </div>\n    }\n    @if (option.emoji) {\n      <div class=\"flex items-center\">\n        <libs_ui-components-emoji [zIndex]=\"1250\"\n          [isNgContent]=\"true\"\n          (outEventEmoji)=\"handlerAddEmoji($event)\">\n          <button class=\"ql-emoji\"></button>\n        </libs_ui-components-emoji>\n      </div>\n    }\n  </div>\n  @if (!$last) {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general mx-[8px]\"></div>\n  }\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true]{overflow:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[hiddenToolBar=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[hiddenToolBar=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:4px 16px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip[data-mode=link]:before{content:var(--libs-ui-quill-tool-edit-link, \"Enter link:\")}:host ::ng-deep .ql-tooltip{border:1px solid #e6e7ea!important;border-radius:4px;display:flex;align-items:center;padding:8px 16px;color:#6a7383}:host ::ng-deep .ql-tooltip a{color:var(--libs-ui-color-light-1)!important;font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px;padding-top:4px;padding-bottom:4px}:host ::ng-deep .ql-tooltip:before{content:var(--libs-ui-quill-tool-link, \"Link:\")}:host ::ng-deep .ql-tooltip .ql-action:after{border-right:1px solid #e6e7ea;content:var(--libs-ui-quill-tool-link-action, \"Edit\")!important}:host ::ng-deep .ql-tooltip .ql-remove:before{content:var(--libs-ui-quill-tool-link-remove, \"Delete\")!important;color:#ee2d41}:host ::ng-deep .ql-tooltip input{max-width:100%;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400;font-size:12px;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px;border:1px solid #e6e7ea;border-radius:4px}:host ::ng-deep .ql-tooltip input:focus{outline:none}:host ::ng-deep .ql-tooltip input:focus:not(:read-only):not(:disabled){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}:host ::ng-deep .ql-editing .ql-action:after{content:var(--libs-ui-quill-tool-link-save, \"Save\")!important}:host ::ng-deep .ql-hidden{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
         }] });
 
 /**