@leanix/components 0.4.873 → 0.4.875

package/fesm2022/leanix-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Input, Component, input, computed, ChangeDetectionStrategy, HostBinding, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, signal, Optional, Pipe, inject, NgModule, output, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, ApplicationRef, createComponent } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
-import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import { TranslatePipe, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { IconComponent } from '@ui5/webcomponents-ngx/main/icon';
 import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
 import * as i1 from '@leanix/components/ui5';
@@ -39,7 +39,7 @@ import * as i1$6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$7 from '@angular/cdk/bidi';
 import * as i1$8 from '@angular/platform-browser';
-import { Extension, getMarkRange, findParentNode, Editor, NodeView } from '@tiptap/core';
+import { Node as Node$1, mergeAttributes, Extension, getMarkRange, findParentNode, Editor, NodeView } from '@tiptap/core';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
 import Code from '@tiptap/extension-code';
@@ -55,6 +55,7 @@ import Italic from '@tiptap/extension-italic';
 import ListItem from '@tiptap/extension-list-item';
 import OrderedList from '@tiptap/extension-ordered-list';
 import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
 import Strike from '@tiptap/extension-strike';
 import Text from '@tiptap/extension-text';
 import TextAlign from '@tiptap/extension-text-align';
@@ -3788,12 +3789,12 @@ function getCssVariable(cssVariableName) {
 }
 function scrollTop(container, item) {
     if (container && item) {
-        const itemClientRect = item.getBoundingClientRect();
-        const containerClientRect = container.getBoundingClientRect();
-        const scrollDownNeeded = itemClientRect.y > containerClientRect.y;
-        const scrollTopNeeded = itemClientRect.y < containerClientRect.y;
-        if (scrollDownNeeded || scrollTopNeeded) {
-            container.scrollTop = itemClientRect.y - containerClientRect.y + container.scrollTop;
+        const itemRect = item.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const isBelowVisible = itemRect.bottom > containerRect.bottom;
+        const isAboveVisible = itemRect.top < containerRect.top;
+        if (isBelowVisible || isAboveVisible) {
+            item.scrollIntoView({ block: 'nearest' });
         }
     }
     else {
@@ -8326,7 +8327,7 @@ class OptionGroupDropdownComponent extends KeyboardSelectDirective {
         this.isTopDropdown = event.connectionPair.originY === 'top';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: OptionGroupDropdownComponent, isStandalone: true, selector: "lx-option-group-dropdown", inputs: { optionGroups: "optionGroups", newOptionLabel: "newOptionLabel", highlightTerm: "highlightTerm", showCreateNewOption: "showCreateNewOption", labelKey: "labelKey", loading: "loading", trackByProperty: "trackByProperty", showNoResultsIfGroupIsEmpty: "showNoResultsIfGroupIsEmpty", overlayPositioning: "overlayPositioning" }, outputs: { onItemSelected: "onItemSelected", containerScrolled: "containerScrolled", createNewOption: "createNewOption" }, providers: [{ provide: KeyboardSelectDirective, useExisting: forwardRef(() => OptionGroupDropdownComponent) }], queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "noResultsOptionTemplateRef", first: true, predicate: ["noResultsOptionTemplateRef"], descendants: true }], viewQueries: [{ propertyName: "selectOrigin", first: true, predicate: ["selectOrigin"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i1$4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: SelectableItemDirective, selector: "[lxSelectableItem]", inputs: ["scrollInContainer", "lxSelectableItem"], outputs: ["select"] }, { kind: "component", type: CounterComponent, selector: "lx-counter", inputs: ["content", "size", "color"] }, { kind: "component", type: BasicDropdownItemComponent, selector: "lx-basic-dropdown-item", inputs: ["label", "description", "highlightTerm", "labelFontWeight", "descriptionFontStyle", "descriptionStyleOptions"] }, { kind: "component", type: SpinnerComponent, selector: "lx-spinner", inputs: ["fadeBackground"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OptionGroupDropdownComponent, decorators: [{
             type: Component,
@@ -8343,7 +8344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AsyncPipe,
                         UpperCasePipe,
                         TranslateModule
-                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent; context: { keyboardSelectContainer: keyboardSelectContainer }\" />\n}\n\n<ng-template #dropdownContent let-keyboardSelectContainer=\"keyboardSelectContainer\">\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
+                    ], template: "@if (overlayPositioning) {\n  <div class=\"overlayOrigin\" cdkOverlayOrigin #selectOrigin=\"cdkOverlayOrigin\"></div>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectOrigin\"\n    [cdkConnectedOverlayOpen]=\"!!(cdkOverlayOpen$ | async)\"\n    [cdkConnectedOverlayWidth]=\"selectOrigin.elementRef.nativeElement.offsetWidth\"\n    (positionChange)=\"onPositionChange($event)\"\n  >\n    <div class=\"overlayDropdown\" [ngClass]=\"{ top: isTopDropdown }\">\n      <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container *ngTemplateOutlet=\"dropdownContent\" />\n}\n\n<ng-template #dropdownContent>\n  <div\n    #keyboardSelectContainer\n    class=\"scrollingPanel lxThinScrollbar\"\n    infinite-scroll\n    [scrollWindow]=\"false\"\n    [fromRoot]=\"true\"\n    (scrolled)=\"containerScrolled.emit()\"\n  >\n    <ul class=\"options\">\n      @if (showCreateNewOption && newOptionLabel && isNewItem) {\n        <li\n          lxSelectableItem\n          [scrollInContainer]=\"keyboardSelectContainer\"\n          #item\n          (click)=\"onCreateNewOption()\"\n          (select)=\"onCreateNewOption()\"\n          [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n          class=\"option\"\n        >\n          <span class=\"newEntryContent\">\n            {{ newOptionLabel }}\n          </span>\n          <lx-counter class=\"lx-margin-left\" size=\"small\" [content]=\"'common.new' | translate | uppercase\" />\n        </li>\n      }\n      @for (optionGroup of optionGroups; track trackByLabel($index, optionGroup); let groupIndex = $index) {\n        <li>\n          @if (optionGroup.label) {\n            <div class=\"groupLabel\">\n              <span>{{ optionGroup.label | uppercase }}</span>\n            </div>\n          }\n          <ul>\n            @if (showNoResultsIfGroupIsEmpty && optionGroup.options.length === 0) {\n              <li class=\"noResult\">\n                @if (noResultsOptionTemplateRef) {\n                  <ng-container *ngTemplateOutlet=\"noResultsOptionTemplateRef; context: { group: optionGroup, groupIndex: groupIndex }\" />\n                } @else {\n                  <span>{{ NAME + '.noResults' | translate }}</span>\n                }\n              </li>\n            } @else {\n              @for (option of optionGroup.options; track trackByValue($index, option); let index = $index) {\n                <li\n                  lxSelectableItem\n                  [scrollInContainer]=\"keyboardSelectContainer\"\n                  #item\n                  class=\"option\"\n                  (click)=\"selectOption(option)\"\n                  (select)=\"selectOption(option)\"\n                  [class.highlighted]=\"isItemSelected(item, (selectedItem$ | async)?.element)\"\n                >\n                  @if (optionTemplateRef) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplateRef; context: { $implicit: option, index: index, groupIndex: groupIndex }\"\n                    />\n                  } @else {\n                    <lx-basic-dropdown-item [label]=\"option.label\" labelFontWeight=\"normal\" [highlightTerm]=\"highlightTerm\" />\n                  }\n                </li>\n              }\n            }\n          </ul>\n        </li>\n      }\n      @if (loading) {\n        <lx-spinner [fadeBackground]=\"true\" />\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.overlayDropdown{width:100%;background:#fff;border-radius:3px;border-left:solid 1px #e1e5eb;border-right:solid 1px #e1e5eb;margin:0 -1px;width:calc(100% + 2px)}.overlayDropdown:not(.top){box-shadow:0 6px 6px #21252933;border-top:0;border-bottom:solid 1px #e1e5eb;border-top-left-radius:0;border-top-right-radius:0}.overlayDropdown.top{box-shadow:0 -4px 6px #21252933;border-top:solid 1px #e1e5eb;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.scrollingPanel{overflow-y:auto;max-height:400px}.groupLabel{line-height:23px;padding:4px 12px;color:#61779d;letter-spacing:.5px;font-weight:700;text-transform:uppercase;cursor:default}ul{list-style:none;margin:0;padding:0}ul:not(:last-child){border-bottom:solid 1px #eaedf1}.noResult{display:block;padding:4px 12px}.option{cursor:pointer;display:block;padding:4px 12px}.option:hover{background-color:#e1e5eb!important}.option.highlighted{background:#eaedf1}\n"] }]
         }], propDecorators: { optionGroups: [{
                 type: Input
             }], newOptionLabel: [{
@@ -10586,6 +10587,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+const Caption = Node$1.create({
+    name: 'caption',
+    group: 'block',
+    content: 'inline*',
+    defining: true,
+    parseHTML() {
+        return [{ tag: 'p[data-type="caption"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['p', mergeAttributes(HTMLAttributes, { 'data-type': 'caption' }), 0];
+    },
+    addCommands() {
+        return {
+            setCaption: () => ({ commands }) => commands.setNode(this.name)
+        };
+    }
+});
+
 const highlightTermStatePluginKey = new PluginKey('highlight-term-state');
 function highlightTermState(_editor) {
     return new Plugin({
@@ -11308,12 +11327,13 @@ class ExtensionsBuilder {
         this.pluginRegistry = {
             Bold: [Bold],
             Truncate: [Truncate],
+            Caption: [Caption],
             Heading: [Heading.configure({ levels: [1, 2, 3, 4] })],
             Italic: [Italic],
             Underline: [Underline],
             Strike: [Strike],
             List: [BulletList, OrderedList],
-            TextAlign: [TextAlign.configure({ types: ['heading', 'paragraph'] })],
+            TextAlign: [TextAlign.configure({ types: ['heading', 'paragraph', 'caption'] })],
             Code: [Code, CodeBlock],
             HighlightTerm: [HighlightTerm],
             Table: [CustomTable, CustomTableCell, CustomTableHeader, CustomTableRow],
@@ -11321,7 +11341,18 @@ class ExtensionsBuilder {
         };
     }
     build(features, output) {
-        const extensions = [Document, Dropcursor, Gapcursor, History, HardBreak, ListItem, Paragraph, Text, Tracking];
+        const extensions = [
+            Document,
+            Dropcursor,
+            Gapcursor,
+            History,
+            HardBreak,
+            ListItem,
+            Paragraph,
+            Placeholder.configure({ placeholder: '' }),
+            Text,
+            Tracking
+        ];
         if (output === 'markdown') {
             extensions.push(...[
                 Markdown.configure({
@@ -12033,6 +12064,8 @@ class RichTextEditorToolbarComponent {
          */
         this.isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
         this.headingLevels = [];
+        this.cdr = inject(ChangeDetectorRef);
+        this.translate = inject(TranslateService);
         this.isLinkModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "isLinkModalOpen" }] : []));
         this.isToolbarVisible = computed(() => {
             const visibility = this.isVisible();
@@ -12049,6 +12082,7 @@ class RichTextEditorToolbarComponent {
                     this.editor.commands.focus();
                 }
             }
+            this.cdr.markForCheck();
         };
     }
     ngOnInit() {
@@ -12061,8 +12095,18 @@ class RichTextEditorToolbarComponent {
     insertTable() {
         this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
     }
+    getActiveBlockLabel() {
+        if (this.editor.isActive('heading')) {
+            const level = this.editor.getAttributes('heading')['level'];
+            return `${this.translate.instant(this.NAME + '.heading')} ${level}`;
+        }
+        if (this.editor.isActive('caption')) {
+            return this.translate.instant(this.NAME + '.captionOption');
+        }
+        return this.translate.instant(this.NAME + '.paragraph');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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') || editor.isActive('caption')\"\n          endIcon=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph') && !editor.isActive('caption')\"\n        >\n          {{ getActiveBlockLabel() }}\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\n        @if ('caption' | lxExtensionEnabled: editor) {\n          <lx-option\n            (select)=\"editor.chain().setCaption().focus().run()\"\n            [hasSelectedState]=\"editor.isActive('caption')\"\n            [selected]=\"editor.isActive('caption')\"\n          >\n            @if (!editor.isActive('caption')) {\n              <ui5-icon name=\"italic-text\" class=\"dropdown-icon\" aria-hidden=\"true\" />\n            }\n            <span>{{ NAME + '.captionOption' | translate }}</span>\n          </lx-option>\n        }\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: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }, { kind: "directive", type: TooltipDirective, selector: "[lxTooltip]", inputs: ["lxTooltip", "lxTooltipPosition", "lxTooltipDelay", "lxTooltipIsHtmlContent"] }, { kind: "component", type: IconComponent, selector: "ui5-icon", inputs: ["design", "name", "accessibleName", "showTooltip", "mode"], outputs: ["ui5Click"], exportAs: ["ui5Icon"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
             type: Component,
@@ -12076,7 +12120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         LinkModalComponent,
                         TooltipDirective,
                         IconComponent
-                    ], 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"] }]
+                    ], 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') || editor.isActive('caption')\"\n          endIcon=\"slim-arrow-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph') && !editor.isActive('caption')\"\n        >\n          {{ getActiveBlockLabel() }}\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\n        @if ('caption' | lxExtensionEnabled: editor) {\n          <lx-option\n            (select)=\"editor.chain().setCaption().focus().run()\"\n            [hasSelectedState]=\"editor.isActive('caption')\"\n            [selected]=\"editor.isActive('caption')\"\n          >\n            @if (!editor.isActive('caption')) {\n              <ui5-icon name=\"italic-text\" class=\"dropdown-icon\" aria-hidden=\"true\" />\n            }\n            <span>{{ NAME + '.captionOption' | translate }}</span>\n          </lx-option>\n        }\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 }]
@@ -12145,7 +12189,7 @@ class RichTextEditorComponent {
                 useExisting: forwardRef(() => RichTextEditorComponent),
                 multi: true
             }
-        ], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor", "isVisible"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -12176,7 +12220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TableBubbleMenuComponent,
                         ExtensionEnabledPipe,
                         TruncateButtonComponent
-                    ], template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}\n"] }]
+                    ], template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\" [isVisible]=\"toolbarVisibility()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}:host ::ng-deep .ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:#99a5bb;pointer-events:none;float:left;height:0}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}:host ::ng-deep .ProseMirror li p{margin:0}:host ::ng-deep .ProseMirror ul,:host ::ng-deep .ProseMirror ol{padding-left:24px}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol{list-style-type:decimal}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .ProseMirror ol ol ol ol ol ol ol ol ol ol ol ol{list-style-type:lower-roman}:host ::ng-deep .ProseMirror p[data-type=caption]{font-size:var(--lxFontHeader5Size);font-style:italic;color:#61779d;margin-top:4px}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], outputFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputFormat", required: true }] }], additionalFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFeatures", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], customExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customExtensions", required: false }] }], autoHideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHideToolbar", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 
 class FocusEditorDirective {
@@ -12218,6 +12262,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { lxHighlightTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "lxHighlightTerm", required: false }] }] } });
 
