@leanix/components 0.4.959 → 0.4.961

package/fesm2022/leanix-components.mjs

@@ -1,5 +1,5 @@
 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 { 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, Injector, ApplicationRef, createComponent, SecurityContext, Self, Host } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i1 from '@leanix/components/ui5';
@@ -24,21 +24,19 @@ import { Renderer, marked } from 'marked';
 import * as i3 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule, CdkPortal } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import * as i2 from '@angular/cdk/a11y';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@ncstate/sat-popover';
 import { SatPopoverModule, SatPopoverComponent } from '@ncstate/sat-popover';
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i2$2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
 import * as i2$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import * as i2$2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
 import * as i1$4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$5 from '@angular/cdk/bidi';
-import * as i1$6 from '@angular/platform-browser';
 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';
@@ -71,6 +69,7 @@ import { TableCell } from '@tiptap/extension-table-cell';
 import { TableHeader } from '@tiptap/extension-table-header';
 import { TableRow } from '@tiptap/extension-table-row';
 import { trigger, transition, style, animate } from '@angular/animations';
+import * as i1$6 from '@angular/platform-browser';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
 const DATE_FORMATS = new InjectionToken('DATE_FORMATS', {
@@ -5582,6 +5581,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+class DatepickerConfig {
+    constructor() {
+        this.locale = 'en';
+        this.datepickerMode = 'day';
+        this.startingDay = 0;
+        this.yearRange = 20;
+        this.minMode = 'day';
+        this.maxMode = 'year';
+        this.showWeeks = true;
+        this.formatDay = 'dd';
+        this.formatMonth = 'MMMM';
+        this.formatYear = 'yyyy';
+        this.formatDayHeader = 'EE';
+        this.formatDayTitle = 'MMMM yyyy';
+        this.formatMonthTitle = 'yyyy';
+        this.onlyCurrentMonth = false;
+        this.monthColLimit = 3;
+        this.yearColLimit = 5;
+        this.shortcutPropagation = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig, decorators: [{
+            type: Injectable
+        }] });
+
 const isBs3 = () => true;
 
 /**
@@ -6294,33 +6320,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
   `, imports: [NgClass, ButtonComponent], styles: [":host .btn-info .text-success{color:#fff!important}\n"] }]
         }], ctorParameters: () => [{ type: DatePickerInnerComponent }] });
 
-class DatepickerConfig {
-    constructor() {
-        this.locale = 'en';
-        this.datepickerMode = 'day';
-        this.startingDay = 0;
-        this.yearRange = 20;
-        this.minMode = 'day';
-        this.maxMode = 'year';
-        this.showWeeks = true;
-        this.formatDay = 'dd';
-        this.formatMonth = 'MMMM';
-        this.formatYear = 'yyyy';
-        this.formatDayHeader = 'EE';
-        this.formatDayTitle = 'MMMM yyyy';
-        this.formatMonthTitle = 'yyyy';
-        this.onlyCurrentMonth = false;
-        this.monthColLimit = 3;
-        this.yearColLimit = 5;
-        this.shortcutPropagation = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerConfig, decorators: [{
-            type: Injectable
-        }] });
-
 const DATEPICKER_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DatePickerComponent),
@@ -6384,7 +6383,7 @@ class DatePickerComponent {
         this.onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatePickerComponent, deps: [{ token: DatepickerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatePickerComponent, isStandalone: true, selector: "datepicker", inputs: { datepickerMode: "datepickerMode", initDate: "initDate", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", customClass: "customClass", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", activeDateChange: "activeDateChange" }, providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_datePicker", first: true, predicate: DatePickerInnerComponent, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DatePickerComponent, isStandalone: true, selector: "datepicker", inputs: { datepickerMode: "datepickerMode", initDate: "initDate", minDate: "minDate", maxDate: "maxDate", minMode: "minMode", maxMode: "maxMode", showWeeks: "showWeeks", formatDay: "formatDay", formatMonth: "formatMonth", formatYear: "formatYear", formatDayHeader: "formatDayHeader", formatDayTitle: "formatDayTitle", formatMonthTitle: "formatMonthTitle", startingDay: "startingDay", yearRange: "yearRange", onlyCurrentMonth: "onlyCurrentMonth", shortcutPropagation: "shortcutPropagation", monthColLimit: "monthColLimit", yearColLimit: "yearColLimit", customClass: "customClass", dateDisabled: "dateDisabled", dayDisabled: "dayDisabled", activeDate: "activeDate" }, outputs: { selectionDone: "selectionDone", activeDateChange: "activeDateChange" }, providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR, DatepickerConfig], viewQueries: [{ propertyName: "_datePicker", first: true, predicate: DatePickerInnerComponent, descendants: true, static: true }], ngImport: i0, template: `
     <datepicker-inner
       [activeDate]="activeDate"
       (update)="onUpdate($event)"
@@ -6460,7 +6459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       <yearpicker tabindex="0" />
     </datepicker-inner>
   `,
-                    providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR],
+                    providers: [DATEPICKER_CONTROL_VALUE_ACCESSOR, DatepickerConfig],
                     imports: [DatePickerInnerComponent, DayPickerComponent, MonthPickerComponent, YearPickerComponent]
                 }]
         }], ctorParameters: () => [{ type: DatepickerConfig }], propDecorators: { datepickerMode: [{
@@ -6957,22 +6956,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['dateStringTemplate', { read: TemplateRef, static: true }]
             }] } });
 
-class DatepickerUiModule {
-    static forRoot() {
-        return { ngModule: DatepickerUiModule, providers: [DatepickerConfig] };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DatepickerUiModule, imports: [DatePickerComponent], exports: [DatePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerUiModule, imports: [DatePickerComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DatepickerUiModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DatePickerComponent],
-                    exports: [DatePickerComponent]
-                }]
-        }] });
-
 /**
  * Individual item within a drag-and-drop list.
  *
@@ -7338,35 +7321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: [KeyboardSortableItemDirective]
             }] } });
 
-class LxDragAndDropListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
-            DragDropModule, i1$1.TranslateModule, KeyboardSortableItemDirective,
-            KeyboardSortableListDirective,
-            DragAndDropListComponent,
-            DragAndDropListItemComponent], exports: [DragAndDropListComponent, DragAndDropListItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, imports: [CommonModule,
-            DragDropModule,
-            TranslateModule.forChild(),
-            DragAndDropListComponent,
-            DragAndDropListItemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxDragAndDropListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        DragDropModule,
-                        TranslateModule.forChild(),
-                        KeyboardSortableItemDirective,
-                        KeyboardSortableListDirective,
-                        DragAndDropListComponent,
-                        DragAndDropListItemComponent
-                    ],
-                    exports: [DragAndDropListComponent, DragAndDropListItemComponent]
-                }]
-        }] });
-
 /**
  * Displays form validation error messages.
  *
@@ -10045,677 +9999,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }] } });
 
-// /**
-// * Converts HTML to text, preserving semantic newlines for block-level
-// * elements. (Taken from https://stackoverflow.com/a/20384452/6813271)
-// *
-// * @param node - The HTML node to perform text extraction.
-// */
-// export function getNodeTextWithNewlines(node: Element, _inner = false): string {
-//   let result = '';
-//   if (node.nodeType === document.TEXT_NODE) {
-//     // Replace repeated spaces, newlines, and tabs with a single space.
-//     result = node.nodeValue.replace( /\s+/g, ' ' );
-//   } else {
-//     for (let i = 0, j = node.childNodes.length; i < j; i++ ) {
-//       result += this.getNodeTextWithNewlines(node.childNodes[i] as Element, true);
-//     }
-//     const d = node['currentStyle'] ?
-//               node['currentStyle']['display'] :
-//               document.defaultView.getComputedStyle(node, null).getPropertyValue('display');
-//     if (d.match(/^block/)) {
-//       result = '\n' + result + '\n';
-//     } else if (d.match(/list/) || d.match(/row/) || node.tagName === 'BR' || node.tagName === 'HR' ) {
-//       result += '\n';
-//     }
-//   }
-//   return _inner ? result : _.trim(result, '\n');
-// }
-/** Trim whitespaces from html */
-function trimHtml(str) {
-    return str
-        .replace(/(<\/?(br *\/?|p)>|&nbsp;|\s)*$/i, '')
-        .replace(/^(<\/?(br *\/?|p)>|&nbsp;|\s)*/i, '')
-        .replace(/^<(div|p)>(<\/?(br *\/?|p)>|&nbsp;|\s)*<\/ *(div|p)>$/i, '');
-}
-
-// First version based on https://stackoverflow.com/a/41253897/6813271
-class ContenteditableDirective {
-    constructor(elRef, sanitizer) {
-        this.elRef = elRef;
-        this.sanitizer = sanitizer;
-        this.lxContenteditableModelChange = new EventEmitter();
-        /** Allow (sanitized) html */
-        this.lxContenteditableHtml = false;
-        this.lxContenteditableHtmlPaste = true;
-        this.emittedValue = null;
+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)
+        };
     }
-    ngOnChanges(changes) {
-        if (changes['lxContenteditableModel']) {
-            // On init: if lxContenteditableModel is empty, read from DOM in case the element has content
-            if (changes['lxContenteditableModel'].isFirstChange() && !this.lxContenteditableModel) {
-                // Prevent Exp.HasChanged: Don't read and emit value from DOM during change detection
-                setTimeout(() => {
-                    this.onInput(true);
-                });
+});
+
+const highlightTermStatePluginKey = new PluginKey('highlight-term-state');
+function highlightTermState(_editor) {
+    return new Plugin({
+        key: highlightTermStatePluginKey,
+        state: {
+            init() {
+                return { term: null };
+            },
+            apply: (tr, state) => {
+                const meta = tr.getMeta(highlightTermStatePluginKey);
+                return meta ? { ...state, ...meta } : state;
             }
-            this.refreshView();
         }
-    }
-    onInput(initialInlineData = false) {
-        let value = this.elRef.nativeElement[this.getProperty()];
-        value = this.cleanContent(value, initialInlineData);
-        this.emittedValue = value;
-        this.lxContenteditableModelChange.emit(value);
-    }
-    /**
-     * @param event {ClipboardEvent}
-     */
-    onPaste(event) {
-        const clipboardEvent = event;
-        this.onInput();
-        // For text-only contenteditable, remove pasted HTML.
-        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
-            let isHtml = true;
-            // TODO: Use beforepaste event. See https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/.
-            if (clipboardEvent.clipboardData && clipboardEvent.clipboardData.types) {
-                const types = [].slice.apply(clipboardEvent.clipboardData.types);
-                isHtml = intersection(types, ['text/html', 'com.apple.webarchive']).length > 0;
-            }
-            if (isHtml) {
-                // 1 tick wait is required for DOM update
-                setTimeout(() => {
-                    // Cursor will be lost
-                    // The lint disabling here should be clearified. See if and how this directive is needed.
-                    this.elRef.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.elRef.nativeElement.innerText.replace(/\n/g, '<br />'));
-                });
+    });
+}
+
+const highlightTermPluginKey = new PluginKey('highlight-term');
+function highlightTerm(_editor, options) {
+    return new Plugin({
+        key: highlightTermPluginKey,
+        state: {
+            init(_, state) {
+                const term = highlightTermStatePluginKey.getState(state)?.term ?? null;
+                return createDecorations(state.doc, term ?? null, options);
+            },
+            apply(tr, oldDecorationSet, state) {
+                const meta = tr.getMeta(highlightTermStatePluginKey);
+                const oldTerm = highlightTermStatePluginKey.getState(state)?.term ?? null;
+                const termChanged = meta?.term && meta.term !== oldTerm;
+                if (tr.docChanged || termChanged) {
+                    return createDecorations(tr.doc, meta?.term || oldTerm, options);
+                }
+                return oldDecorationSet.map(tr.mapping, tr.doc);
             }
-        }
-    }
-    onDrop(event) {
-        this.onInput();
-        // For text-only contenteditable, don't allow drop content.
-        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-        }
-        return false;
-    }
-    cleanContent(value, initialInlineData = false) {
-        if (this.lxContenteditableHtml === 'trim' || (this.lxContenteditableHtml && initialInlineData)) {
-            value = trimHtml(value);
-        }
-        else if (initialInlineData && !this.lxContenteditableHtml && value) {
-            value = value.replace(/^[\n\s]+/, '');
-            value = value.replace(/[\n\s]+$/, '');
-        }
-        // Some browsers like Chrome insert nbsp; when using contentEditable attribute
-        return new NbspPipe().transform(value);
-    }
-    refreshView() {
-        if (!isNil(this.lxContenteditableModel)) {
-            const newContent = this.cleanContent(this.lxContenteditableModel);
-            // Only refresh if content changed to avoid cursor loss
-            // (as ngOnChanges can be triggered an additional time by onInput())
-            if (this.emittedValue === null || this.emittedValue !== newContent) {
-                this.elRef.nativeElement[this.getProperty()] = this.sanitize(newContent);
+        },
+        props: {
+            decorations(state) {
+                return this.getState(state);
             }
         }
-    }
-    getProperty() {
-        return this.lxContenteditableHtml ? 'innerHTML' : 'innerText';
-    }
-    sanitize(content) {
-        return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxContenteditableModel]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$6.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
-                type: Input
-            }], lxContenteditableModelChange: [{
-                type: Output
-            }], lxContenteditableHtml: [{
-                type: Input
-            }], lxContenteditableHtmlPaste: [{
-                type: Input
-            }], onInput: [{
-                type: HostListener,
-                args: ['input']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }, {
-                type: HostListener,
-                args: ['keyup']
-            }], onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
-class FormSubmitDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.submitted$ = new BehaviorSubject(false);
-        this.subscription = fromEvent(this.elementRef.nativeElement, 'submit')
-            .pipe(take(1))
-            .subscribe(() => this.submitted$.next(true));
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormSubmitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormSubmitDirective, isStandalone: true, selector: "form", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormSubmitDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'form'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
-const FORM_CONTROL_ERROR_NAMESPACE = new InjectionToken('FORM_CONTROL_ERROR_NAMESPACE');
-const FORM_CONTROL_ERROR_DISPLAY_STRATEGY = new InjectionToken('FORM_CONTROL_ERROR_DISPLAY_STRATEGY');
-const provideFormControlErrorNamespace = (namespace) => ({
-    provide: FORM_CONTROL_ERROR_NAMESPACE,
-    useValue: namespace
-});
-const provideFormControlErrorDisplayStrategy = (fn) => ({
-    provide: FORM_CONTROL_ERROR_DISPLAY_STRATEGY,
-    useValue: fn
-});
-class FormErrorDirective {
-    get control() {
-        return this.ngControl?.control || this.ctrl || null;
-    }
-    get name() {
-        return this.ngControl?.name || this.controlName;
-    }
-    get formSubmitted() {
-        return this.formSubmitDirective ? this.formSubmitDirective.submitted$ : of(undefined);
-    }
-    constructor(viewContainer, componentFactoryResolver, translateService, destroyRef, ngControl, formSubmitDirective, namespace, strategy) {
-        this.viewContainer = viewContainer;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.translateService = translateService;
-        this.destroyRef = destroyRef;
-        this.ngControl = ngControl;
-        this.formSubmitDirective = formSubmitDirective;
-        this.namespace = namespace;
-        this.strategy = strategy;
-    }
-    ngOnInit() {
-        const control = this.control;
-        if (isAbstractControl(control)) {
-            combineLatest([control.valueChanges.pipe(startWith(control.value)), this.formSubmitted])
-                .pipe(map(([, submitted]) => submitted), map(resolveStrategy(this.strategy, control)), takeUntilDestroyed(this.destroyRef))
-                .subscribe((display) => {
-                const { errors } = control;
-                if (errors && display) {
-                    const firstErrorKey = Object.keys(errors)[0];
-                    const translationKey = this.buildTranslationKey(firstErrorKey);
-                    this.setError(translationKey);
-                }
-                else if (this.ref) {
-                    this.setError();
-                }
-            });
-        }
-    }
-    buildTranslationKey(errorKey) {
-        if (this.control) {
-            return `${this.namespace || 'form'}.errors.${this.name ? `${this.name}.` : ''}${errorKey}`;
-        }
-        else {
-            return '';
-        }
-    }
-    setError(key) {
-        if (!this.ref) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(ErrorMessageComponent);
-            this.ref = this.viewContainer.createComponent(factory);
-        }
-        if (key) {
-            this.translateService
-                .get(key)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe((message) => {
-                if (this.ref) {
-                    this.ref.instance.dynamicErrorMessage.set(message);
-                }
-            });
-        }
-        else {
-            this.ref.instance.dynamicErrorMessage.set('');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i2$2.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[lxFormError]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i2$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: FormSubmitDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FORM_CONTROL_ERROR_NAMESPACE]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [FORM_CONTROL_ERROR_DISPLAY_STRATEGY]
-                }] }], propDecorators: { ctrl: [{
-                type: Input,
-                args: ['lxFormError']
-            }], controlName: [{
-                type: Input
-            }] } });
-const isAbstractControl = (ctrl) => !!ctrl;
-const resolveStrategy = curry((strategy, control, submitted) => strategy ? strategy({ control, submitted }) : true);
-
-class FilterSelectionPipe {
-    transform(items, selection, itemKey) {
-        const isArray = Array.isArray(selection);
-        return filter$1((item) => {
-            if (isArray) {
-                if (isObject(item)) {
-                    return itemKey
-                        ? !find((selectedItem) => selectedItem?.[itemKey] === item?.[itemKey], selection)
-                        : !find(item, selection);
-                }
-                else {
-                    return !includes(item, selection);
-                }
-            }
-            else {
-                return !isEqual$1(item, selection);
-            }
-        }, items);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, isStandalone: true, name: "lxFilterBySelection" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxFilterBySelection'
-                }]
-        }] });
-
-class FilterTermPipe {
-    transform(items, options) {
-        if (items === null) {
-            return [];
-        }
-        if (options.term) {
-            return filter$1((item) => {
-                const value = options.key ? item[options.key] : item;
-                return toLower(value).indexOf(toLower(options.term)) > -1;
-            }, items);
-        }
-        else {
-            return items;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, isStandalone: true, name: "lxFilterByTerm" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxFilterByTerm'
-                }]
-        }] });
-
-/**
- * Reformats numbers into a short format.
- * @example {{ 1000 | lxFormatNumber | async }} prints 1K
- *
- * If the parameter currency is set, a currency sign is inserted based on the value and the current locale.
- * In this case, the pipe must be used with an innerHtml attribute.
- * @example [innerHtml]="1000 | lxFormatNumber: 'USD' | async" prints $1K
- */
-class FormatNumberPipe {
-    constructor(getLocale) {
-        this.getLocale = getLocale;
-    }
-    transform(number, currency) {
-        const locale$ = this.getLocale();
-        return locale$.pipe(map((locale) => {
-            if (number === null || number === undefined) {
-                return null;
-            }
-            const options = {
-                notation: 'compact',
-                compactDisplay: 'short'
-            };
-            if (currency) {
-                try {
-                    const currencyOptions = { ...options, currency, style: 'currency' };
-                    const formatedNumberWithCurrency = new Intl.NumberFormat(locale, currencyOptions).format(number);
-                    return this.getFormatedCurrency(formatedNumberWithCurrency, currency);
-                }
-                catch (_error) {
-                    console.warn(`FormatNumberPipe: Invalid currency code: ${currency}`);
-                    return new Intl.NumberFormat(locale, options).format(number);
-                }
-            }
-            return new Intl.NumberFormat(locale, options).format(number);
-        }));
-    }
-    /**
-     * Use custom currency symbol, when the currency in the formated number doesn't match the
-     * symbol in the CURRENCY_SYMBOL_MAP.
-     */
-    getFormatedCurrency(formatedNumberWitCurrency, currency) {
-        const currencyMapping = CURRENCY_SYMBOL_MAP[currency];
-        if (currencyMapping && currencyMapping !== currency && !formatedNumberWitCurrency.includes(currencyMapping)) {
-            return formatedNumberWitCurrency.replace(currency, currencyMapping);
-        }
-        return formatedNumberWitCurrency;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, deps: [{ token: LOCALE_FN }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "lxFormatNumber" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'lxFormatNumber'
-                }]
-        }], ctorParameters: () => [{ type: Function, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_FN]
-                }] }] });
-
-const FORMS_MODULE_EXPORTS = [
-    BasicDropdownComponent,
-    BasicDropdownItemComponent,
-    BreadcrumbComponent,
-    CurrencyInputComponent,
-    CurrencySymbolComponent,
-    DateInputComponent,
-    FilterSelectionPipe,
-    FilterTermPipe,
-    FormErrorComponent,
-    KeyboardActionSourceDirective,
-    MarkInvalidDirective,
-    MultiSelectComponent,
-    OptionComponent,
-    OptionGroupComponent,
-    OptionGroupDropdownComponent,
-    OptionsDropdownComponent,
-    OptionsSubDropdownComponent,
-    CdkOptionsDropdownComponent,
-    CdkOptionsSubDropdownComponent,
-    PickerComponent,
-    PickerOptionComponent,
-    PickerTriggerDirective,
-    PillListComponent,
-    PillItemComponent,
-    ResponsiveInputComponent,
-    SelectableItemDirective,
-    SelectDropdownDirective,
-    SelectedOptionDirective,
-    SingleSelectComponent,
-    SwitchComponent,
-    SortingDropdownComponent,
-    SortingDropdownTriggerComponent,
-    FormatNumberPipe,
-    FormErrorDirective,
-    FormSubmitDirective,
-    ErrorMessageComponent,
-    LxDragAndDropListModule,
-    ContenteditableDirective,
-    InputComponent
-];
-class LxFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule, i1$1.TranslateModule, DatepickerUiModule, InfiniteScrollModule,
-            ClipboardModule,
-            OverlayModule,
-            LxDragAndDropListModule,
-            BasicDropdownComponent,
-            BasicDropdownItemComponent,
-            BreadcrumbComponent,
-            CurrencyInputComponent,
-            CurrencySymbolComponent,
-            DateInputComponent,
-            FilterSelectionPipe,
-            FilterTermPipe,
-            FormErrorComponent,
-            KeyboardActionSourceDirective,
-            MarkInvalidDirective,
-            MultiSelectComponent,
-            OptionComponent,
-            OptionGroupComponent,
-            OptionGroupDropdownComponent,
-            OptionsDropdownComponent,
-            OptionsSubDropdownComponent,
-            CdkOptionsDropdownComponent,
-            CdkOptionsSubDropdownComponent,
-            PickerComponent,
-            PickerOptionComponent,
-            PickerTriggerDirective,
-            PillListComponent,
-            PillItemComponent,
-            ResponsiveInputComponent,
-            SelectableItemDirective,
-            SelectedOptionDirective,
-            SelectDropdownDirective,
-            SingleSelectComponent,
-            SwitchComponent,
-            SortingDropdownComponent,
-            SortingDropdownTriggerComponent,
-            InputComponent,
-            FormatNumberPipe,
-            FormErrorDirective,
-            ErrorMessageComponent,
-            FormSubmitDirective,
-            ContenteditableDirective], exports: [BasicDropdownComponent,
-            BasicDropdownItemComponent,
-            BreadcrumbComponent,
-            CurrencyInputComponent,
-            CurrencySymbolComponent,
-            DateInputComponent,
-            FilterSelectionPipe,
-            FilterTermPipe,
-            FormErrorComponent,
-            KeyboardActionSourceDirective,
-            MarkInvalidDirective,
-            MultiSelectComponent,
-            OptionComponent,
-            OptionGroupComponent,
-            OptionGroupDropdownComponent,
-            OptionsDropdownComponent,
-            OptionsSubDropdownComponent,
-            CdkOptionsDropdownComponent,
-            CdkOptionsSubDropdownComponent,
-            PickerComponent,
-            PickerOptionComponent,
-            PickerTriggerDirective,
-            PillListComponent,
-            PillItemComponent,
-            ResponsiveInputComponent,
-            SelectableItemDirective,
-            SelectDropdownDirective,
-            SelectedOptionDirective,
-            SingleSelectComponent,
-            SwitchComponent,
-            SortingDropdownComponent,
-            SortingDropdownTriggerComponent,
-            FormatNumberPipe,
-            FormErrorDirective,
-            FormSubmitDirective,
-            ErrorMessageComponent,
-            LxDragAndDropListModule,
-            ContenteditableDirective,
-            InputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule.forChild(),
-            DatepickerUiModule.forRoot(),
-            InfiniteScrollModule,
-            ClipboardModule,
-            OverlayModule,
-            LxDragAndDropListModule,
-            BasicDropdownComponent,
-            BreadcrumbComponent,
-            CurrencyInputComponent,
-            DateInputComponent,
-            FormErrorComponent,
-            MultiSelectComponent,
-            OptionComponent,
-            OptionGroupDropdownComponent,
-            PickerOptionComponent,
-            PillListComponent,
-            PillItemComponent,
-            ResponsiveInputComponent,
-            SingleSelectComponent,
-            SortingDropdownComponent,
-            SortingDropdownTriggerComponent,
-            InputComponent, LxDragAndDropListModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LxFormsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TranslateModule.forChild(),
-                        DatepickerUiModule.forRoot(),
-                        InfiniteScrollModule,
-                        ClipboardModule,
-                        OverlayModule,
-                        LxDragAndDropListModule,
-                        BasicDropdownComponent,
-                        BasicDropdownItemComponent,
-                        BreadcrumbComponent,
-                        CurrencyInputComponent,
-                        CurrencySymbolComponent,
-                        DateInputComponent,
-                        FilterSelectionPipe,
-                        FilterTermPipe,
-                        FormErrorComponent,
-                        KeyboardActionSourceDirective,
-                        MarkInvalidDirective,
-                        MultiSelectComponent,
-                        OptionComponent,
-                        OptionGroupComponent,
-                        OptionGroupDropdownComponent,
-                        OptionsDropdownComponent,
-                        OptionsSubDropdownComponent,
-                        CdkOptionsDropdownComponent,
-                        CdkOptionsSubDropdownComponent,
-                        PickerComponent,
-                        PickerOptionComponent,
-                        PickerTriggerDirective,
-                        PillListComponent,
-                        PillItemComponent,
-                        ResponsiveInputComponent,
-                        SelectableItemDirective,
-                        SelectedOptionDirective,
-                        SelectDropdownDirective,
-                        SingleSelectComponent,
-                        SwitchComponent,
-                        SortingDropdownComponent,
-                        SortingDropdownTriggerComponent,
-                        InputComponent,
-                        FormatNumberPipe,
-                        FormErrorDirective,
-                        ErrorMessageComponent,
-                        FormSubmitDirective,
-                        ContenteditableDirective
-                    ],
-                    exports: FORMS_MODULE_EXPORTS
-                }]
-        }] });
-
-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({
-        key: highlightTermStatePluginKey,
-        state: {
-            init() {
-                return { term: null };
-            },
-            apply: (tr, state) => {
-                const meta = tr.getMeta(highlightTermStatePluginKey);
-                return meta ? { ...state, ...meta } : state;
-            }
-        }
-    });
-}
-
-const highlightTermPluginKey = new PluginKey('highlight-term');
-function highlightTerm(_editor, options) {
-    return new Plugin({
-        key: highlightTermPluginKey,
-        state: {
-            init(_, state) {
-                const term = highlightTermStatePluginKey.getState(state)?.term ?? null;
-                return createDecorations(state.doc, term ?? null, options);
-            },
-            apply(tr, oldDecorationSet, state) {
-                const meta = tr.getMeta(highlightTermStatePluginKey);
-                const oldTerm = highlightTermStatePluginKey.getState(state)?.term ?? null;
-                const termChanged = meta?.term && meta.term !== oldTerm;
-                if (tr.docChanged || termChanged) {
-                    return createDecorations(tr.doc, meta?.term || oldTerm, options);
-                }
-                return oldDecorationSet.map(tr.mapping, tr.doc);
-            }
-        },
-        props: {
-            decorations(state) {
-                return this.getState(state);
-            }
-        }
-    });
+    });
 }
 function createDecorations(doc, term, options) {
     const decorations = [];
@@ -12347,343 +11689,634 @@ class FocusEditorDirective {
             this.editor().commands.focus('start');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FocusEditorDirective, isStandalone: true, selector: "lx-rich-text-editor[lxFocusEditor]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusEditorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'lx-rich-text-editor[lxFocusEditor]'
-                }]
-        }] });
-
-class HighlightTermDirective {
-    constructor() {
-        this.lxHighlightTerm = input(...(ngDevMode ? [undefined, { debugName: "lxHighlightTerm" }] : []));
-        this.editor = inject(TipTapEditorDirective).editor;
-        effect(() => {
-            this.editor().view.dispatch(this.editor().view.state.tr.setMeta(highlightTermStatePluginKey, {
-                term: this.lxHighlightTerm()
-            }));
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FocusEditorDirective, isStandalone: true, selector: "lx-rich-text-editor[lxFocusEditor]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FocusEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxFocusEditor]'
+                }]
+        }] });
+
+class HighlightTermDirective {
+    constructor() {
+        this.lxHighlightTerm = input(...(ngDevMode ? [undefined, { debugName: "lxHighlightTerm" }] : []));
+        this.editor = inject(TipTapEditorDirective).editor;
+        effect(() => {
+            this.editor().view.dispatch(this.editor().view.state.tr.setMeta(highlightTermStatePluginKey, {
+                term: this.lxHighlightTerm()
+            }));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HighlightTermDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: HighlightTermDirective, isStandalone: true, selector: "lx-rich-text-editor[lxHighlightTerm]", inputs: { lxHighlightTerm: { classPropertyName: "lxHighlightTerm", publicName: "lxHighlightTerm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HighlightTermDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxHighlightTerm]'
+                }]
+        }], 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" }] : []));
+        this.editor = inject(TipTapEditorDirective).editor;
+        effect(() => {
+            const options = this.lxTruncate();
+            if (options) {
+                this.editor().view.dispatch(this.editor().view.state.tr.setMeta(truncatePluginKey, options));
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: TruncateDirective, isStandalone: true, selector: "lx-rich-text-editor[lxTruncate]", inputs: { lxTruncate: { classPropertyName: "lxTruncate", publicName: "lxTruncate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxTruncate]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { lxTruncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "lxTruncate", required: false }] }] } });
+
+/**
+ * Base component for custom Tiptap node views in Angular.
+ *
+ * Extend this component to create custom node views for the rich text editor.
+ * Provides all Tiptap NodeViewProps as required input signals.
+ */
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+class AngularNodeViewComponent {
+    constructor() {
+        /** The Tiptap editor instance. */
+        this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
+        /** The ProseMirror node being rendered. */
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+        /** Array of decorations for this node. */
+        this.decorations = input.required(...(ngDevMode ? [{ debugName: "decorations" }] : []));
+        /** Whether the node is currently selected. */
+        this.selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
+        /** The Tiptap extension that created this node. */
+        this.extension = input.required(...(ngDevMode ? [{ debugName: "extension" }] : []));
+        /** Function to get the node's position in the document. */
+        this.getPos = input.required(...(ngDevMode ? [{ debugName: "getPos" }] : []));
+        /** Function to update the node's attributes. */
+        this.updateAttributes = input.required(...(ngDevMode ? [{ debugName: "updateAttributes" }] : []));
+        /** Function to delete the node from the document. */
+        this.deleteNode = input.required(...(ngDevMode ? [{ debugName: "deleteNode" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AngularNodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: AngularNodeViewComponent, isStandalone: true, selector: "ng-component", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: true, transformFunction: null }, getPos: { classPropertyName: "getPos", publicName: "getPos", isSignal: true, isRequired: true, transformFunction: null }, updateAttributes: { classPropertyName: "updateAttributes", publicName: "updateAttributes", isSignal: true, isRequired: true, transformFunction: null }, deleteNode: { classPropertyName: "deleteNode", publicName: "deleteNode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AngularNodeViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], extension: [{ type: i0.Input, args: [{ isSignal: true, alias: "extension", required: true }] }], getPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "getPos", required: true }] }], updateAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateAttributes", required: true }] }], deleteNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteNode", required: true }] }] } });
+
+class AngularRenderer {
+    constructor(ViewComponent, injector, props) {
+        this.applicationRef = injector.get(ApplicationRef);
+        this.componentRef = createComponent(ViewComponent, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: injector
+        });
+        // set input props to the component
+        this.updateProps(props);
+        this.applicationRef.attachView(this.componentRef.hostView);
+    }
+    get instance() {
+        return this.componentRef.instance;
+    }
+    get elementRef() {
+        return this.componentRef.injector.get(ElementRef);
+    }
+    get dom() {
+        return this.elementRef.nativeElement;
+    }
+    updateProps(props) {
+        Object.entries(props).forEach(([key, value]) => {
+            this.componentRef.setInput(key, value);
+        });
+    }
+    detectChanges() {
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    destroy() {
+        this.componentRef.destroy();
+        this.applicationRef.detachView(this.componentRef.hostView);
+    }
+}
+
+class AngularNodeView extends NodeView {
+    mount() {
+        const injector = this.options.injector;
+        const props = {
+            editor: this.editor,
+            node: this.node,
+            decorations: this.decorations,
+            selected: false,
+            extension: this.extension,
+            getPos: () => this.getPos(),
+            updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+            deleteNode: () => this.deleteNode()
+        };
+        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
+        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
+        this.editor.on('blur', this.handleBlur);
+        // create renderer
+        this.renderer = new AngularRenderer(this.component, injector, props);
+        // Register drag handler
+        if (this.extension.config.draggable) {
+            this.renderer.elementRef.nativeElement.ondragstart = (e) => {
+                this.onDragStart(e);
+            };
+        }
+        this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? 'span' : 'div');
+        if (this.contentDOMElement) {
+            // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+            // With this fix it seems to work fine
+            // See: https://github.com/ueberdosis/tiptap/issues/1197
+            this.contentDOMElement.style.whiteSpace = 'inherit';
+            // Required for editable node views
+            // The content won't be rendered if `editable` is set to `false`
+            this.renderer.detectChanges();
+        }
+        this.appendContendDom();
+        /**
+         * Ensure the node is selected when clicked.
+         *
+         * ProseMirror/Tiptap sometimes does not trigger `selectionUpdate` for single-node editors
+         * or when the node is already implicitly selected. By explicitly creating a NodeSelection
+         * and dispatching it, we force ProseMirror to treat this node as newly selected, which
+         * triggers `handleSelectionUpdate` and updates the NodeView's selected state.
+         */
+        this.handleMouseDown = (event) => {
+            if (!this.editor.isEditable)
+                return;
+            const pos = this.getPos();
+            const nodeSelection = NodeSelection.create(this.editor.state.doc, pos);
+            const tr = this.editor.state.tr.setSelection(nodeSelection);
+            this.editor.view.dispatch(tr);
+            this.editor.view.focus();
+            this.selectNode();
+            event.stopPropagation();
+        };
+        const selection = this.editor.state.selection;
+        if (selection instanceof NodeSelection && selection.node.type.name === 'lxDiagram') {
+            this.dom.addEventListener('mousedown', this.handleMouseDown);
+        }
+    }
+    get dom() {
+        return this.renderer.dom;
+    }
+    get contentDOM() {
+        if (this.node.isLeaf) {
+            return null;
+        }
+        return this.contentDOMElement;
+    }
+    appendContendDom() {
+        const contentElement = this.dom.querySelector('[data-node-view-content]');
+        if (this.contentDOMElement && contentElement && !contentElement.contains(this.contentDOMElement)) {
+            contentElement.appendChild(this.contentDOMElement);
+        }
+    }
+    handleBlur() {
+        this.deselectNode();
+    }
+    handleSelectionUpdate() {
+        const { from, to } = this.editor.state.selection;
+        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+            this.selectNode();
+        }
+        else {
+            this.deselectNode();
+        }
+    }
+    update(node, decorations, _innerDecorations) {
+        const updateProps = () => {
+            this.renderer.updateProps({ node, decorations: decorations });
+        };
+        if (this.options.update) {
+            const oldNode = this.node;
+            const oldDecorations = this.decorations;
+            this.node = node;
+            this.decorations = decorations;
+            return this.options.update({
+                oldNode,
+                oldDecorations,
+                newNode: node,
+                newDecorations: decorations,
+                updateProps: () => updateProps()
+            });
+        }
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        if (node === this.node && this.decorations === decorations) {
+            return true;
+        }
+        this.node = node;
+        this.decorations = decorations;
+        updateProps();
+        return true;
+    }
+    selectNode() {
+        if (!this.editor.isEditable)
+            return;
+        this.renderer.updateProps({ selected: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HighlightTermDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: HighlightTermDirective, isStandalone: true, selector: "lx-rich-text-editor[lxHighlightTerm]", inputs: { lxHighlightTerm: { classPropertyName: "lxHighlightTerm", publicName: "lxHighlightTerm", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: HighlightTermDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'lx-rich-text-editor[lxHighlightTerm]'
-                }]
-        }], 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);
-            }
-        });
+    deselectNode() {
+        this.renderer.updateProps({ selected: false });
     }
-    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" }] : []));
-        this.editor = inject(TipTapEditorDirective).editor;
-        effect(() => {
-            const options = this.lxTruncate();
-            if (options) {
-                this.editor().view.dispatch(this.editor().view.state.tr.setMeta(truncatePluginKey, options));
-            }
-        });
+    destroy() {
+        this.renderer.destroy();
+        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+        if (this.handleMouseDown) {
+            this.dom.removeEventListener('mousedown', this.handleMouseDown);
+            this.handleMouseDown = undefined;
+        }
+        this.contentDOMElement = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: TruncateDirective, isStandalone: true, selector: "lx-rich-text-editor[lxTruncate]", inputs: { lxTruncate: { classPropertyName: "lxTruncate", publicName: "lxTruncate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TruncateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'lx-rich-text-editor[lxTruncate]'
-                }]
-        }], ctorParameters: () => [], propDecorators: { lxTruncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "lxTruncate", required: false }] }] } });
+const AngularNodeViewRenderer = (ViewComponent, options) => {
+    return (props) => {
+        return new AngularNodeView(ViewComponent, props, options);
+    };
+};
 
 /**
- * Base component for custom Tiptap node views in Angular.
+ * Removes markdown syntax from text.
+ * e.g '### This is a heading' will become 'This is a heading'
  *
- * Extend this component to create custom node views for the rich text editor.
- * Provides all Tiptap NodeViewProps as required input signals.
+ * It does not remove links. Links can be post processed by LxLinkifyPipe or LxUnLinkifyPipe
  */
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-class AngularNodeViewComponent {
-    constructor() {
-        /** The Tiptap editor instance. */
-        this.editor = input.required(...(ngDevMode ? [{ debugName: "editor" }] : []));
-        /** The ProseMirror node being rendered. */
-        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-        /** Array of decorations for this node. */
-        this.decorations = input.required(...(ngDevMode ? [{ debugName: "decorations" }] : []));
-        /** Whether the node is currently selected. */
-        this.selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
-        /** The Tiptap extension that created this node. */
-        this.extension = input.required(...(ngDevMode ? [{ debugName: "extension" }] : []));
-        /** Function to get the node's position in the document. */
-        this.getPos = input.required(...(ngDevMode ? [{ debugName: "getPos" }] : []));
-        /** Function to update the node's attributes. */
-        this.updateAttributes = input.required(...(ngDevMode ? [{ debugName: "updateAttributes" }] : []));
-        /** Function to delete the node from the document. */
-        this.deleteNode = input.required(...(ngDevMode ? [{ debugName: "deleteNode" }] : []));
+class RemoveMarkdownPipe {
+    transform(markdown) {
+        return markdownToText(markdown);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AngularNodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: AngularNodeViewComponent, isStandalone: true, selector: "ng-component", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, extension: { classPropertyName: "extension", publicName: "extension", isSignal: true, isRequired: true, transformFunction: null }, getPos: { classPropertyName: "getPos", publicName: "getPos", isSignal: true, isRequired: true, transformFunction: null }, updateAttributes: { classPropertyName: "updateAttributes", publicName: "updateAttributes", isSignal: true, isRequired: true, transformFunction: null }, deleteNode: { classPropertyName: "deleteNode", publicName: "deleteNode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, isStandalone: true, name: "lxRemoveMarkdown" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AngularNodeViewComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    template: ''
+                    name: 'lxRemoveMarkdown'
                 }]
-        }], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], extension: [{ type: i0.Input, args: [{ isSignal: true, alias: "extension", required: true }] }], getPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "getPos", required: true }] }], updateAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateAttributes", required: true }] }], deleteNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteNode", required: true }] }] } });
+        }] });
+function markdownToText(md) {
+    let output = md || '';
+    try {
+        output = output
+            // Remove horizontal rules (stripListHeaders conflict with this rule, which is why it has been moved to the top)
+            .replace(/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/gm, '')
+            // stripListLeaders
+            .replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1')
+            // Strikethrough
+            .replace(/~~/g, '')
+            // Fenced codeblocks with backticks
+            .replace(/```(?:.*)\n([\s\S]*?)```/g, (_, code) => code.trim())
+            // Remove HTML tags
+            .replace(/<[^>]*>/g, '')
+            // Remove images
+            .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+            // Remove blockquotes
+            .replace(/^(\n)?\s{0,3}>\s?/gm, '$1')
+            // Remove atx-style headers
+            .replace(/^(\n)?\s{0,}#{1,6}\s*( (.+))? +#+$|^(\n)?\s{0,}#{1,6}\s*( (.+))?$/gm, '$1$3$4$6')
+            // Remove * emphasis
+            .replace(/([\*]+)(\S)(.*?\S)??\1/g, '$2$3')
+            // Remove _ emphasis. Unlike *, _ emphasis gets rendered only if
+            //   1. Either there is a whitespace character before opening _ and after closing _.
+            //   2. Or _ is at the start/end of the string.
+            .replace(/(^|\W)([_]+)(\S)(.*?\S)??\2($|\W)/g, '$1$3$4$5')
+            // Remove single-line code blocks (already handled multiline above )
+            .replace(/(`{3,})(.*?)\1/gm, '$2')
+            // Remove inline code
+            .replace(/`(.+?)`/g, '$1');
+    }
+    catch (e) {
+        return md;
+    }
+    return output;
+}
 
-class AngularRenderer {
-    constructor(ViewComponent, injector, props) {
-        this.applicationRef = injector.get(ApplicationRef);
-        this.componentRef = createComponent(ViewComponent, {
-            environmentInjector: this.applicationRef.injector,
-            elementInjector: injector
-        });
-        // set input props to the component
-        this.updateProps(props);
-        this.applicationRef.attachView(this.componentRef.hostView);
+// /**
+// * Converts HTML to text, preserving semantic newlines for block-level
+// * elements. (Taken from https://stackoverflow.com/a/20384452/6813271)
+// *
+// * @param node - The HTML node to perform text extraction.
+// */
+// export function getNodeTextWithNewlines(node: Element, _inner = false): string {
+//   let result = '';
+//   if (node.nodeType === document.TEXT_NODE) {
+//     // Replace repeated spaces, newlines, and tabs with a single space.
+//     result = node.nodeValue.replace( /\s+/g, ' ' );
+//   } else {
+//     for (let i = 0, j = node.childNodes.length; i < j; i++ ) {
+//       result += this.getNodeTextWithNewlines(node.childNodes[i] as Element, true);
+//     }
+//     const d = node['currentStyle'] ?
+//               node['currentStyle']['display'] :
+//               document.defaultView.getComputedStyle(node, null).getPropertyValue('display');
+//     if (d.match(/^block/)) {
+//       result = '\n' + result + '\n';
+//     } else if (d.match(/list/) || d.match(/row/) || node.tagName === 'BR' || node.tagName === 'HR' ) {
+//       result += '\n';
+//     }
+//   }
+//   return _inner ? result : _.trim(result, '\n');
+// }
+/** Trim whitespaces from html */
+function trimHtml(str) {
+    return str
+        .replace(/(<\/?(br *\/?|p)>|&nbsp;|\s)*$/i, '')
+        .replace(/^(<\/?(br *\/?|p)>|&nbsp;|\s)*/i, '')
+        .replace(/^<(div|p)>(<\/?(br *\/?|p)>|&nbsp;|\s)*<\/ *(div|p)>$/i, '');
+}
+
+// First version based on https://stackoverflow.com/a/41253897/6813271
+class ContenteditableDirective {
+    constructor(elRef, sanitizer) {
+        this.elRef = elRef;
+        this.sanitizer = sanitizer;
+        this.lxContenteditableModelChange = new EventEmitter();
+        /** Allow (sanitized) html */
+        this.lxContenteditableHtml = false;
+        this.lxContenteditableHtmlPaste = true;
+        this.emittedValue = null;
+    }
+    ngOnChanges(changes) {
+        if (changes['lxContenteditableModel']) {
+            // On init: if lxContenteditableModel is empty, read from DOM in case the element has content
+            if (changes['lxContenteditableModel'].isFirstChange() && !this.lxContenteditableModel) {
+                // Prevent Exp.HasChanged: Don't read and emit value from DOM during change detection
+                setTimeout(() => {
+                    this.onInput(true);
+                });
+            }
+            this.refreshView();
+        }
+    }
+    onInput(initialInlineData = false) {
+        let value = this.elRef.nativeElement[this.getProperty()];
+        value = this.cleanContent(value, initialInlineData);
+        this.emittedValue = value;
+        this.lxContenteditableModelChange.emit(value);
     }
-    get instance() {
-        return this.componentRef.instance;
+    /**
+     * @param event {ClipboardEvent}
+     */
+    onPaste(event) {
+        const clipboardEvent = event;
+        this.onInput();
+        // For text-only contenteditable, remove pasted HTML.
+        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
+            let isHtml = true;
+            // TODO: Use beforepaste event. See https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/.
+            if (clipboardEvent.clipboardData && clipboardEvent.clipboardData.types) {
+                const types = [].slice.apply(clipboardEvent.clipboardData.types);
+                isHtml = intersection(types, ['text/html', 'com.apple.webarchive']).length > 0;
+            }
+            if (isHtml) {
+                // 1 tick wait is required for DOM update
+                setTimeout(() => {
+                    // Cursor will be lost
+                    // The lint disabling here should be clearified. See if and how this directive is needed.
+                    this.elRef.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.elRef.nativeElement.innerText.replace(/\n/g, '<br />'));
+                });
+            }
+        }
     }
-    get elementRef() {
-        return this.componentRef.injector.get(ElementRef);
+    onDrop(event) {
+        this.onInput();
+        // For text-only contenteditable, don't allow drop content.
+        if (!this.lxContenteditableHtml || !this.lxContenteditableHtmlPaste) {
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        return false;
     }
-    get dom() {
-        return this.elementRef.nativeElement;
+    cleanContent(value, initialInlineData = false) {
+        if (this.lxContenteditableHtml === 'trim' || (this.lxContenteditableHtml && initialInlineData)) {
+            value = trimHtml(value);
+        }
+        else if (initialInlineData && !this.lxContenteditableHtml && value) {
+            value = value.replace(/^[\n\s]+/, '');
+            value = value.replace(/[\n\s]+$/, '');
+        }
+        // Some browsers like Chrome insert nbsp; when using contentEditable attribute
+        return new NbspPipe().transform(value);
     }
-    updateProps(props) {
-        Object.entries(props).forEach(([key, value]) => {
-            this.componentRef.setInput(key, value);
-        });
+    refreshView() {
+        if (!isNil(this.lxContenteditableModel)) {
+            const newContent = this.cleanContent(this.lxContenteditableModel);
+            // Only refresh if content changed to avoid cursor loss
+            // (as ngOnChanges can be triggered an additional time by onInput())
+            if (this.emittedValue === null || this.emittedValue !== newContent) {
+                this.elRef.nativeElement[this.getProperty()] = this.sanitize(newContent);
+            }
+        }
     }
-    detectChanges() {
-        this.componentRef.changeDetectorRef.detectChanges();
+    getProperty() {
+        return this.lxContenteditableHtml ? 'innerHTML' : 'innerText';
     }
-    destroy() {
-        this.componentRef.destroy();
-        this.applicationRef.detachView(this.componentRef.hostView);
+    sanitize(content) {
+        return this.lxContenteditableHtml ? this.sanitizer.sanitize(SecurityContext.HTML, content) : content;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, deps: [{ token: i0.ElementRef }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: ContenteditableDirective, isStandalone: true, selector: "[lxContenteditableModel]", inputs: { lxContenteditableModel: "lxContenteditableModel", lxContenteditableHtml: "lxContenteditableHtml", lxContenteditableHtmlPaste: "lxContenteditableHtmlPaste" }, outputs: { lxContenteditableModelChange: "lxContenteditableModelChange" }, host: { listeners: { "input": "onInput()", "blur": "onInput()", "keyup": "onInput()", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ContenteditableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxContenteditableModel]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$6.DomSanitizer }], propDecorators: { lxContenteditableModel: [{
+                type: Input
+            }], lxContenteditableModelChange: [{
+                type: Output
+            }], lxContenteditableHtml: [{
+                type: Input
+            }], lxContenteditableHtmlPaste: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }, {
+                type: HostListener,
+                args: ['keyup']
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
 
-class AngularNodeView extends NodeView {
-    mount() {
-        const injector = this.options.injector;
-        const props = {
-            editor: this.editor,
-            node: this.node,
-            decorations: this.decorations,
-            selected: false,
-            extension: this.extension,
-            getPos: () => this.getPos(),
-            updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
-            deleteNode: () => this.deleteNode()
-        };
-        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
-        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
-        this.editor.on('blur', this.handleBlur);
-        // create renderer
-        this.renderer = new AngularRenderer(this.component, injector, props);
-        // Register drag handler
-        if (this.extension.config.draggable) {
-            this.renderer.elementRef.nativeElement.ondragstart = (e) => {
-                this.onDragStart(e);
-            };
-        }
-        this.contentDOMElement = this.node.isLeaf ? null : document.createElement(this.node.isInline ? 'span' : 'div');
-        if (this.contentDOMElement) {
-            // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
-            // With this fix it seems to work fine
-            // See: https://github.com/ueberdosis/tiptap/issues/1197
-            this.contentDOMElement.style.whiteSpace = 'inherit';
-            // Required for editable node views
-            // The content won't be rendered if `editable` is set to `false`
-            this.renderer.detectChanges();
-        }
-        this.appendContendDom();
-        /**
-         * Ensure the node is selected when clicked.
-         *
-         * ProseMirror/Tiptap sometimes does not trigger `selectionUpdate` for single-node editors
-         * or when the node is already implicitly selected. By explicitly creating a NodeSelection
-         * and dispatching it, we force ProseMirror to treat this node as newly selected, which
-         * triggers `handleSelectionUpdate` and updates the NodeView's selected state.
-         */
-        this.handleMouseDown = (event) => {
-            if (!this.editor.isEditable)
-                return;
-            const pos = this.getPos();
-            const nodeSelection = NodeSelection.create(this.editor.state.doc, pos);
-            const tr = this.editor.state.tr.setSelection(nodeSelection);
-            this.editor.view.dispatch(tr);
-            this.editor.view.focus();
-            this.selectNode();
-            event.stopPropagation();
-        };
-        const selection = this.editor.state.selection;
-        if (selection instanceof NodeSelection && selection.node.type.name === 'lxDiagram') {
-            this.dom.addEventListener('mousedown', this.handleMouseDown);
-        }
-    }
-    get dom() {
-        return this.renderer.dom;
+class FormSubmitDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.submitted$ = new BehaviorSubject(false);
+        this.subscription = fromEvent(this.elementRef.nativeElement, 'submit')
+            .pipe(take(1))
+            .subscribe(() => this.submitted$.next(true));
     }
-    get contentDOM() {
-        if (this.node.isLeaf) {
-            return null;
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
         }
-        return this.contentDOMElement;
     }
-    appendContendDom() {
-        const contentElement = this.dom.querySelector('[data-node-view-content]');
-        if (this.contentDOMElement && contentElement && !contentElement.contains(this.contentDOMElement)) {
-            contentElement.appendChild(this.contentDOMElement);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormSubmitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormSubmitDirective, isStandalone: true, selector: "form", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormSubmitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'form'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+const FORM_CONTROL_ERROR_NAMESPACE = new InjectionToken('FORM_CONTROL_ERROR_NAMESPACE');
+const FORM_CONTROL_ERROR_DISPLAY_STRATEGY = new InjectionToken('FORM_CONTROL_ERROR_DISPLAY_STRATEGY');
+const provideFormControlErrorNamespace = (namespace) => ({
+    provide: FORM_CONTROL_ERROR_NAMESPACE,
+    useValue: namespace
+});
+const provideFormControlErrorDisplayStrategy = (fn) => ({
+    provide: FORM_CONTROL_ERROR_DISPLAY_STRATEGY,
+    useValue: fn
+});
+class FormErrorDirective {
+    get control() {
+        return this.ngControl?.control || this.ctrl || null;
     }
-    handleBlur() {
-        this.deselectNode();
+    get name() {
+        return this.ngControl?.name || this.controlName;
     }
-    handleSelectionUpdate() {
-        const { from, to } = this.editor.state.selection;
-        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
-            this.selectNode();
-        }
-        else {
-            this.deselectNode();
-        }
+    get formSubmitted() {
+        return this.formSubmitDirective ? this.formSubmitDirective.submitted$ : of(undefined);
     }
-    update(node, decorations, _innerDecorations) {
-        const updateProps = () => {
-            this.renderer.updateProps({ node, decorations: decorations });
-        };
-        if (this.options.update) {
-            const oldNode = this.node;
-            const oldDecorations = this.decorations;
-            this.node = node;
-            this.decorations = decorations;
-            return this.options.update({
-                oldNode,
-                oldDecorations,
-                newNode: node,
-                newDecorations: decorations,
-                updateProps: () => updateProps()
+    constructor(viewContainer, componentFactoryResolver, translateService, destroyRef, ngControl, formSubmitDirective, namespace, strategy) {
+        this.viewContainer = viewContainer;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.translateService = translateService;
+        this.destroyRef = destroyRef;
+        this.ngControl = ngControl;
+        this.formSubmitDirective = formSubmitDirective;
+        this.namespace = namespace;
+        this.strategy = strategy;
+    }
+    ngOnInit() {
+        const control = this.control;
+        if (isAbstractControl(control)) {
+            combineLatest([control.valueChanges.pipe(startWith(control.value)), this.formSubmitted])
+                .pipe(map(([, submitted]) => submitted), map(resolveStrategy(this.strategy, control)), takeUntilDestroyed(this.destroyRef))
+                .subscribe((display) => {
+                const { errors } = control;
+                if (errors && display) {
+                    const firstErrorKey = Object.keys(errors)[0];
+                    const translationKey = this.buildTranslationKey(firstErrorKey);
+                    this.setError(translationKey);
+                }
+                else if (this.ref) {
+                    this.setError();
+                }
             });
         }
-        if (node.type !== this.node.type) {
-            return false;
+    }
+    buildTranslationKey(errorKey) {
+        if (this.control) {
+            return `${this.namespace || 'form'}.errors.${this.name ? `${this.name}.` : ''}${errorKey}`;
         }
-        if (node === this.node && this.decorations === decorations) {
-            return true;
+        else {
+            return '';
         }
-        this.node = node;
-        this.decorations = decorations;
-        updateProps();
-        return true;
-    }
-    selectNode() {
-        if (!this.editor.isEditable)
-            return;
-        this.renderer.updateProps({ selected: true });
-    }
-    deselectNode() {
-        this.renderer.updateProps({ selected: false });
     }
-    destroy() {
-        this.renderer.destroy();
-        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
-        if (this.handleMouseDown) {
-            this.dom.removeEventListener('mousedown', this.handleMouseDown);
-            this.handleMouseDown = undefined;
+    setError(key) {
+        if (!this.ref) {
+            const factory = this.componentFactoryResolver.resolveComponentFactory(ErrorMessageComponent);
+            this.ref = this.viewContainer.createComponent(factory);
+        }
+        if (key) {
+            this.translateService
+                .get(key)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((message) => {
+                if (this.ref) {
+                    this.ref.instance.dynamicErrorMessage.set(message);
+                }
+            });
+        }
+        else {
+            this.ref.instance.dynamicErrorMessage.set('');
         }
-        this.contentDOMElement = null;
-    }
-}
-const AngularNodeViewRenderer = (ViewComponent, options) => {
-    return (props) => {
-        return new AngularNodeView(ViewComponent, props, options);
-    };
-};
-
-/**
- * Removes markdown syntax from text.
- * e.g '### This is a heading' will become 'This is a heading'
- *
- * It does not remove links. Links can be post processed by LxLinkifyPipe or LxUnLinkifyPipe
- */
-class RemoveMarkdownPipe {
-    transform(markdown) {
-        return markdownToText(markdown);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, isStandalone: true, name: "lxRemoveMarkdown" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i1$1.TranslateService }, { token: i0.DestroyRef }, { token: i2$2.NgControl, optional: true, self: true }, { token: FormSubmitDirective, host: true, optional: true }, { token: FORM_CONTROL_ERROR_NAMESPACE, optional: true }, { token: FORM_CONTROL_ERROR_DISPLAY_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: FormErrorDirective, isStandalone: true, selector: "[lxFormError]", inputs: { ctrl: ["lxFormError", "ctrl"], controlName: "controlName" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: RemoveMarkdownPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormErrorDirective, decorators: [{
+            type: Directive,
             args: [{
-                    name: 'lxRemoveMarkdown'
+                    selector: '[lxFormError]'
                 }]
-        }] });
-function markdownToText(md) {
-    let output = md || '';
-    try {
-        output = output
-            // Remove horizontal rules (stripListHeaders conflict with this rule, which is why it has been moved to the top)
-            .replace(/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/gm, '')
-            // stripListLeaders
-            .replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1')
-            // Strikethrough
-            .replace(/~~/g, '')
-            // Fenced codeblocks with backticks
-            .replace(/```(?:.*)\n([\s\S]*?)```/g, (_, code) => code.trim())
-            // Remove HTML tags
-            .replace(/<[^>]*>/g, '')
-            // Remove images
-            .replace(/\!\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
-            // Remove blockquotes
-            .replace(/^(\n)?\s{0,3}>\s?/gm, '$1')
-            // Remove atx-style headers
-            .replace(/^(\n)?\s{0,}#{1,6}\s*( (.+))? +#+$|^(\n)?\s{0,}#{1,6}\s*( (.+))?$/gm, '$1$3$4$6')
-            // Remove * emphasis
-            .replace(/([\*]+)(\S)(.*?\S)??\1/g, '$2$3')
-            // Remove _ emphasis. Unlike *, _ emphasis gets rendered only if
-            //   1. Either there is a whitespace character before opening _ and after closing _.
-            //   2. Or _ is at the start/end of the string.
-            .replace(/(^|\W)([_]+)(\S)(.*?\S)??\2($|\W)/g, '$1$3$4$5')
-            // Remove single-line code blocks (already handled multiline above )
-            .replace(/(`{3,})(.*?)\1/gm, '$2')
-            // Remove inline code
-            .replace(/`(.+?)`/g, '$1');
-    }
-    catch (e) {
-        return md;
-    }
-    return output;
-}
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i1$1.TranslateService }, { type: i0.DestroyRef }, { type: i2$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: FormSubmitDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_CONTROL_ERROR_NAMESPACE]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_CONTROL_ERROR_DISPLAY_STRATEGY]
+                }] }], propDecorators: { ctrl: [{
+                type: Input,
+                args: ['lxFormError']
+            }], controlName: [{
+                type: Input
+            }] } });
+const isAbstractControl = (ctrl) => !!ctrl;
+const resolveStrategy = curry((strategy, control, submitted) => strategy ? strategy({ control, submitted }) : true);
 
 class MaxLengthCounterDirective {
     constructor(el, renderer, ngControl) {
@@ -12816,6 +12449,120 @@ class Sorting {
     }
 }
 
+class FilterSelectionPipe {
+    transform(items, selection, itemKey) {
+        const isArray = Array.isArray(selection);
+        return filter$1((item) => {
+            if (isArray) {
+                if (isObject(item)) {
+                    return itemKey
+                        ? !find((selectedItem) => selectedItem?.[itemKey] === item?.[itemKey], selection)
+                        : !find(item, selection);
+                }
+                else {
+                    return !includes(item, selection);
+                }
+            }
+            else {
+                return !isEqual$1(item, selection);
+            }
+        }, items);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, isStandalone: true, name: "lxFilterBySelection" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterSelectionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxFilterBySelection'
+                }]
+        }] });
+
+class FilterTermPipe {
+    transform(items, options) {
+        if (items === null) {
+            return [];
+        }
+        if (options.term) {
+            return filter$1((item) => {
+                const value = options.key ? item[options.key] : item;
+                return toLower(value).indexOf(toLower(options.term)) > -1;
+            }, items);
+        }
+        else {
+            return items;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, isStandalone: true, name: "lxFilterByTerm" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterTermPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxFilterByTerm'
+                }]
+        }] });
+
+/**
+ * Reformats numbers into a short format.
+ * @example {{ 1000 | lxFormatNumber | async }} prints 1K
+ *
+ * If the parameter currency is set, a currency sign is inserted based on the value and the current locale.
+ * In this case, the pipe must be used with an innerHtml attribute.
+ * @example [innerHtml]="1000 | lxFormatNumber: 'USD' | async" prints $1K
+ */
+class FormatNumberPipe {
+    constructor(getLocale) {
+        this.getLocale = getLocale;
+    }
+    transform(number, currency) {
+        const locale$ = this.getLocale();
+        return locale$.pipe(map((locale) => {
+            if (number === null || number === undefined) {
+                return null;
+            }
+            const options = {
+                notation: 'compact',
+                compactDisplay: 'short'
+            };
+            if (currency) {
+                try {
+                    const currencyOptions = { ...options, currency, style: 'currency' };
+                    const formatedNumberWithCurrency = new Intl.NumberFormat(locale, currencyOptions).format(number);
+                    return this.getFormatedCurrency(formatedNumberWithCurrency, currency);
+                }
+                catch (_error) {
+                    console.warn(`FormatNumberPipe: Invalid currency code: ${currency}`);
+                    return new Intl.NumberFormat(locale, options).format(number);
+                }
+            }
+            return new Intl.NumberFormat(locale, options).format(number);
+        }));
+    }
+    /**
+     * Use custom currency symbol, when the currency in the formated number doesn't match the
+     * symbol in the CURRENCY_SYMBOL_MAP.
+     */
+    getFormatedCurrency(formatedNumberWitCurrency, currency) {
+        const currencyMapping = CURRENCY_SYMBOL_MAP[currency];
+        if (currencyMapping && currencyMapping !== currency && !formatedNumberWitCurrency.includes(currencyMapping)) {
+            return formatedNumberWitCurrency.replace(currency, currencyMapping);
+        }
+        return formatedNumberWitCurrency;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, deps: [{ token: LOCALE_FN }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, isStandalone: true, name: "lxFormatNumber" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FormatNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxFormatNumber'
+                }]
+        }], ctorParameters: () => [{ type: Function, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_FN]
+                }] }] });
+
 /**
  * Due to limitations of the native html datepicker this validator is needed:
  * In the datepicker the min and max values only apply if the date is altered e.g. via scrolling.
@@ -13680,5 +13427,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, 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 };
+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, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, 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, 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