@libs-ui/components-inputs-quill 0.2.327-0 → 0.2.327-2

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

@@ -23,6 +23,7 @@ import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { returnListObject } from '@libs-ui/services-http-request';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import Quill2x, { Delta } from 'quill2x';
+import ResizeModule from '@ssumo/quill-resize-module';
 
 class LibsUiComponentsInputsQuillLinkComponent {
     dataLink = signal({ title: '', link: '' });
@@ -1456,6 +1457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n  <div\n    #wrapperEditor\n    [attr.heightAuto]=\"heightAuto()\"\n    [attr.isToolbarPositionFixed]=\"isToolbarPositionFixed()\"\n    class=\"libs-ui-quill-wrapper w-full h-full relative flex flex-col\"\n    [class.libs-ui-border-error-general]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\"\n    [class.rounded-[4px]]=\"messageError() && showErrorBorder() && !onlyShowErrorBorderInContent()\">\n    <div\n      #editor\n      class=\"libs-ui-quill\"\n      [attr.showError]=\"messageError() && showErrorBorder() && onlyShowErrorBorderInContent()\"\n      [class.!hidden]=\"!display()\">\n      <div\n        #quillOption\n        [class.!top-[-9999px]]=\"!isShowToolBar()\"\n        [class.!left-[-9999px]]=\"!isShowToolBar()\"\n        [style]=\"stylesIncludeToolbar()\"\n        [class.pointer-events-none]=\"readonly() || loadingUploadImage()\"\n        class=\"{{ isToolbarPositionFixed() ? 'fixed !z-10 w-[510px] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] rounded-[4px] bg-[#ffffff] libs-ui-quill-toolbar-animation' : '' }} {{ classIncludeToolbar() }} h-[44px] shrink-0\"\n        [class.bg-[#f8f9fa]]=\"!readonly() && !loadingUploadImage()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\">\n        <ng-container *ngTemplateOutlet=\"toolbar\"></ng-container>\n      </div>\n      <div\n        #quillEditor\n        LibsUiComponentsInputsMentionDirective\n        [timeDelayInit]=\"timeDelayInit() + 50\"\n        [mentionConfig]=\"dataConfigMention()\"\n        [class.libs-ui-readonly-background]=\"readonly() || loadingUploadImage()\"\n        [class.pointer-events-none]=\"loadingUploadImage()\"\n        (outToggle)=\"handleToggleMention($event)\"\n        (outInsertMention)=\"handlerInsertMention($event)\"></div>\n      <ng-container\n        #qlEditorScroll\n        LibsUiComponentsScrollOverlayDirective\n        [ignoreInit]=\"!qlEditorElement()\"\n        [elementScroll]=\"qlEditorElement()\" />\n    </div>\n    @if (template(); as template) {\n      <div [class]=\"classIncludeTemplate()\">\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      </div>\n    }\n    @if (loadingUploadImage()) {\n      <libs_ui-components-spinner [size]=\"'medium'\" />\n    }\n  </div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center leading-normal mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbar>\n  <div\n    class=\"toolbar h-full w-full shrink-0\"\n    #toolbarItems>\n    @if (displaySkeleton()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px]\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n        </div>\n      }\n      <div class=\"relative\">\n        @if (displayShowMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemTemplate; context: { option, $index, $last }\"></ng-container>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\"ql-picker {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChange($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_text_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"setStyle('color', $event)\">\n          <div class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_background_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"setStyle('background', $event)\">\n          <div class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_adjust', zIndex: zIndex() }\">\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: { mode: 'start', distance: 0 }, paddingLeftItem: false }\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"1250\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerAddEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\"\n  (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEdit($event)\" />\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631',\n          },\n          rootColor: '#071631',\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@-webkit-keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes animation-move{0%{transform:translateY(-12px)}to{transform:translateY(0)}}.libs-ui-quill{height:100%;width:100%;display:flex;flex-direction:column}.libs-ui-quill-toolbar-animation{animation:animation-move .4s ease}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container{height:auto}.libs-ui-quill-wrapper[heightAuto=true] .libs-ui-quill ::ng-deep .ql-container .ql-editor{position:relative!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=true] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:0px!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-container.ql-snow{border:solid 1px #e6e8ed!important;border-radius:0 0 4px 4px}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill ::ng-deep .ql-toolbar.ql-snow{border:solid 1px #e6e8ed!important;border-radius:4px 4px 0 0;border-bottom:unset!important}.libs-ui-quill-wrapper[isToolbarPositionFixed=false] .libs-ui-quill[showError=true] ::ng-deep .ql-container.ql-snow{border:solid 1px #ee2d41!important}:host ::ng-deep .toolbar,:host ::ng-deep .ql-formats{position:relative;width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-formats{display:flex}:host ::ng-deep .ql-container.ql-snow{width:100%;height:100%;position:relative}:host ::ng-deep .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:400}:host ::ng-deep .ql-editor b{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}:host ::ng-deep .ql-toolbar.ql-snow{border:none;border-radius:8px;padding:0}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label{color:#071631;border:none!important;margin-top:5px}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke{stroke:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-item:hover{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active{color:#071631}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:#071631}:host ::ng-deep .ql-editor{height:100%;width:100%;position:absolute;line-height:1.42!important}:host ::ng-deep .ql-editor:before{font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;color:#9ca2ad!important;font-size:12px}:host ::ng-deep .ql-editor img{height:auto;max-width:100%}:host ::ng-deep .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border:none!important}:host ::ng-deep .ql-snow .ql-picker.ql-bold{width:36px!important}:host ::ng-deep .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .ql-editor.ql-blank{font-size:11px!important;letter-spacing:.05px;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;line-height:16px}:host ::ng-deep .ql-editor.ql-blank:before{font-style:normal!important;color:#9ca2ad!important}:host ::ng-deep .ql-snow.ql-toolbar .ql-picker-label :hover{color:red!important}:host ::ng-deep .ql-formats{margin-right:12px!important}:host ::ng-deep .ql-formats .ql-size.ql-picker,:host ::ng-deep .ql-formats .ql-header.ql-picker,:host ::ng-deep .ql-formats .ql-font.ql-picker{border:solid 1px #e6e8ed!important;border-radius:4px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label{width:24px}:host ::ng-deep .ql-formats .ql-align.ql-picker .ql-picker-label:hover{color:red!important}:host ::ng-deep .ql-formats .ql-header.ql-picker .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-picker-item:before{font-size:12px}:host ::ng-deep .ql-picker-label:before{font-size:12px}:host ::ng-deep .ql-snow.ql-toolbar button,:host ::ng-deep .ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:flex;align-items:center;float:none;padding:0;width:inherit}:host ::ng-deep ul{padding-left:1rem!important}:host ::ng-deep li{padding-left:0!important}:host ::ng-deep .ql-tooltip{display:none!important}.ql-picker-options{max-height:130px;overflow-y:auto}.ql-snow .ql-picker.ql-size{border:1px solid #e6e7ea;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:2px}.ql-snow .ql-picker.ql-font{border:1px solid #e6e7ea!important;margin-right:8px;border-radius:4px}.ql-snow .ql-picker.ql-font .ql-picker-options:before{font-size:12px}.ql-snow .ql-picker.ql-font .ql-picker-label:before{font-size:12px}.ql-font-Arial{font-family:Arial}.ql-font-sans-serif{font-family:\"sans-serif\"}.ql-font-Helvetica{font-family:Helvetica}.libs-ui-quill-mention{font-weight:500!important;color:#7239ea;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--libs-ui-font-family-name),\"Arial, Helvetica, sans-serif\"!important;font-weight:600}.ql-snow .ql-picker.ql-expanded .ql-picker-options{overflow:hidden}.ql-formats{margin-right:0!important}.ql-formats .ql-header{position:relative!important}.ql-formats .ql-header .ql-picker-options{position:absolute!important;top:-151px!important}.ql-formats .ql-font{position:relative!important}.ql-formats .ql-font .ql-picker-options{position:absolute!important;top:-93px!important}.ql-formats .ql-color{position:relative!important}.ql-formats .ql-color .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-background{position:relative!important}.ql-formats .ql-background .ql-picker-options{position:absolute!important;top:-108px}.ql-formats .ql-align{position:relative!important}.ql-formats .ql-align .ql-picker-label{padding:3px 4px!important}.ql-formats .ql-align .ql-picker-options{position:absolute!important;top:-106px}.ql-snow .ql-picker{font-size:12px!important;height:32px;float:none;width:auto}\n"] }]
         }], ctorParameters: () => [] });
 
