@leanix/components 0.4.709 → 0.4.711

package/fesm2022/leanix-components.mjs

@@ -1140,7 +1140,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  *
  * @Component({
  *   selector: 'lx-my-component',
- *   standalone: true,
  *   imports: [CdkStepperModule, StepperComponent],
  *   templateUrl: './my-component.component.html'
  * })
@@ -3034,7 +3033,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  *
  * @Component({
  *   selector: 'lx-my-component',
- *   standalone: true,
  *   imports: [TokenizerComponent, TokenComponent],
  *   template: `
  *     <lx-tokenizer>
@@ -10458,7 +10456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         ErrorMessageComponent,
                         MarkInvalidDirective,
                         AutofocusDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input,
                 args: [{ required: true }]
@@ -10503,7 +10501,7 @@ class RichTextEditorToolbarComponent {
         this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: false, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- eslint-disable @nx/workspace-no-font-awesome-icons -->\n<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: false, isRequired: true, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction", "mouseEnter"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -10516,7 +10514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TranslatePipe,
                         LinkModalComponent,
                         TooltipDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable @nx/workspace-no-font-awesome-icons -->\n<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\" [class.toolbarHidden]=\"!isToolbarVisible()\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [lxTooltip]=\"NAME + '.textStyles' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bold' | translate\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.italic' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.underline' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.strikethrough' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bulletList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.bulletList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.numberedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.numberedList' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignLeft' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignCenter' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignRight' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignBlock' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.alignBlock' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [lxTooltip]=\"NAME + '.link' | translate\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.code' | translate\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.insertTable' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [lxTooltip]=\"NAME + '.insertTable' | translate\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && isLinkModalOpenSignal()) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex}.toolbar{display:flex;flex-wrap:wrap;width:100%;border-bottom:#99a5bb 1px solid;transition:all .18s ease-out;opacity:1;height:auto;padding:8px;overflow:hidden}.toolbar.toolbarHidden{opacity:0;height:0!important;padding:0}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
         }], propDecorators: { editor: [{
                 type: Input,
                 args: [{ required: true }]