+class PlaceholderDirective {
+    constructor() {
+        this.lxPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "lxPlaceholder" }] : []));
+        this.editor = inject(TipTapEditorDirective).editor;
+        effect(() => {
+            const extension = this.editor().extensionManager.extensions.find((e) => e.name === 'placeholder');
+            if (extension) {
+                extension.options['placeholder'] = this.lxPlaceholder() ?? '';
+                this.editor().view.dispatch(this.editor().view.state.tr);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: PlaceholderDirective, isStandalone: true, selector: "lx-rich-text-editor[lxPlaceholder]", inputs: { lxPlaceholder: { classPropertyName: "lxPlaceholder", publicName: "lxPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxPlaceholder]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { lxPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "lxPlaceholder", required: false }] }] } });
+
 class TruncateDirective {
     constructor() {
         this.lxTruncate = input(...(ngDevMode ? [undefined, { debugName: "lxTruncate" }] : []));
@@ -13499,5 +13565,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FaToSapIconPipe, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, HighlightTermPipe, ICON_MAP, IMAGE_READER, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, KeyboardSortableItemDirective, KeyboardSortableListDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PageHeaderComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, argsToInterpolatedTemplate, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getSapIcon, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FaToSapIconPipe, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, HighlightTermPipe, ICON_MAP, IMAGE_READER, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, KeyboardSortableItemDirective, KeyboardSortableListDirective, LOCALE_FN, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PageHeaderComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PlaceholderDirective, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, argsToInterpolatedTemplate, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getSapIcon, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
 //# sourceMappingURL=leanix-components.mjs.map