+let startCell = null;
+let endCell = null;
+let isSelecting = false;
 //region Function Table
 const createTableSelector = (quill, anchorEl, translate) => {
     // Đóng popup cũ nếu còn tồn tại
@@ -1498,8 +1502,8 @@ const createTableSelector = (quill, anchorEl, translate) => {
         gap: '4px',
     });
     const max = 8;
-    for (let r = 1; r <= max; r++) {
-        for (let c = 1; c <= max; c++) {
+    for (let row = 1; row <= max; row++) {
+        for (let col = 1; col <= max; col++) {
             const cell = document.createElement('div');
             cell.style.width = '18px';
             cell.style.height = '18px';
@@ -1507,12 +1511,12 @@ const createTableSelector = (quill, anchorEl, translate) => {
             cell.style.background = '#fff';
             cell.style.cursor = 'pointer';
             cell.addEventListener('mouseenter', () => {
-                info.textContent = `${r} × ${c}`;
+                info.textContent = `${row} × ${col}`;
                 Array.from(grid.children).forEach((el, idx) => {
                     const rr = Math.floor(idx / max) + 1;
                     const cc = (idx % max) + 1;
-                    el.style.background = rr <= r && cc <= c ? '#dbeafe' : '#fff';
-                    el.style.borderColor = rr <= r && cc <= c ? '#93c5fd' : '#e5e7eb';
+                    el.style.background = rr <= row && cc <= col ? '#dbeafe' : '#fff';
+                    el.style.borderColor = rr <= row && cc <= col ? '#93c5fd' : '#e5e7eb';
                 });
             });
             cell.addEventListener('click', () => {
@@ -1520,7 +1524,8 @@ const createTableSelector = (quill, anchorEl, translate) => {
                     quill.focus();
                     const tableModule = quill.getModule('table');
                     if (tableModule && typeof tableModule.insertTable === 'function') {
-                        tableModule.insertTable(r, c);
+                        tableModule.insertTable(row, col);
+                        getAllTablesWithSpan(quill);
                     }
                 }
                 finally {
@@ -1603,8 +1608,21 @@ const createContextMenuOptionTable = (quill, translate) => {
         menu.style.minWidth = '180px';
         const tableModule = quill.getModule('table');
         const safeCall = (method, ...args) => {
+            if (method === 'mergeCells') {
+                const [startCell, endCell] = args;
+                mergeCells(startCell, endCell);
+                closeAnyMenu();
+                return;
+            }
+            if (method === 'splitCells') {
+                const [startCell] = args;
+                splitCells(startCell);
+                closeAnyMenu();
+                return;
+            }
             if (tableModule && typeof tableModule[method] === 'function') {
                 tableModule[method](...args);
+                getAllTablesWithSpan(quill);
             }
         };
         menu.appendChild(createMenuItem(translate.instant('i18n_add_new_row_above'), () => safeCall('insertRowAbove')));
@@ -1616,12 +1634,34 @@ const createContextMenuOptionTable = (quill, translate) => {
         divider.style.background = '#eee';
         divider.style.margin = '4px 0';
         menu.appendChild(divider);
+        if (startCell && endCell) {
+            const startCellStore = startCell;
+            const endCellStore = endCell;
+            const colspan = parseInt(startCellStore.getAttribute('colspan') || '1', 10);
+            const rowspan = parseInt(startCellStore.getAttribute('rowspan') || '1', 10);
+            let totalMenu = 0;
+            if (startCell !== endCell) {
+                menu.appendChild(createMenuItem(translate.instant('i18n_merge_cells'), () => safeCall('mergeCells', startCellStore, endCellStore)));
+                totalMenu++;
+            }
+            if (startCell === endCell && (colspan > 1 || rowspan > 1)) {
+                menu.appendChild(createMenuItem(translate.instant('i18n_split_cells'), () => safeCall('splitCells', startCellStore)));
+                totalMenu++;
+            }
+            if (totalMenu > 0) {
+                const divider2 = document.createElement('div');
+                divider2.style.height = '1px';
+                divider2.style.background = '#eee';
+                divider2.style.margin = '4px 0';
+                menu.appendChild(divider2);
+            }
+        }
         menu.appendChild(createMenuItem(translate.instant('i18n_delete_row'), () => safeCall('deleteRow')));
         menu.appendChild(createMenuItem(translate.instant('i18n_delete_column'), () => safeCall('deleteColumn')));
         menu.appendChild(createMenuItem(translate.instant('i18n_delete_table'), () => safeCall('deleteTable')));
         document.body.appendChild(menu);
         const onOutside = (ev) => {
-            if (!menu.contains(ev.target)) {
+            if (!menu.contains(ev.target) || ev.target.getElementsByTagName('table').length < 0) {
                 closeAnyMenu();
                 document.removeEventListener('click', onOutside, true);
             }
@@ -1662,6 +1702,149 @@ const createContextMenuOptionTable = (quill, translate) => {
         openContextMenu(ev.pageX, ev.pageY);
     });
 };
+// ===============================
+// Utils: clear và select cells
+// ===============================
+const clearSelection = () => {
+    document.querySelectorAll('.selected-cell').forEach((c) => {
+        c.classList.remove('selected-cell');
+    });
+};
+const selectRangeCells = (start, end) => {
+    clearSelection();
+    const table = start.closest('table');
+    if (!table || table !== end.closest('table'))
+        return;
+    const rows = Array.from(table.querySelectorAll('tr'));
+    const startRow = rows.indexOf(start.parentElement);
+    const endRow = rows.indexOf(end.parentElement);
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const startCol = Array.from(start.parentElement.children).indexOf(start);
+    const endCol = Array.from(end.parentElement.children).indexOf(end);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+    for (let r = minRow; r <= maxRow; r++) {
+        const row = rows[r];
+        const cells = Array.from(row.children);
+        for (let c = minCol; c <= maxCol; c++) {
+            cells[c].classList.add('selected-cell');
+        }
+    }
+};
+// ===============================
+// Enable selection trên table
+// ===============================
+function enableTableSelection(container, quill) {
+    container.addEventListener('mousedown', (e) => {
+        const target = e.target;
+        if ((target.tagName === 'TD' && e.button !== 2) || (e.button === 2 && !target.classList.contains('selected-cell'))) {
+            clearSelection();
+            isSelecting = true;
+            startCell = target;
+            endCell = target;
+            selectRangeCells(startCell, endCell);
+        }
+    });
+    container.addEventListener('mousemove', (e) => {
+        if (!isSelecting)
+            return;
+        const target = e.target;
+        if (target.tagName === 'TD' && startCell) {
+            endCell = target;
+            selectRangeCells(startCell, endCell);
+        }
+    });
+    container.addEventListener('mouseup', () => {
+        isSelecting = false;
+    });
+}
+const onOutside = (ev) => {
+    const target = ev.target;
+    console.log(target.tagName);
+    if (target.tagName !== 'TD' && target.tagName !== 'TR' && target.tagName !== 'TBODY' && target.tagName !== 'THEAD' && target.tagName !== 'TABLE') {
+        isSelecting = false;
+        startCell = null;
+        endCell = null;
+        clearSelection();
+    }
+};
+document.addEventListener('click', onOutside, true);
+// ===============================
+// Merge cells
+// ===============================
+const mergeCells = (startCell, endCell) => {
+    const startCellIndex = startCell.getAttribute('index');
+    const endCellIndex = endCell.getAttribute('index');
+    const startCellRow = parseInt(startCellIndex?.split('-')[0] || '0', 10);
+    const endCellRow = parseInt(endCellIndex?.split('-')[0] || '0', 10);
+    const startCellCol = parseInt(startCellIndex?.split('-')[1] || '0', 10);
+    const endCellCol = parseInt(endCellIndex?.split('-')[1] || '0', 10);
+    const minRow = Math.min(startCellRow, endCellRow);
+    const maxRow = Math.max(startCellRow, endCellRow);
+    const minCol = Math.min(startCellCol, endCellCol);
+    const maxCol = Math.max(startCellCol, endCellCol);
+    const rows = startCell.closest('table')?.querySelectorAll('tr');
+    rows?.forEach((rowEl, rowIndex) => {
+        if (rowIndex < minRow || rowIndex > maxRow)
+            return;
+        const cells = rowEl.querySelectorAll('td, th');
+        cells.forEach((cellEl, colIndex) => {
+            if (colIndex < minCol || colIndex > maxCol)
+                return;
+            if (rowIndex === minRow && colIndex === minCol) {
+                cellEl.setAttribute('colspan', String(maxCol - minCol + 1));
+                cellEl.setAttribute('rowspan', String(maxRow - minRow + 1));
+                return;
+            }
+            cellEl.classList.add('hidden');
+        });
+    });
+};
+// ===============================
+// Split cells
+// ===============================
+function splitCells(cellSplit) {
+    const index = cellSplit.getAttribute('index');
+    let colSpan = parseInt(cellSplit.getAttribute('colspan') || '1', 10);
+    let rowSpan = parseInt(cellSplit.getAttribute('rowspan') || '1', 10);
+    const totalCellSplit = rowSpan * colSpan;
+    let countCellSplit = 0;
+    const rowStart = parseInt(index?.split('-')[0] || '0', 10);
+    const colStart = parseInt(index?.split('-')[1] || '0', 10);
+    const colIncrement = new Set();
+    const rowIncrement = new Set();
+    const rows = cellSplit.closest('table')?.querySelectorAll('tr');
+    rows?.forEach((rowEl, rowIndex) => {
+        if (rowIndex < rowStart)
+            return;
+        const cells = rowEl.querySelectorAll('td, th');
+        cells.forEach((cellEl, colIndex) => {
+            if (rowIndex < rowStart || colIndex < colStart || rowStart + rowSpan < rowIndex || colStart + colSpan < colIndex || countCellSplit >= totalCellSplit)
+                return;
+            if (rowIndex === rowStart && colIndex === colStart) {
+                countCellSplit++;
+                cellEl.setAttribute('colspan', '1');
+                cellEl.setAttribute('rowspan', '1');
+                return;
+            }
+            if (!cellEl.classList.contains('hidden')) {
+                if (!rowIncrement.has(rowIndex)) {
+                    rowSpan++;
+                }
+                if (!colIncrement.has(colIndex)) {
+                    colSpan++;
+                }
+                rowIncrement.add(rowIndex);
+                colIncrement.add(colIndex);
+                return;
+            }
+            cellEl.classList.remove('hidden');
+            countCellSplit++;
+        });
+    });
+}
+//-------------------------------------------
 let register = false;
 const registerQuill2x = () => {
     if (register)
@@ -1681,8 +1864,28 @@ const registerQuill2x = () => {
     Quill.register(size, true);
     Quill.register(alignStyle, true);
     Quill.register(QuillMentionBlot, true);
+    Quill.register('modules/resize', ResizeModule);
     [...iconList()].forEach((element) => set(icons, element.key, `<span class="${element.icon} ${element.key === 'unLink' ? 'hover:text-[#ee2d41] ' : 'hover:text-[var(--libs-ui-color-light-1)]'} text-[16px] text-[#6a7383]"></span>`));
 };
+const getAllTablesWithSpan = (quill) => {
+    const root = quill.root;
+    // Tìm tất cả table trong quill
+    const tableEls = root.querySelectorAll('table');
+    tableEls.forEach((tableEl) => {
+        const rows = tableEl.querySelectorAll('tr');
+        rows.forEach((rowEl, rIndex) => {
+            rowEl.setAttribute('index', `${rIndex}`);
+            const cells = rowEl.querySelectorAll('td, th');
+            cells.forEach((cellEl, cIndex) => {
+                cellEl.setAttribute('index', `${rIndex}-${cIndex}`);
+                const rowspan = parseInt(cellEl.getAttribute('rowspan') || '1', 10);
+                const colspan = parseInt(cellEl.getAttribute('colspan') || '1', 10);
+                cellEl.setAttribute('rowspan', String(rowspan));
+                cellEl.setAttribute('colspan', String(colspan));
+            });
+        });
+    });
+};
 
 class LibsUiComponentsInputsQuill2xComponent {
     //region Private
@@ -1739,6 +1942,7 @@ class LibsUiComponentsInputsQuill2xComponent {
     ignoreShowPopupEditLink = input();
     ignoreCommunicateMicroEventPopup = input();
     handlersExpand = input();
+    resizeImagePlugin = input();
     autoFocus = input();
     focusBottom = input();
     validRequired = input();
@@ -1792,6 +1996,18 @@ class LibsUiComponentsInputsQuill2xComponent {
                     container: this.toolbarContainer().nativeElement,
                     handlers: this.handlers(),
                 },
+                resize: this.resizeImagePlugin()
+                    ? {
+                        locale: {
+                            altTip: 'Giữ phím alt để thay đổi tỉ lệ khi thay đổi kích thước',
+                            inputTip: 'Nhấn phím Enter để xác nhận',
+                            floatLeft: 'Căn trái',
+                            floatRight: 'Căn phải',
+                            center: 'Căn giữa',
+                            restore: 'Khôi phục',
+                        },
+                    }
+                    : undefined,
                 table: true,
                 clipboard: {
                     matchers: [[Node.TEXT_NODE, (node) => new Delta().insert(node.data)]],
@@ -1825,7 +2041,6 @@ class LibsUiComponentsInputsQuill2xComponent {
         this.handlerTextChange();
         this.handlerSelectionChange();
         this.handlerPaste();
-        createContextMenuOptionTable(this.quill, this.translate);
         this.outFunctionsControl.emit(this.FunctionsControl);
         await this.setContent(this.item()[this.fieldBind()]);
         this.setStyleForContent();
@@ -1834,6 +2049,9 @@ class LibsUiComponentsInputsQuill2xComponent {
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.focus());
         }
+        createContextMenuOptionTable(this.quill, this.translate);
+        enableTableSelection(this.quill.root, this.quill);
+        getAllTablesWithSpan(this.quill);
     }
     get FunctionsControl() {
         return {
@@ -2328,14 +2546,14 @@ class LibsUiComponentsInputsQuill2xComponent {
     updateValueByRootQuillHtml() {
         const html = this.removeUnwantedPart(this.quill?.root.innerHTML || '');
         if (!this.quill?.root.getElementsByTagName('img').length && !this.quill?.getText()) {
-            set(this.item, this.fieldBind(), '');
+            set(this.item(), this.fieldBind(), '');
             this.validate();
-            this.outChange.emit(get(this.item(), this.fieldBind()));
+            this.outChange.emit(get(this.item, this.fieldBind()));
             return;
         }
         this.convertInnerHTMLAndSetValue(html);
         this.validate();
-        this.outChange.emit(get(this.item(), this.fieldBind()));
+        this.outChange.emit(get(this.item, this.fieldBind()));
     }
     convertInnerHTMLAndSetValue(html) {
         this.setStyleForContent();
@@ -2365,7 +2583,7 @@ class LibsUiComponentsInputsQuill2xComponent {
         this.dynamicComponentService.remove(this.uploadImageComponentRef());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x", inputs: { uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, blotsRegister: { classPropertyName: "blotsRegister", publicName: "blotsRegister", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, quillCustomConfig: { classPropertyName: "quillCustomConfig", publicName: "quillCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, fieldBind: { classPropertyName: "fieldBind", publicName: "fieldBind", isSignal: true, isRequired: true, transformFunction: null }, autoUpdateValueWhenTextChange: { classPropertyName: "autoUpdateValueWhenTextChange", publicName: "autoUpdateValueWhenTextChange", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopupEditLink: { classPropertyName: "ignoreShowPopupEditLink", publicName: "ignoreShowPopupEditLink", isSignal: true, isRequired: false, transformFunction: null }, ignoreCommunicateMicroEventPopup: { classPropertyName: "ignoreCommunicateMicroEventPopup", publicName: "ignoreCommunicateMicroEventPopup", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, focusBottom: { classPropertyName: "focusBottom", publicName: "focusBottom", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outShowPopupEditLink: "outShowPopupEditLink", outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outSelectionChange: "outSelectionChange", outTextChange: "outTextChange", outContextMenu: "outContextMenu", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "htmlContainer", first: true, predicate: ["htmlContainer"], descendants: true, isSignal: true }, { propertyName: "quillBodyContainer", first: true, predicate: ["snowContainer"], descendants: true, isSignal: true }, { propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, isSignal: true }, { propertyName: "inputSizeRef", first: true, predicate: ["inputSizeRef"], descendants: true, isSignal: true }, { propertyName: "inputLinkRef", first: true, predicate: ["inputLinkRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChangeFontSize($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_text_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_background_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_adjust', zIndex: zIndex() }\">\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: { mode: 'start', distance: 0 }, paddingLeftItem: false }\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"zIndex() + 1\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631',\n          },\n          rootColor: '#071631',\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange", "outColorChangeMultipleType"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsQuill2xComponent, isStandalone: true, selector: "libs_ui-components-inputs-quill2x", inputs: { uploadImageConfig: { classPropertyName: "uploadImageConfig", publicName: "uploadImageConfig", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, blotsRegister: { classPropertyName: "blotsRegister", publicName: "blotsRegister", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, quillCustomConfig: { classPropertyName: "quillCustomConfig", publicName: "quillCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, fieldBind: { classPropertyName: "fieldBind", publicName: "fieldBind", isSignal: true, isRequired: true, transformFunction: null }, autoUpdateValueWhenTextChange: { classPropertyName: "autoUpdateValueWhenTextChange", publicName: "autoUpdateValueWhenTextChange", isSignal: true, isRequired: false, transformFunction: null }, templateToolBarPersonalize: { classPropertyName: "templateToolBarPersonalize", publicName: "templateToolBarPersonalize", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, ignoreShowPopupEditLink: { classPropertyName: "ignoreShowPopupEditLink", publicName: "ignoreShowPopupEditLink", isSignal: true, isRequired: false, transformFunction: null }, ignoreCommunicateMicroEventPopup: { classPropertyName: "ignoreCommunicateMicroEventPopup", publicName: "ignoreCommunicateMicroEventPopup", isSignal: true, isRequired: false, transformFunction: null }, handlersExpand: { classPropertyName: "handlersExpand", publicName: "handlersExpand", isSignal: true, isRequired: false, transformFunction: null }, resizeImagePlugin: { classPropertyName: "resizeImagePlugin", publicName: "resizeImagePlugin", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, focusBottom: { classPropertyName: "focusBottom", publicName: "focusBottom", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMinLength: { classPropertyName: "validMinLength", publicName: "validMinLength", isSignal: true, isRequired: false, transformFunction: null }, validMaxLength: { classPropertyName: "validMaxLength", publicName: "validMaxLength", isSignal: true, isRequired: false, transformFunction: null }, showErrorLabel: { classPropertyName: "showErrorLabel", publicName: "showErrorLabel", isSignal: true, isRequired: false, transformFunction: null }, showErrorBorder: { classPropertyName: "showErrorBorder", publicName: "showErrorBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { item: "itemChange", outShowPopupEditLink: "outShowPopupEditLink", outMessageError: "outMessageError", outBlur: "outBlur", outFocus: "outFocus", outChange: "outChange", outSelectionChange: "outSelectionChange", outTextChange: "outTextChange", outContextMenu: "outContextMenu", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "htmlContainer", first: true, predicate: ["htmlContainer"], descendants: true, isSignal: true }, { propertyName: "quillBodyContainer", first: true, predicate: ["snowContainer"], descendants: true, isSignal: true }, { propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, isSignal: true }, { propertyName: "inputSizeRef", first: true, predicate: ["inputSizeRef"], descendants: true, isSignal: true }, { propertyName: "inputLinkRef", first: true, predicate: ["inputLinkRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChangeFontSize($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_text_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_background_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_adjust', zIndex: zIndex() }\">\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: { mode: 'start', distance: 0 }, paddingLeftItem: false }\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"zIndex() + 1\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631',\n          },\n          rootColor: '#071631',\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}:host ::ng-deep .quill-container #editor-resizer .toolbar{top:0!important;left:0!important;transform:none!important;font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400;font-size:12px}:host ::ng-deep .selected-cell{background-color:#0096ff4d}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSkeletonComponent, selector: "libs_ui-components-skeleton", inputs: ["config"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "component", type: LibsUiComponentsEmojiComponent, selector: "libs_ui-components-emoji", inputs: ["configPopover", "isNgContent", "zIndex", "modePopoverPosition", "classPopup", "classInclude", "classIconInclude"], outputs: ["outEventEmoji", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsSelectColorComponent, selector: "libs_ui-components-buttons-select_color", inputs: ["zIndex", "customOptions", "externalContent", "direction", "button", "applyNow"], outputs: ["zIndexChange", "outColorChange", "outColorChangeMultipleType"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsQuill2xComponent, decorators: [{
             type: Component,
@@ -2381,7 +2599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LibsUiComponentsInputsValidComponent,
                         LibsUiComponentsButtonsSelectColorComponent,
                         LibsUiComponentsLabelComponent,
-                    ], template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChangeFontSize($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_text_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_background_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_adjust', zIndex: zIndex() }\">\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: { mode: 'start', distance: 0 }, paddingLeftItem: false }\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"zIndex() + 1\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631',\n          },\n          rootColor: '#071631',\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}\n"] }]
+                    ], template: "<div\n  #htmlContainer\n  class=\"quill-container\">\n  @if (label(); as label) {\n    <libs_ui-components-label\n      [classInclude]=\"label.classInclude\"\n      [required]=\"label.required\"\n      [labelLeft]=\"label.labelLeft\" />\n  }\n\n  <div\n    #toolbarContainer\n    class=\"relative h-[44px]]\">\n    <ng-container *ngTemplateOutlet=\"toolbarTemplate\" />\n  </div>\n  <div\n    #snowContainer\n    LibsUiComponentsScrollOverlayDirective\n    [class]=\"containerEditorClass()\"></div>\n  @if (messageError() && showErrorLabel()) {\n    <div class=\"flex items-center mt-[8px]\">\n      <span class=\"text-[#ff5454] libs-ui-font-h7r\">{{ messageError() | translate }}</span>\n    </div>\n  }\n</div>\n\n<ng-template #toolbarTemplate>\n  <div\n    [class]=\"containerToolbarClass()\"\n    #toolbarItems>\n    @if (displaySkeletonToolbar()) {\n      <libs_ui-components-skeleton\n        class=\"w-full h-full\"\n        [config]=\"{\n          rows: [\n            {\n              item: { classIncludeItem: '!rounded-none' },\n            },\n          ],\n        }\" />\n    }\n    <div class=\"ql-formats items-center px-[16px] py-[4px] !flex\">\n      @for (option of toolbarOptionsConfig(); track option) {\n        <div\n          class=\"items-center\"\n          [class.hidden]=\"!option.display\"\n          [class.flex]=\"option.display\">\n          <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n        </div>\n      }\n      <div class=\"relative\">\n        @if (showButtonMoreToolbar()) {\n          <libs_ui-components-buttons-button\n            [type]=\"showMoreAction() ? 'button-secondary' : 'button-third'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[1px] !h-[20px] ml-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-move-right rotate-90'\"\n            (outClick)=\"handlerChangeShowMoreAction($event)\" />\n        }\n        <!-- Build toolbar khi click xem th\u00EAm-->\n        <div\n          [class.hidden]=\"!showMoreAction()\"\n          class=\"absolute bg-[#ffffff] shadow-[0px_4px_16px_0px_rgba(0,20,51,0.10)] z-[1] flex items-center pl-[8px] pr-[16px] py-[4px] rounded-[8px] top-[31px] right-[0px]\">\n          @for (option of toolbarOptionsConfig(); track option) {\n            <div\n              class=\"items-center\"\n              [class.hidden]=\"option.display !== false\"\n              [class.flex]=\"option.display === false\">\n              <ng-container *ngTemplateOutlet=\"itemToolbarTemplate; context: { option, $index, $last }\" />\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template\n  #itemToolbarTemplate\n  let-$index=\"$index\"\n  let-$last=\"$last\"\n  let-option=\"option\">\n  @if (option.type === 'undo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_undo', zIndex: zIndex() }\"\n        class=\"ql-undo\"></button>\n    </div>\n  }\n  @if (option.type === 'redo') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_redo', zIndex: zIndex() }\"\n        class=\"ql-redo\"></button>\n    </div>\n  }\n  @if (option.type === 'fontFamily') {\n    <div\n      class=\"relative w-[132px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigFont()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectFont($event)\">\n        @if (fontSelected(); as fontSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px]\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelFontSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'header') {\n    <div\n      class=\"relative w-[138px] h-full rounded-[4px] libs-ui-border-general {{ option.classInclude || 'mx-[8px]' }}\"\n      [class.bg-white]=\"!readonly() && !loadingUploadImage()\">\n      <libs_ui-components-dropdown\n        [isNgContent]=\"true\"\n        [labelPopoverFullWidth]=\"true\"\n        [listConfig]=\"listConfigHeader()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        [listHiddenInputSearch]=\"true\"\n        [listMaxItemShow]=\"8\"\n        [zIndex]=\"1250\"\n        (outSelectKey)=\"handleSelectHeader($event)\">\n        @if (headerSelected(); as headerSelected) {\n          <div class=\"flex items-center cursor-pointer py-[7px] libs-ui-font-h5r pl-[16px] pr-[40px] {{ option.classInclude || 'mx-[8px]' }}\">\n            <libs_ui-components-popover\n              [type]=\"'text'\"\n              [ignoreStopPropagationEvent]=\"true\"\n              [config]=\"{ zIndex: zIndex() }\">\n              {{ labelHeaderSelectedComputed() }}\n            </libs_ui-components-popover>\n            <i class=\"libs-ui-icon-move-right rotate-90 absolute right-[12px] text-[#6a7383] text-[16px]\"></i>\n          </div>\n        }\n      </libs_ui-components-dropdown>\n    </div>\n  }\n  @if (option.type === 'fontSize') {\n    <div class=\" {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-inputs-valid\n        #inputSizeRef\n        [dataType]=\"'int'\"\n        [(item)]=\"size\"\n        [fieldNameBind]=\"'value'\"\n        [valueUpDownNumber]=\"1\"\n        [maxValueNumber]=\"72\"\n        [minValueNumber]=\"8\"\n        [readonly]=\"readonly() || loadingUploadImage()\"\n        [classContainerInput]=\"'w-[72px] h-[32px]'\"\n        (outValueChange)=\"handlerValueChangeFontSize($event)\" />\n    </div>\n  }\n  @if (option.type === 'color') {\n    <div class=\"ql-color ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_text_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          [applyNow]=\"false\"\n          (outColorChange)=\"handlerSetFormat('color', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-text libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"colorSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'background') {\n    <div class=\"ql-background ql-picker ql-color-picker !flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_background_color', zIndex: zIndex() }\">\n        <libs_ui-components-buttons-select_color\n          [zIndex]=\"zIndex()\"\n          [direction]=\"'top'\"\n          [externalContent]=\"true\"\n          [applyNow]=\"false\"\n          [customOptions]=\"{\n            showAlpha: true,\n          }\"\n          (outColorChange)=\"handlerSetFormat('background', $event)\">\n          <div\n            class=\"libs-ui-icon-editor-color-background libs-ui-buttons-select-color text-[#6a7383] text-[16px] hover:text-[var(--libs-ui-color-light-1)]\"\n            [class.text-[var(--libs-ui-color-light-1)]]=\"backgroundSelected()\"></div>\n        </libs_ui-components-buttons-select_color>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'bold') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_weight_bold', zIndex: zIndex() }\"\n        class=\"ql-bold\"></button>\n    </div>\n  }\n  @if (option.type === 'italic') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_font_style_italic', zIndex: zIndex() }\"\n        class=\"ql-italic\"></button>\n    </div>\n  }\n  @if (option.type === 'underline') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_decoration_underline', zIndex: zIndex() }\"\n        class=\"ql-underline\"></button>\n    </div>\n  }\n  @if (option.type === 'strikeThrough') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_text_line_through', zIndex: zIndex() }\"\n        class=\"ql-strike\"></button>\n    </div>\n  }\n  @if (option.type === 'script.sub') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_sub', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"sub\"></button>\n    </div>\n  }\n  @if (option.type === 'script.super') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_script_super', zIndex: zIndex() }\"\n        class=\"ql-script\"\n        value=\"super\"></button>\n    </div>\n  }\n  @if (option.type === 'adjust') {\n    <div class=\"relative !flex items-center ql-align ql-picker ql-icon-picker !w-max {{ option.classInclude || 'mx-[8px]' }}\">\n      <libs_ui-components-popover [config]=\"{ content: 'i18n_adjust', zIndex: zIndex() }\">\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [ignoreStopPropagationEvent]=\"true\"\n          [labelPopoverFullWidth]=\"true\"\n          [listConfig]=\"listConfigAlign()\"\n          [listHiddenInputSearch]=\"true\"\n          [popoverCustomConfig]=\"{ ignoreArrow: true, classInclude: '!w-[32px] overflow-hidden !py-[4px]', position: { mode: 'start', distance: 0 }, paddingLeftItem: false }\"\n          [listHasButtonUnSelectOption]=\"false\"\n          [listMaxItemShow]=\"8\"\n          [zIndex]=\"zIndex() + 1\"\n          (outSelectKey)=\"handleSelectAlign($event)\">\n          @if (alignSelected(); as alignSelected) {\n            <div class=\"flex items-center cursor-pointer\">\n              <i [class]=\"iconAlignSelectedComputed()\"></i>\n              <i class=\"libs-ui-icon-move-right rotate-90 text-[#6a7383] text-[16px] ml-[4px]\"></i>\n            </div>\n          }\n        </libs_ui-components-dropdown>\n      </libs_ui-components-popover>\n    </div>\n  }\n  @if (option.type === 'indentIncrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_increase', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"+1\"></button>\n    </div>\n  }\n  @if (option.type === 'indentDecrease') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_indent_decrease', zIndex: zIndex() }\"\n        class=\"ql-indent\"\n        value=\"-1\"></button>\n    </div>\n  }\n  @if (option.type === 'direction') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_direction', zIndex: zIndex() }\"\n        class=\"ql-direction\"\n        value=\"rtl\"></button>\n    </div>\n  }\n  @if (option.type === 'listBulleted') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_bulleted', zIndex: zIndex() }\"\n        class=\"ql-list ql-bullet\"\n        value=\"bullet\"></button>\n    </div>\n  }\n  @if (option.type === 'listNumbered') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-ordered\"\n        value=\"ordered\"></button>\n    </div>\n  }\n  @if (option.type === 'listChecked') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_list_numbered', zIndex: zIndex() }\"\n        class=\"ql-list ql-check\"\n        value=\"check\"></button>\n    </div>\n  }\n  @if (option.type === 'personalize' && templateToolBarPersonalize(); as templateToolBarPersonalize) {\n    <div class=\"flex items-center {{ option.classInclude || 'mx-[8px]' }}\">\n      <ng-container *ngTemplateOutlet=\"templateToolBarPersonalize\"></ng-container>\n    </div>\n  }\n  @if (option.type === 'blockquote') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_quote', zIndex: zIndex() }\"\n        class=\"ql-blockquote\"></button>\n    </div>\n  }\n  @if (option.type === 'link') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_insert_link', zIndex: zIndex() }\"\n        class=\"ql-link\"></button>\n    </div>\n  }\n  @if (option.type === 'unLink') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_unlink', zIndex: zIndex() }\"\n        class=\"ql-unLink\"\n        (click)=\"handlerUnlink($event)\"></button>\n    </div>\n  }\n  @if (option.type === 'image') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_image', zIndex: zIndex() }\"\n        class=\"ql-image\"></button>\n    </div>\n  }\n  @if (option.type === 'video') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_video', zIndex: zIndex() }\"\n        class=\"ql-video\"></button>\n    </div>\n  }\n  @if (option.type === 'emoji') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <libs_ui-components-emoji\n        [zIndex]=\"zIndex()\"\n        [isNgContent]=\"true\"\n        (outEventEmoji)=\"handlerInsertEmoji($event)\">\n        <button class=\"ql-emoji\"></button>\n      </libs_ui-components-emoji>\n    </div>\n  }\n  @if (option.type === 'table') {\n    <div [class]=\"option.classInclude || 'mx-[8px]'\">\n      <button\n        LibsUiComponentsPopoverDirective\n        [config]=\"{ content: 'i18n_table', zIndex: zIndex() }\"\n        class=\"ql-table\"></button>\n    </div>\n  }\n  @if (option.type === 'line') {\n    <div class=\"w-[1px] h-[16px] libs-ui-border-right-general\"></div>\n  }\n</ng-template>\n\n<libs_ui-components-popover\n  #inputLinkRef\n  [mode]=\"'click'\"\n  [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n  [config]=\"{ template: viewLink, whiteTheme: true, ignoreArrow: true, zIndex: zIndex() }\"\n  (outEvent)=\"handlerPopoverEvent($event)\" />\n\n<ng-template #viewLink>\n  <div class=\"flex justify-between items-center px-[16px] py-[8px] rounded-[8px]\">\n    <div\n      class=\"w-full min-w-0 libs-ui-font-h5r\"\n      [type]=\"'text'\"\n      LibsUiComponentsPopoverDirective\n      [config]=\"{ content: link().url, zIndex: zIndex() + 1 }\">\n      {{ link().url }}\n    </div>\n    <div class=\"flex items-center ml-[16px]\">\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-edit-line'\"\n        [classInclude]=\"'!p-0'\"\n        (outClick)=\"handlerEditLink($event)\" />\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-custom'\"\n        [buttonCustom]=\"{\n          configStepColor: {\n            text: '#071631',\n            text_hover: '#ee2d41',\n            text_active: '#ee2d41',\n            text_disable: '071631',\n          },\n          rootColor: '#071631',\n        }\"\n        [classInclude]=\"'!p-0 ml-[12px]'\"\n        [iconOnlyType]=\"true\"\n        [classIconLeft]=\"'libs-ui-icon-link-broken'\"\n        (outClick)=\"handlerUnlink($event)\" />\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host ::ng-deep .quill-container{display:flex;flex-direction:column;width:100%}:host ::ng-deep .quill-container .ql-container{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor{font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400}:host ::ng-deep .quill-container .ql-container .ql-editor ol li:before{content:\"\"!important}:host ::ng-deep .quill-container .ql-container .ql-blank:before{font-style:normal!important;font-size:12px!important;color:#9ca2ad!important;font-family:var(--libs-ui-font-family-name),arial!important}:host ::ng-deep .quill-container .ql-active span:before{color:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-active .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-script :hover .ql-fill{fill:var(--libs-ui-color-light-1)!important}:host ::ng-deep .quill-container .ql-toolbar{padding:0!important;border:none!important}:host ::ng-deep .quill-container .ql-toolbar button{padding:0!important;height:16px!important;width:16px!important}:host ::ng-deep .quill-container .ql-tooltip{display:none!important}:host ::ng-deep .quill-container #editor-resizer .toolbar{top:0!important;left:0!important;transform:none!important;font-family:var(--libs-ui-font-family-name),\"Arial\"!important;font-weight:400;font-size:12px}:host ::ng-deep .selected-cell{background-color:#0096ff4d}\n"] }]
         }] });
 
 /**