@leanix/components 0.4.824 → 0.4.826

package/fesm2022/leanix-components.mjs

@@ -2969,7 +2969,8 @@ const ICON_MAP = {
     'fa-window': ['lx-icons/window'], // ['tnt/subject'],
     'fa-wrench': ['wrench'],
     'fa-yen-sign': ['lx-icons/yen-sign'],
-    'fa-sigma': ['sum']
+    'fa-sigma': ['sum'],
+    'fa-line-columns': ['table-column']
 };
 /**
  * Retrieves the SAP icon for a given Font Awesome icon name.
@@ -12144,7 +12145,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.18", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\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}.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.18", 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=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\n        </button>\n\n        @for (level of headingLevels; track $index) {\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              @if (level >= 1 && level <= 3) {\n                <ui5-icon name=\"heading{{ level }}\" class=\"dropdown-icon\" />\n              } @else if (level === 4) {\n                <ui5-icon name=\"lx-icons/heading4\" class=\"dropdown-icon\" />\n              }\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            <ui5-icon name=\"text\" class=\"dropdown-icon\" />\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=\"bold-text\"\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=\"italic-text\"\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=\"underline-text\"\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=\"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=\"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=\"business-suite/icon-bulleting-with-numbers\"\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=\"text-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=\"text-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=\"text-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=\"text-align-justified\"\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=\"chain-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=\"source-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=\"business-suite/2x2-grid-layout\"\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}.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-right:.5rem;vertical-align:text-bottom}.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"] }, { kind: "component", type: IconComponent$1, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -12156,8 +12157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         ExtensionEnabledPipe,
                         TranslatePipe,
                         LinkModalComponent,
-                        TooltipDirective
-                    ], 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          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\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}.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"] }]
+                        TooltipDirective,
+                        IconComponent$1
+                    ], 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=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{\n            editor.isActive('heading')\n              ? `${(NAME + '.heading' | translate)}  ${editor.getAttributes('heading')['level']}`\n              : `${(NAME + '.paragraph' | translate)}`\n          }}\n        </button>\n\n        @for (level of headingLevels; track $index) {\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              @if (level >= 1 && level <= 3) {\n                <ui5-icon name=\"heading{{ level }}\" class=\"dropdown-icon\" />\n              } @else if (level === 4) {\n                <ui5-icon name=\"lx-icons/heading4\" class=\"dropdown-icon\" />\n              }\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            <ui5-icon name=\"text\" class=\"dropdown-icon\" />\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=\"bold-text\"\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=\"italic-text\"\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=\"underline-text\"\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=\"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=\"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=\"business-suite/icon-bulleting-with-numbers\"\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=\"text-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=\"text-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=\"text-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=\"text-align-justified\"\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=\"chain-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=\"source-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=\"business-suite/2x2-grid-layout\"\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}.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-right:.5rem;vertical-align:text-bottom}.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 }]