@libs-ui/components-inputs-quill 0.2.305 → 0.2.306-3

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

@@ -557,6 +557,7 @@ const linkDefault = () => {
     };
 };
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 class LibsUiComponentsInputsQuillComponent {
     qlEditorElement = signal(undefined);
     timeoutScrollToSelectionWithElementScrollHeightAuto = signal(undefined);
@@ -577,8 +578,8 @@ class LibsUiComponentsInputsQuillComponent {
     showMoreAction = signal(false);
     link = signal(linkDefault());
     toolbarOptionsConfig = signal([]);
-    displayShowMoreToolbar = computed(() => this.toolbarOptionsConfig().some(item => item.display === false));
-    displaySkeleton = computed(() => this.toolbarOptionsConfig().every(item => item.display === undefined));
+    displayShowMoreToolbar = computed(() => this.toolbarOptionsConfig().some((item) => item.display === false));
+    displaySkeleton = computed(() => this.toolbarOptionsConfig().every((item) => item.display === undefined));
     timeCalculationToolBar = signal(undefined);
     popoverFunctionControl = signal(undefined);
     quill = signal(undefined);
@@ -589,8 +590,8 @@ class LibsUiComponentsInputsQuillComponent {
     onDestroy = new Subject();
     dynamicComponentService = inject(LibsUiDynamicComponentService);
     translate = inject(TranslateService);
-    isShowToolBar = input(true, { transform: val => val ?? true });
-    isToolbarPositionFixed = input(false, { transform: val => val ?? false });
+    isShowToolBar = input(true, { transform: (val) => val ?? true });
+    isToolbarPositionFixed = input(false, { transform: (val) => val ?? false });
     classIncludeToolbar = input('');
     stylesIncludeToolbar = input();
     toolbarConfig = input();
@@ -642,11 +643,14 @@ class LibsUiComponentsInputsQuillComponent {
     constructor() {
         effect(() => {
             setTimeout(() => {
-                const classes = `${this.classInclude() || ''} h-full w-full`.split(' ').map(item => item.trim()).filter(item => item);
+                const classes = `${this.classInclude() || ''} h-full w-full`
+                    .split(' ')
+                    .map((item) => item.trim())
+                    .filter((item) => item);
                 this.getQlEditorElement()?.classList.add(...classes);
             }, this.timeDelayInit() + 10);
         });
-        effect((() => {
+        effect(() => {
             const type = this.toolbarConfig()?.type || 'default';
             const hasIconImage = this.uploadImageConfig().showIcon ?? false;
             const hasIconPersonalize = !!this.templateToolBarPersonalize();
@@ -655,7 +659,7 @@ class LibsUiComponentsInputsQuillComponent {
                 this.cdr.detectChanges();
                 this.calculatorToolbar();
             });
-        }));
+        });
     }
     ngOnInit() {
         this.outFunctionsControl.emit({
@@ -676,7 +680,7 @@ class LibsUiComponentsInputsQuillComponent {
                 this.scrollToSelectionWithElementScrollHeightAuto(range.indexSelect);
                 return;
             },
-            reCalculatorToolbar: this.calculatorToolbar.bind(this)
+            reCalculatorToolbar: this.calculatorToolbar.bind(this),
         });
     }
     async ngAfterViewInit() {
@@ -707,7 +711,73 @@ class LibsUiComponentsInputsQuillComponent {
         const icons = Quill.import('ui/icons');
         const italic = Quill.import('formats/italic');
         const bold = Quill.import('formats/bold');
-        size.whitelist = ['8px', '9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '21px', '22px', '23px', '24px', '25px', '26px', '27px', '28px', '29px', '30px', '31px', '32px', '33px', '34px', '35px', '36px', '37px', '38px', '39px', '40px', '41px', '42px', '43px', '44px', '45px', '46px', '47px', '48px', '49px', '50px', '51px', '52px', '53px', '54px', '55px', '56px', '57px', '58px', '59px', '60px', '61px', '62px', '63px', '64px', '65px', '66px', '67px', '68px', '69px', '70px', '71px', '72px'];
+        size.whitelist = [
+            '8px',
+            '9px',
+            '10px',
+            '11px',
+            '12px',
+            '13px',
+            '14px',
+            '15px',
+            '16px',
+            '17px',
+            '18px',
+            '19px',
+            '20px',
+            '21px',
+            '22px',
+            '23px',
+            '24px',
+            '25px',
+            '26px',
+            '27px',
+            '28px',
+            '29px',
+            '30px',
+            '31px',
+            '32px',
+            '33px',
+            '34px',
+            '35px',
+            '36px',
+            '37px',
+            '38px',
+            '39px',
+            '40px',
+            '41px',
+            '42px',
+            '43px',
+            '44px',
+            '45px',
+            '46px',
+            '47px',
+            '48px',
+            '49px',
+            '50px',
+            '51px',
+            '52px',
+            '53px',
+            '54px',
+            '55px',
+            '56px',
+            '57px',
+            '58px',
+            '59px',
+            '60px',
+            '61px',
+            '62px',
+            '63px',
+            '64px',
+            '65px',
+            '66px',
+            '67px',
+            '68px',
+            '69px',
+            '70px',
+            '71px',
+            '72px',
+        ];
         italic.tagName = 'i';
         bold.tagName = 'b';
         Quill.register(bold, true);
@@ -717,40 +787,42 @@ class LibsUiComponentsInputsQuillComponent {
         Quill.register(QuillDivBlot, true);
         Quill.register(alignStyle, true);
         Quill.register(QuillMentionBlot, true);
-        this.blotsRegister()?.forEach(item => {
+        this.blotsRegister()?.forEach((item) => {
             Quill.register(item.component, true);
         });
         Quill.register({ 'formats/indent': indentStyle }, true);
-        fromEvent(this.quillEditorEl()?.nativeElement, 'contextmenu').pipe(takeUntil(this.onDestroy)).subscribe(e => this.outContextMenu.emit(e));
-        iconList().forEach(element => set(icons, element.key, `<span class="${element.icon} hover:text-[var(--libs-ui-color-light-1)] text-[16px] text-[#6a7383]"></span>`));
+        fromEvent(this.quillEditorEl()?.nativeElement, 'contextmenu')
+            .pipe(takeUntil(this.onDestroy))
+            .subscribe((e) => this.outContextMenu.emit(e));
+        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: {
                     container: this.quillOptionEl()?.nativeElement,
-                    handlers: this.handlers()
+                    handlers: this.handlers(),
                 },
                 clipboard: {
-                    matchVisual: false
+                    matchVisual: false,
                 },
                 history: {
                     delay: 1000,
                     maxStack: 100,
-                    userOnly: false
+                    userOnly: false,
                 },
                 keyboard: {
                     bindings: {
                         enter: {
                             key: 13,
-                            handler: () => this.showMention() ? false : true
-                        }
-                    }
-                }
+                            handler: () => (this.showMention() ? false : true),
+                        },
+                    },
+                },
             },
             readOnly: this.readonly(),
             placeholder: this.translate.instant(this.placeholder()),
             theme: 'snow',
             bounds: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : this.quillEditorEl()?.nativeElement,
-            scrollingContainer: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : null
+            scrollingContainer: this.heightAuto() ? this.wrapperEditorEl()?.nativeElement : null,
         }));
         this.quill()?.keyboard.addBinding({ key: 'Backspace' }, this.noPreventEmbedDeletion.bind(this));
         this.quill()?.keyboard.addBinding({ key: 'Delete' }, this.noPreventEmbedDeletion.bind(this));
@@ -761,8 +833,7 @@ class LibsUiComponentsInputsQuillComponent {
         if (editorRoot && this.blockUndoRedoKeyboard()) {
             const keydownHandler = (e) => {
                 const isUndo = (e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey) && !e.shiftKey;
-                const isRedo = ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey) && e.shiftKey) ||
-                    ((e.key === 'y' || e.key === 'Y') && e.ctrlKey);
+                const isRedo = ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey) && e.shiftKey) || ((e.key === 'y' || e.key === 'Y') && e.ctrlKey);
                 if (isUndo || isRedo) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -779,27 +850,33 @@ class LibsUiComponentsInputsQuillComponent {
         if (!this.quill())
             return false;
         const delta = this.quill()?.getContents(range.index, 1);
-        if (delta?.ops.some(option => this.blotsRegister()?.find(item => get(option.insert, item.component['blotName']) && item.ignoreDelete))) {
+        if (delta?.ops.some((option) => this.blotsRegister()?.find((item) => get(option.insert, item.component['blotName']) && item.ignoreDelete))) {
             return false; // Ngăn không cho Quill xử lý xóa
         }
         return true;
     }
     setHandlerFunction() {
-        this.handlers.update(item => ({ ...item, image: this.handlerShowUploadImage.bind(this), emoji: () => { return; } }));
+        this.handlers.update((item) => ({
+            ...item,
+            image: this.handlerShowUploadImage.bind(this),
+            emoji: () => {
+                return;
+            },
+        }));
         let link = false;
         const handlersExpand = this.handlersExpand();
         if (handlersExpand && handlersExpand.length) {
-            handlersExpand.forEach(element => {
+            handlersExpand.forEach((element) => {
                 if (element.title && element.action) {
                     if (element.title === 'link') {
                         link = true;
                     }
-                    this.handlers.update(item => ({ ...item, [element.title]: element.action }));
+                    this.handlers.update((item) => ({ ...item, [element.title]: element.action }));
                 }
             });
         }
         if (!link) {
-            this.handlers.update(item => ({ ...item, link: this.handleShowUploadLink.bind(this), unLink: this.handlerUnInsertLink.bind(this) }));
+            this.handlers.update((item) => ({ ...item, link: this.handleShowUploadLink.bind(this), unLink: this.handlerUnInsertLink.bind(this) }));
         }
     }
     adjustIndexForImages(index) {
@@ -827,7 +904,6 @@ class LibsUiComponentsInputsQuillComponent {
         adjustTextIndex(content);
         return imageCount;
     }
-    ;
     handlerSelectionChange() {
         this.quill()?.on('selection-change', (range, oldRange, source) => {
             if (this.readonly()) {
@@ -850,7 +926,7 @@ class LibsUiComponentsInputsQuillComponent {
                 quill: this.quill(),
                 range,
                 oldRange,
-                source
+                source,
             });
             if (range.length === 0 && format?.link && source === 'user') {
                 const selection = document.getSelection();
@@ -885,8 +961,8 @@ class LibsUiComponentsInputsQuillComponent {
                                 url: linkNode.href,
                                 range: {
                                     index: rangeIndex + countImage,
-                                    length: linkText.length
-                                }
+                                    length: linkText.length,
+                                },
                             });
                             this.popoverFunctionControl()?.showPopover(linkNode);
                         }, 250);
@@ -915,7 +991,7 @@ class LibsUiComponentsInputsQuillComponent {
         this.quill()?.on('text-change', (event) => {
             this.outTextChange.emit({
                 quill: this.quill(),
-                delta: event
+                delta: event,
             });
             setTimeout(() => {
                 if (event?.ops[1]?.insert === '\n') {
@@ -974,7 +1050,7 @@ class LibsUiComponentsInputsQuillComponent {
                         return;
                     }
                     this.insertLink(linkEdit.title, linkEdit.link);
-                }
+                },
             });
             return;
         }
@@ -986,7 +1062,7 @@ class LibsUiComponentsInputsQuillComponent {
         this.timeCalculationToolBar.set(setTimeout(() => {
             const toolbarWidth = this.toolbarItemsEl().nativeElement.offsetWidth || 0;
             let totalWidth = 32 + 28;
-            this.toolbarOptionsConfig.update(configs => {
+            this.toolbarOptionsConfig.update((configs) => {
                 configs.forEach((item, index) => {
                     item.display = true;
                     totalWidth += item.width;
@@ -1146,9 +1222,9 @@ class LibsUiComponentsInputsQuillComponent {
             { selector: '.ql-font-Helvetica', style: 'font-family: Helvetica' },
             { selector: '.libs-ui-quill-format-image', style: 'max-width: 100%; height: auto', overrideStyle: true },
             { selector: '.libs-ui-quill-mention', style: 'font-weight: 600;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; color: #7239EA', overrideStyle: true },
-            { selector: 'blockquote', style: 'border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px', overrideStyle: true }
+            { selector: 'blockquote', style: 'border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px', overrideStyle: true },
         ];
-        this.blotsRegister()?.forEach(item => {
+        this.blotsRegister()?.forEach((item) => {
             styleArray.push({ selector: `.${item.className}`, style: item.style, overrideStyle: true });
         });
         styleArray.forEach((item) => {
@@ -1161,7 +1237,7 @@ class LibsUiComponentsInputsQuillComponent {
                 // Fixbug issue: https://admin-cv.mobio.vn/issues/49092
                 let styleExist = element.getAttribute('style');
                 if (styleExist) {
-                    ['font-family: Arial', 'font-family: sans-serif', 'font-family: serif', 'font-family: monospace', 'font-family: Helvetica'].forEach(font => {
+                    ['font-family: Arial', 'font-family: sans-serif', 'font-family: serif', 'font-family: monospace', 'font-family: Helvetica'].forEach((font) => {
                         styleExist = (styleExist?.includes(`${font};`) ? styleExist?.replace(`${font};`, '') : styleExist?.replace(font, ''));
                     });
                 }
@@ -1212,7 +1288,7 @@ class LibsUiComponentsInputsQuillComponent {
             if (!links?.length) {
                 return;
             }
-            links.forEach(link => {
+            links.forEach((link) => {
                 if (!link || (this.uploadImageConfig().onlyAcceptImageHttpsLink && (link instanceof ArrayBuffer || !new RegExp(patternUrl()).test(link)))) {
                     return;
                 }
@@ -1247,7 +1323,7 @@ class LibsUiComponentsInputsQuillComponent {
         this.quill()?.format('size', `${size}px`);
     }
     handlerValueChange(value) {
-        this.size.update(item => ({ ...item, value: value }));
+        this.size.update((item) => ({ ...item, value: value }));
         this.quill()?.format('size', `${this.size().value}px`);
     }
     handleSelectAlign(event) {
@@ -1260,7 +1336,7 @@ class LibsUiComponentsInputsQuillComponent {
     }
     handlerChangeShowMoreAction(event) {
         event.stopPropagation();
-        this.showMoreAction.update(item => !item);
+        this.showMoreAction.update((item) => !item);
     }
     scrollToSelectionWithElementScrollHeightAuto(index) {
         clearTimeout(this.timeoutScrollToSelectionWithElementScrollHeightAuto());
@@ -1289,7 +1365,10 @@ class LibsUiComponentsInputsQuillComponent {
         if (!html) {
             return '';
         }
-        return html.replace(/^\s*<p><br><\/p>/, '').replace(/<div><br><\/div>/gi, '').replace(/[\u200B-\u200D\uFEFF]/g, '');
+        return html
+            .replace(/^\s*<p><br><\/p>/, '')
+            .replace(/<div><br><\/div>/gi, '')
+            .replace(/[\u200B-\u200D\uFEFF]/g, '');
     }
     handleSelectHeader(event) {
         this.headerSelected.set(event);
@@ -1309,13 +1388,19 @@ class LibsUiComponentsInputsQuillComponent {
 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,
-                        LibsUiComponentsInputsMentionDirective, LibsUiComponentsScrollOverlayDirective,
-                        LibsUiComponentsLabelComponent, LibsUiComponentsDropdownComponent,
-                        LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsSelectColorComponent,
-                        LibsUiComponentsInputsValidComponent, LibsUiComponentsEmojiComponent,
-                        LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSpinnerComponent,
-                        LibsUiComponentsSkeletonComponent
+                        TranslateModule,
+                        NgTemplateOutlet,
+                        LibsUiComponentsInputsMentionDirective,
+                        LibsUiComponentsScrollOverlayDirective,
+                        LibsUiComponentsLabelComponent,
+                        LibsUiComponentsDropdownComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsButtonsSelectColorComponent,
+                        LibsUiComponentsInputsValidComponent,
+                        LibsUiComponentsEmojiComponent,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsSpinnerComponent,
+                        LibsUiComponentsSkeletonComponent,
                     ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositionFixed]=\"isToolbarPositionFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation':'' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\n        [class.bg-[#f8f9fa]]=\"!readonly() && !loadingUploadImage()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [timeDelayInit]=\"timeDelayInit()+50\"\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\"\n        [class.pointer-events-none]=\"loadingUploadImage()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n      <ng-container #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n    @if (loadingUploadImage()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\"> {{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton class=\"w-full h-full\"\n        [config]=\"{\n        rows: [{\n          item:{classIncludeItem:'!rounded-none',}\n        }]\n      }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate;context:{option, $index, $last}\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n<ng-template #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_undo', zIndex: zIndex()}\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content: 'i18n_redo', zIndex: zIndex()}\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex: zIndex()}\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div\n            class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{zIndex: zIndex()}\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_text_color', zIndex:zIndex()}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha:true,\n\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_background_color', zIndex: zIndex()}\">\n        <libs_ui-components-buttons-select_color [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha:true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\">\n          </div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_weight_bold', zIndex: zIndex()}\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_font_style_italic', zIndex: zIndex()}\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_decoration_underline', zIndex: zIndex()}\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_text_line_through', zIndex: zIndex()}\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div\n      class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{content:'i18n_adjust', zIndex: zIndex()}\">\n        <libs_ui-components-dropdown [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: {mode: 'start', distance: 0}, paddingLeftItem: false}\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_increase', zIndex: zIndex()}\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_indent_decrease', zIndex: zIndex()}\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_bulleted', zIndex: zIndex()}\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_list_numbered', zIndex: zIndex()}\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_quote', zIndex: zIndex()}\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_insert_link', zIndex: zIndex()}\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_unlink', zIndex: zIndex()}\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button LibsUiComponentsPopoverDirective\n        [config]=\"{content:'i18n_image', zIndex: zIndex()}\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex()}\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{content: link().url, zIndex: zIndex()+1}\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631'\n          },\n          rootColor: '#071631'\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
         }], ctorParameters: () => [] });