@leanix/components 0.4.587 → 0.4.589

package/fesm2022/leanix-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host } from '@angular/core';
+import { InjectionToken, Input, Component, signal, ChangeDetectionStrategy, HostBinding, inject, input, computed, EventEmitter, HostListener, Output, Injectable, ElementRef, ViewChild, Inject, model, Directive, Optional, Pipe, NgModule, DestroyRef, ChangeDetectorRef, effect, ContentChild, afterRenderEffect, ContentChildren, ViewChildren, forwardRef, TemplateRef, viewChild, booleanAttribute, SecurityContext, Self, Host, Injector, output, ApplicationRef, createComponent } from '@angular/core';
 import * as i1 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { NgTemplateOutlet, NgClass, AsyncPipe, UpperCasePipe, DecimalPipe, CommonModule, formatDate } from '@angular/common';
@@ -30,12 +30,42 @@ import * as i1$3 from '@ncstate/sat-popover';
 import { SatPopoverModule, SatPopoverComponent } from '@ncstate/sat-popover';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i1$5 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, Validators, FormControl } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, UntypedFormControl, NgForm, Validators, FormControl } from '@angular/forms';
 import * as i1$4 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i1$6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$7 from '@angular/platform-browser';
+import { Extension, getMarkRange, findParentNode, Editor, NodeView } from '@tiptap/core';
+import Bold from '@tiptap/extension-bold';
+import BulletList from '@tiptap/extension-bullet-list';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Document from '@tiptap/extension-document';
+import Dropcursor from '@tiptap/extension-dropcursor';
+import Gapcursor from '@tiptap/extension-gapcursor';
+import HardBreak from '@tiptap/extension-hard-break';
+import Heading from '@tiptap/extension-heading';
+import History from '@tiptap/extension-history';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Italic from '@tiptap/extension-italic';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Strike from '@tiptap/extension-strike';
+import Text from '@tiptap/extension-text';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { Markdown } from 'tiptap-markdown';
+import { PluginKey, Plugin } from '@tiptap/pm/state';
+import { DecorationSet, Decoration } from '@tiptap/pm/view';
+import { Link } from '@tiptap/extension-link';
+import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
+import Table, { Table as Table$1 } from '@tiptap/extension-table';
+import { CellSelection, TableMap } from '@tiptap/pm/tables';
+import TableCell from '@tiptap/extension-table-cell';
+import TiptapTableHeader from '@tiptap/extension-table-header';
+import TableRow from '@tiptap/extension-table-row';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 
@@ -9025,497 +9055,1945 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 }]
         }] });
 
-class MaxLengthCounterDirective {
-    constructor(el, renderer, ngControl) {
-        this.el = el;
+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 = [];
+    if (!term)
+        return DecorationSet.empty;
+    const regex = prepareRegex(options, term);
+    doc.descendants((node, pos) => {
+        if (!node.isText || !node.text)
+            return;
+        const text = node.text;
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            const start = pos + match.index;
+            const end = start + match[0].length;
+            // TODO: replace #fafda5 with $searchHighlightingColor
+            decorations.push(Decoration.inline(start, end, { style: 'background-color: #fafda5' }));
+        }
+    });
+    return DecorationSet.create(doc, decorations);
+}
+/**
+ * This regex is copied from highlight-term.pipe.ts
+ * TODO: get rid of duplication
+ */
+function prepareRegex(options, term) {
+    const STANDARD_TOKENIZER_SEPERATORS = /[^a-zA-Z\d\s]/g;
+    let pattern = options.exactMatch ? term.trim() : term.replace(STANDARD_TOKENIZER_SEPERATORS, ' ');
+    // replace special chars for a backslash for RegExp
+    pattern = pattern.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    pattern = options.exactMatch
+        ? pattern
+        : pattern
+            .split(' ')
+            .filter((t) => {
+            return t.length > 0;
+        })
+            .join('|');
+    return new RegExp(pattern, 'gi');
+}
+
+/**
+ * This extension replicates the search term highlight mechanism
+ * implemented by highlight-term.pipe.ts for tiptap editor.
+ */
+const HighlightTerm = Extension.create({
+    name: 'highlight-term',
+    addOptions() {
+        return {
+            exactMatch: false
+        };
+    },
+    addProseMirrorPlugins() {
+        const { editor, options } = this;
+        return [highlightTermState(editor), highlightTerm(editor, options)];
+    }
+});
+
+const linkPluginKey = new PluginKey('link');
+function linkPlugin() {
+    return new Plugin({
+        key: linkPluginKey,
+        state: {
+            init() {
+                return { open: false, text: null, url: null };
+            },
+            apply: (tr, state) => {
+                const meta = tr.getMeta(linkPluginKey);
+                return meta ? { ...state, ...meta } : state;
+            }
+        },
+        props: {
+            handleClickOn: (view, pos, _node, _nodePos, event) => {
+                const state = view.state;
+                const $pos = state.doc.resolve(pos);
+                const linkMark = $pos.marks().find((mark) => mark.type.name === 'link');
+                if (!linkMark)
+                    return false;
+                const markRange = getMarkRange($pos, linkMark.type);
+                if (!markRange)
+                    return false;
+                const { from, to } = markRange;
+                const text = state.doc.textBetween(from, to, ' ');
+                const href = linkMark.attrs['href'];
+                if (!href || !view.editable)
+                    return false;
+                event.preventDefault();
+                const pluginState = linkPluginKey.getState(state);
+                view.dispatch(state.tr.setMeta(linkPluginKey, {
+                    ...pluginState,
+                    open: true,
+                    text,
+                    url: href
+                }));
+                return true;
+            }
+        }
+    });
+}
+function dispatchLinkState(editor, props) {
+    const pluginState = linkPluginKey.getState(editor.state);
+    editor.view.dispatch(editor.view.state.tr.setMeta(linkPluginKey, {
+        ...pluginState,
+        ...props
+    }));
+}
+
+const CustomLink = Link.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            href: {
+                ...this.parent?.()?.href,
+                renderHTML: (attributes) => {
+                    return {
+                        href: attributes['href'],
+                        target: '_blank',
+                        rel: 'noopener noreferrer',
+                        'data-link': attributes['href']
+                    };
+                }
+            }
+        };
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            openLinkModal: () => ({ editor, state }) => {
+                const selection = this.editor.state.selection;
+                if (selection.empty) {
+                    const mark = selection.$head.marks().find(isLinkMark);
+                    if (!mark) {
+                        dispatchLinkState(editor, { url: null, text: null, open: true });
+                        return true;
+                    }
+                    const node = getNodeByMark(editor.state.doc, mark);
+                    if (!node) {
+                        dispatchLinkState(editor, { url: null, text: null, open: true });
+                        return true;
+                    }
+                    const url = mark.attrs['href'];
+                    const text = node.text ?? null;
+                    dispatchLinkState(editor, { url, text, open: true });
+                    return true;
+                }
+                const { from, to } = this.editor.state.selection;
+                const text = this.editor.state.doc.textBetween(from, to, ' ');
+                let url = '';
+                state.doc.nodesBetween(from, to, (node, _pos) => {
+                    const linkMark = node.marks.find((mark) => mark.type.name === 'link');
+                    if (linkMark) {
+                        url = linkMark.attrs['href'];
+                        return false;
+                    }
+                    return true;
+                });
+                dispatchLinkState(editor, { url, text, open: true });
+                return true;
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        const defaultPlugins = this.parent?.() ?? [];
+        if (!editor.isEditable) {
+            return [...defaultPlugins];
+        }
+        return [...defaultPlugins, linkPlugin()];
+    }
+})
+    .configure({ autolink: true, openOnClick: false })
+    .extend({ inclusive: false });
+function getNodeByMark(doc, targetMark) {
+    let result;
+    doc.descendants((node) => {
+        if (!node.isText)
+            return true;
+        if (targetMark.isInSet(node.marks)) {
+            result = node;
+            return false;
+        }
+        return true;
+    });
+    return result;
+}
+function isLinkMark(mark) {
+    return mark.type.name === 'link';
+}
+
+const isCellSelection = (selection) => selection instanceof CellSelection;
+const getTableMapFromSelection = (selection) => TableMap.get(selection.$anchorCell.node(-1));
+const checkIfRectIsFullySelected = (rect, selection) => {
+    const map = getTableMapFromSelection(selection);
+    const offset = selection.$anchorCell.start(-1);
+    const rectCells = map.cellsInRect(rect);
+    const selectedCells = map.cellsInRect(map.rectBetween(selection.$anchorCell.pos - offset, selection.$headCell.pos - offset));
+    return rectCells.every((cell) => selectedCells.includes(cell));
+};
+const getTableNodeFromSelection = (selection) => findParentNode((node) => node.type.spec['tableRole'] === 'table')(selection);
+const isColumnSelected = (columnIndex, selection) => {
+    return isCellSelection(selection)
+        ? checkIfRectIsFullySelected({
+            left: columnIndex,
+            right: columnIndex + 1,
+            top: 0,
+            bottom: getTableMapFromSelection(selection).height
+        }, selection)
+        : false;
+};
+const isRowSelected = (rowIndex, selection) => {
+    return isCellSelection(selection)
+        ? checkIfRectIsFullySelected({
+            left: 0,
+            right: getTableMapFromSelection(selection).width,
+            top: rowIndex,
+            bottom: rowIndex + 1
+        }, selection)
+        : false;
+};
+const isTableSelected = (selection) => {
+    return isCellSelection(selection)
+        ? checkIfRectIsFullySelected({
+            left: 0,
+            right: getTableMapFromSelection(selection).width,
+            top: 0,
+            bottom: getTableMapFromSelection(selection).height
+        }, selection)
+        : false;
+};
+const getCellsInColumn = (columnIndex, selection) => {
+    const table = getTableNodeFromSelection(selection);
+    if (!table)
+        return null;
+    const map = TableMap.get(table.node);
+    const columns = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
+    return columns.flatMap((col) => {
+        if (col < 0 || col >= map.width)
+            return [];
+        const cells = map.cellsInRect({
+            left: col,
+            right: col + 1,
+            top: 0,
+            bottom: map.height
+        });
+        return cells.map((cellPos) => {
+            const node = table.node.nodeAt(cellPos);
+            const absPos = cellPos + table.start;
+            return { pos: absPos, start: absPos + 1, node };
+        });
+    });
+};
+const getCellsInRow = (rowIndex, selection) => {
+    const table = getTableNodeFromSelection(selection);
+    if (!table)
+        return null;
+    const map = TableMap.get(table.node);
+    const rows = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
+    return rows.flatMap((row) => {
+        if (row < 0 || row >= map.height)
+            return [];
+        const cells = map.cellsInRect({
+            left: 0,
+            right: map.width,
+            top: row,
+            bottom: row + 1
+        });
+        return cells.map((cellPos) => {
+            const node = table.node.nodeAt(cellPos);
+            const absPos = cellPos + table.start;
+            return { pos: absPos, start: absPos + 1, node };
+        });
+    });
+};
+const createSelectionForIndex = (type, index, tr) => {
+    const table = getTableNodeFromSelection(tr.selection);
+    if (!table)
+        return tr;
+    const map = TableMap.get(table.node);
+    const isRow = type === 'row';
+    const maxIndex = isRow ? map.height : map.width;
+    if (index < 0 || index >= maxIndex)
+        return tr;
+    const rect = {
+        left: isRow ? 0 : index,
+        top: isRow ? index : 0,
+        right: isRow ? map.width : index + 1,
+        bottom: isRow ? index + 1 : map.height
+    };
+    const edgeCellsStart = map.cellsInRect(rect);
+    const edgeCellsEnd = rect.bottom - rect.top === 1
+        ? edgeCellsStart
+        : map.cellsInRect({
+            left: isRow ? 0 : rect.right - 1,
+            top: isRow ? rect.bottom - 1 : 0,
+            right: rect.right,
+            bottom: rect.bottom
+        });
+    if (edgeCellsStart.length && edgeCellsEnd.length) {
+        const startCell = edgeCellsStart[0];
+        const endCell = edgeCellsEnd[edgeCellsEnd.length - 1];
+        if (startCell != null && endCell != null && table?.start != null) {
+            const head = table.start + startCell;
+            const anchor = table.start + endCell;
+            return tr.setSelection(new CellSelection(tr.doc.resolve(anchor), tr.doc.resolve(head)));
+        }
+    }
+    return tr;
+};
+const selectColumn = (index, tr) => createSelectionForIndex('column', index, tr);
+const selectRow = (index, tr) => createSelectionForIndex('row', index, tr);
+const isSelectorActive = ({ editor, view, state, from, selectorType }) => {
+    if (!editor.isActive(Table.name) || isTableSelected(state.selection)) {
+        return false;
+    }
+    let resolvedNode = null;
+    try {
+        resolvedNode = view.nodeDOM(from) || view.domAtPos(from).node;
+    }
+    catch {
+        return false;
+    }
+    if (!resolvedNode || !(resolvedNode instanceof HTMLElement))
+        return false;
+    // Traverse up the DOM tree to find the table cell (TD or TH)
+    const cellElement = resolvedNode.closest?.('td, th');
+    if (!cellElement)
+        return false;
+    // Check if a selected anchor exists within this cell
+    return !!cellElement.querySelector(`button.${selectorType}.selected`);
+};
+const isColumnSelectorActive = (params) => {
+    return isSelectorActive({ ...params, selectorType: 'selector-column' });
+};
+const isRowSelectorActive = (params) => {
+    return isSelectorActive({ ...params, selectorType: 'selector-row' });
+};
+
+class TableBubbleMenuComponent {
+    constructor() {
+        this.NAME = 'RichTextEditorTableActions';
+    }
+    ngAfterViewInit() {
+        this.editor.registerPlugin(BubbleMenuPlugin({
+            pluginKey: 'bubbleMenuRow',
+            editor: this.editor,
+            element: this.bubbleMenuRowRef.nativeElement,
+            tippyOptions: {
+                appendTo: () => document.body,
+                placement: 'left',
+                offset: () => {
+                    // A hack to fix wrong offset by tippy for first row's bubble menu
+                    if (document.querySelector('.selector-row.selected.first')) {
+                        return [43, 19];
+                    }
+                    return [37, 8];
+                },
+                popperOptions: {
+                    modifiers: [{ name: 'flip', enabled: false }]
+                }
+            },
+            shouldShow: ({ editor, view, state, from }) => {
+                return isRowSelectorActive({ editor, view, state, from: from || 0 });
+            }
+        }));
+        this.editor.registerPlugin(BubbleMenuPlugin({
+            pluginKey: 'bubbleMenuColumn',
+            editor: this.editor,
+            element: this.bubbleMenuColumnRef.nativeElement,
+            tippyOptions: {
+                appendTo: () => document.body,
+                offset: [0, 8],
+                popperOptions: {
+                    modifiers: [{ name: 'flip', enabled: false }]
+                }
+            },
+            shouldShow: ({ editor, view, state, from }) => {
+                return isColumnSelectorActive({ editor, view, state, from: from || 0 });
+            }
+        }));
+        this.editor.registerPlugin(BubbleMenuPlugin({
+            pluginKey: 'bubbleMenuTable',
+            editor: this.editor,
+            element: this.bubbleMenuTableRef.nativeElement,
+            tippyOptions: {
+                appendTo: () => document.body,
+                offset: [0, 8],
+                popperOptions: {
+                    modifiers: [{ name: 'flip', enabled: false }]
+                }
+            },
+            shouldShow: ({ editor, state }) => {
+                return editor.isEditable && isTableSelected(state.selection);
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TableBubbleMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TableBubbleMenuComponent, isStandalone: true, selector: "lx-table-bubble-menu", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "bubbleMenuRowRef", first: true, predicate: ["bubbleMenuRow"], descendants: true }, { propertyName: "bubbleMenuColumnRef", first: true, predicate: ["bubbleMenuColumn"], descendants: true }, { propertyName: "bubbleMenuTableRef", first: true, predicate: ["bubbleMenuTable"], descendants: true }], ngImport: i0, template: "<div #bubbleMenuRow class=\"bubble-menu-row\">\n  <button (click)=\"editor.chain().focus().addRowBefore().run()\">{{ NAME + '.addRowBefore' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRowAfter' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteRow().run()\">{{ NAME + '.deleteRow' | translate }}</button>\n</div>\n\n<div #bubbleMenuColumn class=\"bubble-menu-column\">\n  <button (click)=\"editor.chain().focus().addColumnBefore().run()\">{{ NAME + '.addColumnBefore' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumnAfter' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteColumn().run()\">{{ NAME + '.deleteColumn' | translate }}</button>\n</div>\n\n<div #bubbleMenuTable class=\"bubble-menu-table\">\n  <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRow' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumn' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteTable().run()\">{{ NAME + '.deleteTable' | translate }}</button>\n</div>\n", styles: [".bubble-menu-column,.bubble-menu-row,.bubble-menu-table{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e5eb;border-radius:3px;z-index:10;box-shadow:0 8px 12px 2px #00000026;min-width:160px}.bubble-menu-column button,.bubble-menu-row button,.bubble-menu-table button{background:none;border:none;padding:8px;text-align:left;width:100%;font-size:var(--lxFontSize);color:#2a303d;cursor:pointer;border-radius:3px;transition:background-color .2s}.bubble-menu-column button:hover,.bubble-menu-row button:hover,.bubble-menu-table button:hover{background-color:#e1e5eb}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TableBubbleMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-table-bubble-menu', imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #bubbleMenuRow class=\"bubble-menu-row\">\n  <button (click)=\"editor.chain().focus().addRowBefore().run()\">{{ NAME + '.addRowBefore' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRowAfter' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteRow().run()\">{{ NAME + '.deleteRow' | translate }}</button>\n</div>\n\n<div #bubbleMenuColumn class=\"bubble-menu-column\">\n  <button (click)=\"editor.chain().focus().addColumnBefore().run()\">{{ NAME + '.addColumnBefore' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumnAfter' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteColumn().run()\">{{ NAME + '.deleteColumn' | translate }}</button>\n</div>\n\n<div #bubbleMenuTable class=\"bubble-menu-table\">\n  <button (click)=\"editor.chain().focus().addRowAfter().run()\">{{ NAME + '.addRow' | translate }}</button>\n  <button (click)=\"editor.chain().focus().addColumnAfter().run()\">{{ NAME + '.addColumn' | translate }}</button>\n  <button (click)=\"editor.chain().focus().deleteTable().run()\">{{ NAME + '.deleteTable' | translate }}</button>\n</div>\n", styles: [".bubble-menu-column,.bubble-menu-row,.bubble-menu-table{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e5eb;border-radius:3px;z-index:10;box-shadow:0 8px 12px 2px #00000026;min-width:160px}.bubble-menu-column button,.bubble-menu-row button,.bubble-menu-table button{background:none;border:none;padding:8px;text-align:left;width:100%;font-size:var(--lxFontSize);color:#2a303d;cursor:pointer;border-radius:3px;transition:background-color .2s}.bubble-menu-column button:hover,.bubble-menu-row button:hover,.bubble-menu-table button:hover{background-color:#e1e5eb}\n"] }]
+        }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], bubbleMenuRowRef: [{
+                type: ViewChild,
+                args: ['bubbleMenuRow']
+            }], bubbleMenuColumnRef: [{
+                type: ViewChild,
+                args: ['bubbleMenuColumn']
+            }], bubbleMenuTableRef: [{
+                type: ViewChild,
+                args: ['bubbleMenuTable']
+            }] } });
+
+const CustomTable = Table$1.configure({
+    resizable: true,
+    HTMLAttributes: {
+        class: 'table-base-class'
+    }
+});
+const CustomTableRow = TableRow.extend({
+    allowGapCursor: false,
+    content: '(tableCell | tableHeader)*'
+});
+const CustomTableCell = TableCell.extend({
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                props: {
+                    decorations: (state) => {
+                        if (!this.editor.isEditable) {
+                            return DecorationSet.empty;
+                        }
+                        const { doc, selection } = state;
+                        const columnCells = getCellsInColumn(0, selection);
+                        const decoList = [];
+                        if (columnCells?.length) {
+                            columnCells.forEach(({ pos }, rowIndex) => {
+                                const isSelected = isRowSelected(rowIndex, selection);
+                                const button = document.createElement('button');
+                                const classList = ['selector-row'];
+                                if (isSelected)
+                                    classList.push('selected');
+                                if (rowIndex === 0)
+                                    classList.push('first');
+                                if (rowIndex === columnCells.length - 1)
+                                    classList.push('last');
+                                button.ariaLabel = `select row ${rowIndex + 1}`;
+                                button.className = classList.join(' ');
+                                button.addEventListener('mousedown', (e) => {
+                                    e.preventDefault();
+                                    e.stopImmediatePropagation();
+                                    const tr = selectRow(rowIndex, this.editor.state.tr);
+                                    this.editor.view.dispatch(tr);
+                                });
+                                decoList.push(Decoration.widget(pos + 1, () => button));
+                            });
+                        }
+                        return DecorationSet.create(doc, decoList);
+                    }
+                }
+            })
+        ];
+    }
+});
+const CustomTableHeader = TiptapTableHeader.extend({
+    addAttributes() {
+        return {
+            colspan: {
+                default: 1
+            },
+            rowspan: {
+                default: 1
+            },
+            colwidth: {
+                default: null,
+                parseHTML: (element) => {
+                    const raw = element.getAttribute('colwidth');
+                    return raw ? raw.split(',').map(Number) : null;
+                }
+            },
+            style: {
+                default: null
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('custom-table-header'),
+                props: {
+                    decorations: (state) => {
+                        if (!this.editor.isEditable) {
+                            return DecorationSet.empty;
+                        }
+                        const { doc, selection } = state;
+                        const headerCells = getCellsInRow(0, selection);
+                        const allDecorations = [];
+                        if (headerCells?.length) {
+                            headerCells.forEach(({ pos }, columnIndex) => {
+                                const isSelected = isColumnSelected(columnIndex, selection);
+                                const button = document.createElement('button');
+                                const classes = ['selector-column'];
+                                if (isSelected)
+                                    classes.push('selected');
+                                if (columnIndex === 0)
+                                    classes.push('first');
+                                if (columnIndex === headerCells.length - 1)
+                                    classes.push('last');
+                                button.ariaLabel = `select column ${columnIndex + 1}`;
+                                button.className = classes.join(' ');
+                                button.addEventListener('mousedown', (e) => {
+                                    e.preventDefault();
+                                    e.stopImmediatePropagation();
+                                    const tr = selectColumn(columnIndex, this.editor.state.tr);
+                                    this.editor.view.dispatch(tr);
+                                });
+                                allDecorations.push(Decoration.widget(pos + 1, () => button));
+                            });
+                        }
+                        return DecorationSet.create(doc, allDecorations);
+                    }
+                }
+            })
+        ];
+    }
+});
+
+const trackingPluginKey = new PluginKey('tracking');
+function tracking() {
+    return new Plugin({
+        key: trackingPluginKey
+    });
+}
+
+const Tracking = Extension.create({
+    name: 'tracking',
+    addProseMirrorPlugins() {
+        return [tracking()];
+    },
+    addCommands() {
+        return {
+            track: (trackingEvent) => ({ tr }) => {
+                tr.setMeta(trackingPluginKey, trackingEvent);
+                return true;
+            }
+        };
+    }
+});
+
+const truncatePluginKey = new PluginKey('truncate');
+function truncate(editor) {
+    return new Plugin({
+        key: truncatePluginKey,
+        state: {
+            init() {
+                return { collapsed: true, activated: false, showToggleButton: true, maxLines: 1 };
+            },
+            apply: (tr, state) => {
+                const meta = tr.getMeta(truncatePluginKey);
+                return meta ? { ...state, ...meta } : state;
+            }
+        },
+        view(view) {
+            const resizeObserver = new ResizeObserver(([entry]) => {
+                const state = truncatePluginKey.getState(view.state);
+                if (state.activated || !entry || !entry.target) {
+                    return;
+                }
+                if (entry.target.clientHeight < entry.target.scrollHeight) {
+                    view.dispatch(view.state.tr.setMeta(truncatePluginKey, { ...state, activated: true }));
+                }
+            });
+            resizeObserver.observe(view.dom);
+            return {
+                destroy() {
+                    resizeObserver.disconnect();
+                }
+            };
+        },
+        props: {
+            attributes(state) {
+                if (editor.storage['mode'] !== 'view') {
+                    return { style: '' };
+                }
+                const collapsed = truncatePluginKey.getState(state).collapsed;
+                const clampStyles = `
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: ${truncatePluginKey.getState(state).maxLines};
+          overflow: hidden;
+        `;
+                return {
+                    style: collapsed ? clampStyles : ''
+                };
+            }
+        }
+    });
+}
+
+class TruncateButtonComponent {
+    constructor() {
+        this.NAME = 'TruncateButtonComponent';
+        this.cdr = inject(ChangeDetectorRef);
+        this.update = (event) => {
+            if (event.transaction.getMeta(truncatePluginKey)) {
+                this.cdr.markForCheck();
+            }
+        };
+    }
+    get collapsed() {
+        return truncatePluginKey.getState(this.editor.state).collapsed;
+    }
+    get key() {
+        return this.collapsed ? '.showMore' : '.showLess';
+    }
+    get activated() {
+        return truncatePluginKey.getState(this.editor.state).activated;
+    }
+    get showToggleButton() {
+        return truncatePluginKey.getState(this.editor.state).showToggleButton;
+    }
+    ngOnInit() {
+        this.editor.on('transaction', this.update);
+    }
+    ngOnDestroy() {
+        this.editor.off('transaction', this.update);
+    }
+    onClick(event) {
+        event.stopPropagation();
+        const state = truncatePluginKey.getState(this.editor.view.state);
+        this.editor.view.dispatch(this.editor.view.state.tr.setMeta(truncatePluginKey, {
+            ...state,
+            collapsed: !state.collapsed
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TruncateButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TruncateButtonComponent, isStandalone: true, selector: "lx-truncate-button", inputs: { editor: "editor" }, ngImport: i0, template: "@if (showToggleButton && activated) {\n  <button lx-button color=\"primary\" mode=\"link\" (click)=\"onClick($event)\">\n    {{ NAME + key | translate }}\n  </button>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TruncateButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-truncate-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, TranslatePipe], template: "@if (showToggleButton && activated) {\n  <button lx-button color=\"primary\" mode=\"link\" (click)=\"onClick($event)\">\n    {{ NAME + key | translate }}\n  </button>\n}\n" }]
+        }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const Truncate = Extension.create({
+    name: 'truncate',
+    addOptions() {
+        return {
+            maxLines: 1,
+            showToggleButton: true
+        };
+    },
+    addProseMirrorPlugins() {
+        const { editor } = this;
+        return [truncate(editor)];
+    }
+});
+
+class ExtensionsBuilder {
+    constructor() {
+        this.injector = inject(Injector);
+        this.pluginRegistry = {
+            Bold: [Bold],
+            Truncate: [Truncate],
+            Heading: [Heading.configure({ levels: [1, 2, 3, 4] })],
+            Italic: [Italic],
+            Underline: [Underline],
+            Strike: [Strike],
+            List: [BulletList, OrderedList],
+            TextAlign: [TextAlign.configure({ types: ['heading', 'paragraph'] })],
+            Code: [Code, CodeBlock],
+            HighlightTerm: [HighlightTerm],
+            Table: [CustomTable, CustomTableCell, CustomTableHeader, CustomTableRow],
+            Link: [CustomLink]
+        };
+    }
+    build(features, output) {
+        const extensions = [Document, Dropcursor, Gapcursor, History, HardBreak, ListItem, Paragraph, Text, Tracking];
+        if (output === 'markdown') {
+            extensions.push(...[
+                Markdown.configure({
+                    transformPastedText: true, // Allow to paste markdown text in the editor
+                    breaks: true
+                })
+            ]);
+        }
+        if (output === 'json') {
+            extensions.push(...[HorizontalRule]);
+        }
+        for (const feature of features) {
+            extensions.push(...(this.pluginRegistry[feature] ?? []));
+        }
+        return extensions;
+    }
+    buildCustomExtensions(extensionFactories) {
+        const extensions = [];
+        for (const extension of extensionFactories) {
+            const node = extension(this.injector);
+            if (node) {
+                extensions.push(node);
+            }
+        }
+        return extensions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExtensionsBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExtensionsBuilder }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExtensionsBuilder, decorators: [{
+            type: Injectable
+        }] });
+
+const EDITOR_FEATURES = {
+    markdown: ['Bold', 'Italic', 'List', 'Truncate', 'Link', 'Strike', 'Underline', 'HighlightTerm'],
+    json: ['Heading', 'Bold', 'Italic', 'Link', 'Underline', 'Strike', 'List', 'TextAlign', 'Code', 'Table']
+};
+
+class TipTapEditorDirective {
+    constructor() {
+        this.NAME = 'TipTapEditorDirective';
+        this.outputFormat = input.required();
+        this.ariaLabelledBy = input(null);
+        this.additionalFeatures = input([]);
+        this.customExtensions = input([]);
+        this.mode = input.required();
+        this.features = computed(() => EDITOR_FEATURES[this.outputFormat()]);
+        this.attributes = computed(() => {
+            const attributes = {
+                role: 'textbox' // make conenteditable div behave as textarea, needed for a11y
+            };
+            if (this.ariaLabelledBy()) {
+                attributes['aria-labelledby'] = this.ariaLabelledBy();
+            }
+            return attributes;
+        });
+        this.editor = computed(() => {
+            const extensions = [
+                ...this.extensionsBuilder.build([...this.features(), ...this.additionalFeatures()], this.outputFormat()),
+                ...this.extensionsBuilder.buildCustomExtensions(this.customExtensions())
+            ];
+            return new Editor({
+                extensions,
+                editorProps: {
+                    attributes: {
+                        ...this.attributes()
+                    }
+                }
+            });
+        });
+        this.extensionsBuilder = inject(ExtensionsBuilder);
+        afterRenderEffect(() => {
+            this.editor().storage['mode'] = this.mode();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TipTapEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TipTapEditorDirective, isStandalone: true, selector: "lx-rich-text-editor[lxEditor]", inputs: { outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TipTapEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxEditor]'
+                }]
+        }], ctorParameters: () => [] });
+
+class TrackingDirective {
+    constructor() {
+        this.trackEvent = output();
+        this.editor = inject(TipTapEditorDirective).editor;
+        afterRenderEffect((onCleanup) => {
+            this.editor().on('transaction', ({ transaction }) => {
+                const meta = transaction.getMeta(trackingPluginKey);
+                if (meta) {
+                    this.trackEvent.emit(meta);
+                }
+                onCleanup(() => {
+                    this.editor().off('transaction');
+                });
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TrackingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: TrackingDirective, isStandalone: true, selector: "lx-rich-text-editor[lxTracking]", outputs: { trackEvent: "trackEvent" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TrackingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxTracking]'
+                }]
+        }], ctorParameters: () => [] });
+
+class EditorDirective {
+    constructor(elRef, renderer, changeDetectorRef) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.blur = new EventEmitter();
+        this.onChange = () => {
+            /** */
+        };
+        this.onTouched = () => {
+            /** */
+        };
+        this.handleChange = ({ editor, transaction }) => {
+            if (!transaction.docChanged) {
+                return;
+            }
+            // Needed for ChangeDetectionStrategy.OnPush to get notified about changes
+            this.changeDetectorRef.markForCheck();
+            if (this.outputFormat === 'markdown') {
+                this.onChange(editor.storage['markdown'].getMarkdown());
+                return;
+            }
+            this.onChange(editor.getJSON());
+        };
+    }
+    // Writes a new value to the element.
+    // This methods is called when programmatic changes from model to view are requested.
+    writeValue(value) {
+        this.editor.chain().setContent(value, false).run();
+    }
+    // Registers a callback function that is called when the control's value changes in the UI.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Registers a callback function that is called by the forms API on initialization to update the form model on blur.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Called by the forms api to enable or disable the element
+    setDisabledState(isDisabled) {
+        this.editor.setEditable(!isDisabled);
+        this.renderer.setProperty(this.elRef.nativeElement, 'disabled', isDisabled);
+    }
+    ngOnInit() {
+        // take the inner contents and clear the block
+        const { innerHTML } = this.elRef.nativeElement;
+        this.elRef.nativeElement.innerHTML = '';
+        // insert the editor in the dom
+        this.elRef.nativeElement.append(...Array.from(this.editor.options.element.childNodes));
+        // update the options for the editor
+        this.editor.setOptions({ element: this.elRef.nativeElement });
+        // update content to the editor
+        if (innerHTML) {
+            this.editor.chain().setContent(innerHTML, false).run();
+        }
+        // register blur handler to update `touched` property
+        this.editor.on('blur', () => {
+            this.blur.emit();
+            this.onTouched();
+        });
+        // register update handler to listen to changes on update
+        this.editor.on('update', this.handleChange);
+        // Needed for ChangeDetectionStrategy.OnPush to get notified
+        this.editor.on('selectionUpdate', () => this.changeDetectorRef.markForCheck());
+    }
+    ngAfterViewInit() {
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: EditorDirective, isStandalone: true, selector: "tiptap-editor[editor]", inputs: { editor: "editor", outputFormat: "outputFormat" }, outputs: { blur: "blur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditorDirective),
+                multi: true
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'tiptap-editor[editor]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditorDirective),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], outputFormat: [{
+                type: Input,
+                args: [{ required: true }]
+            }], blur: [{
+                type: Output
+            }] } });
+
+class ExtensionEnabledPipe {
+    transform(name, editor) {
+        return !!editor.extensionManager.extensions.find((extension) => extension.name === name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExtensionEnabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: ExtensionEnabledPipe, isStandalone: true, name: "lxExtensionEnabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExtensionEnabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'lxExtensionEnabled'
+                }]
+        }] });
+
+class ModalFooterComponent {
+    constructor() {
+        this.border = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ModalFooterComponent, isStandalone: true, selector: "lx-modal-footer", inputs: { border: "border" }, ngImport: i0, template: "<div class=\"footerContainer\" [class.border]=\"border\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;text-align:right;--modal-footer-padding-left: 90px;--modal-footer-padding-right: 0;--modal-footer-display: block}:host-context(.fullscreen) .footerContainer{padding-left:var(--modal-footer-padding-left);padding-right:var(--modal-footer-padding-right);height:70px}:host-context(.dialog) .footerContainer,:host-context(.dialog-large) .footerContainer{padding:16px;height:64px;border-radius:0 0 6px 6px;display:var(--modal-footer-display)}.footerContainer.border{border-top:1px solid #cfd5df}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-modal-footer', template: "<div class=\"footerContainer\" [class.border]=\"border\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;text-align:right;--modal-footer-padding-left: 90px;--modal-footer-padding-right: 0;--modal-footer-display: block}:host-context(.fullscreen) .footerContainer{padding-left:var(--modal-footer-padding-left);padding-right:var(--modal-footer-padding-right);height:70px}:host-context(.dialog) .footerContainer,:host-context(.dialog-large) .footerContainer{padding:16px;height:64px;border-radius:0 0 6px 6px;display:var(--modal-footer-display)}.footerContainer.border{border-top:1px solid #cfd5df}\n"] }]
+        }], propDecorators: { border: [{
+                type: Input
+            }] } });
+
+class ModalHeaderComponent {
+    constructor() {
+        this.title = '';
+        this.bottomBorder = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ModalHeaderComponent, isStandalone: true, selector: "lx-modal-header", inputs: { title: "title", bottomBorder: "bottomBorder" }, ngImport: i0, template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content />\n  @if (title.length > 0) {\n    <h1 class=\"lx-heading-2\">{{ title }}</h1>\n  }\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;color:#2a303d;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-modal-header', template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content />\n  @if (title.length > 0) {\n    <h1 class=\"lx-heading-2\">{{ title }}</h1>\n  }\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;color:#2a303d;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], bottomBorder: [{
+                type: Input
+            }] } });
+
+class ModalContentDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ModalContentDirective, isStandalone: true, selector: "[lxModalContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxModalContent]'
+                }]
+        }] });
+
+const MODAL_CLOSE = new InjectionToken('MODAL_CLOSE');
+/**
+ * An enum to track how the modal was closed
+ * Escape - Esc key press
+ * CloseButton - top right close button (x)
+ * OutsideClick - click outside the modal
+ * Other - modal close with the trigger through closeModal$ subject
+ */
+var ModalCloseClickLocation;
+(function (ModalCloseClickLocation) {
+    ModalCloseClickLocation["Escape"] = "escape";
+    ModalCloseClickLocation["CloseButton"] = "closeButton";
+    ModalCloseClickLocation["OutsideClick"] = "outsideClick";
+    ModalCloseClickLocation["CancelButton"] = "cancelButton";
+    ModalCloseClickLocation["Other"] = "other";
+})(ModalCloseClickLocation || (ModalCloseClickLocation = {}));
+
+/**
+ * This documentation provides details on the usage and configuration of the Modal.
+ *
+ * ## Usage
+ *
+ * 1. Import `LxModalModule` and `LxCoreUiModule` modules from `@leanix/components` in your module where you want to use the component.
+ *
+ * ```ts
+ * import { LxModalModule, LxCoreUiModule } from '@leanix/components';
+ * ```
+ *
+ * 2. Use the **lx-modal** component in your template with the parameters described below.
+ *
+ * - **`open`**: Whether the modal is open or closed.
+ * - **`size`**: 'dialog' | 'dialog-large'.
+ * - **`verticalScroll`**: Whether the modal is scrollable or not.
+ * - **`showHeader`**: Whether the modal has a header or not.
+ * - **`showFooter`**: Whether the modal has a footer or not.
+ * - **`showCloseButton`**: Whether to show the close button.
+ * - **`showBackButton`**: Whether to show the back button.
+ *
+ * 3. Use optional **lx-modal-header** component in your template with the parameters described below.
+ *
+ * - **`title`**: Title of the modal.
+ * - **`subtitle`**: Subtitle of the modal.
+ * - **`bottomBorder`**: Whether to show a bottom border.
+ *
+ * 4. Use optional **lx-modal-footer** component in your template with the parameters described below.
+ *
+ * - **`border`**: Whether to show the footer at the bottom of the modal.
+ *
+ * **GLOBAL PROVIDERS** required for this component:
+ * - `provideAnimations()`
+ *
+ * **ATTENTION - SCROLLABLE DIALOG**:
+ * The <lx-modal> component when used as "dialog" is not designed to work with a
+ * scrollable body (via `overflow: auto | scroll`) in combination with dropdowns.
+ * The overflow on the body will also clip the dropdowns, which is expected.
+ *
+ * Reasoning:
+ * The contents within the dialog should be just a few elements which fit and
+ * justify the usage of a dialog. If the content is larger than the dialog, and thus
+ * requires scrolling, we should discuss whether to put it into a dialog at all
+ * and rather think about putting the content on a separate route or
+ * using the fullscreen version of the modal.
+ */
+class ModalComponent {
+    get content() {
+        return this.explicitContent || this.implicitContent;
+    }
+    /** @internal */
+    onEscape() {
+        if (this.open && this.showCloseButton) {
+            this.closeModal(ModalCloseClickLocation.Escape);
+        }
+    }
+    constructor(overlay, renderer, closeModal$, focusTrap) {
+        this.overlay = overlay;
         this.renderer = renderer;
-        this.ngControl = ngControl;
-        this.lxMaxLengthCounter = null;
-        this.counterElement = null;
-        this.destroy$ = new Subject();
+        this.closeModal$ = closeModal$;
+        this.focusTrap = focusTrap;
+        /** @internal */
+        this.NAME = 'ModalComponent';
+        /** Whether the modal is open or closed. */
+        this.open = false;
+        /** Whether to show the close button. */
+        this.showCloseButton = true;
+        /** Whether to show the back button. */
+        this.showBackButton = false;
+        /*
+         * If true, then the content area scrolls vertically instead of expanding its height.
+         * This can be a problem if the content has dropdowns or date inputs, but can be good if the content has a huge amount of text.
+         */
+        this.verticalScroll = false;
+        /** The size of the modal. */
+        this.size = 'fullscreen';
+        /**
+         * Minimum width of the modal.
+         *
+         * _NB: Some modal implementations rely on this minWidth being 600px_
+         */
+        this.minWidth = '600px';
+        /** Whether the modal is a focus trap. */
+        this.isFocusTrap = false;
+        /** Event emitted when the modal is closed. */
+        this.close = new EventEmitter();
+        /** Event emitted when the back button is clicked. */
+        this.back = new EventEmitter();
+        /** @internal */
+        this.closeLocation = ModalCloseClickLocation;
+        /** @internal */
+        this.destroyed$ = new Subject();
+    }
+    ngOnInit() {
+        this.closeModal$
+            ?.pipe(takeUntil(this.destroyed$))
+            .subscribe((closeLocation) => this.closeModal(closeLocation));
+        if (this.size === 'fullscreen') {
+            this.overlayRef = this.overlay.create({
+                panelClass: this.size,
+                width: '100%',
+                height: '100vh'
+            });
+        }
+        else if (this.size === 'dialog-large') {
+            const positionStrategy = this.overlay.position().global().top('4vh').centerHorizontally();
+            this.overlayRef = this.overlay.create({
+                panelClass: this.size,
+                positionStrategy,
+                hasBackdrop: true,
+                width: '90%',
+                height: '90vh'
+            });
+        }
+        else {
+            // size 'dialog'
+            const positionStrategy = this.overlay.position().global().top('8vh').centerHorizontally();
+            this.overlayRef = this.overlay.create({
+                panelClass: this.size,
+                minWidth: this.minWidth,
+                positionStrategy,
+                hasBackdrop: true,
+                scrollStrategy: this.overlay.scrollStrategies.block()
+            });
+        }
+        if (this.size !== 'fullscreen') {
+            this.overlayRef
+                .backdropClick()
+                .pipe(takeUntil(this.destroyed$))
+                .subscribe(() => this.closeModal(ModalCloseClickLocation.OutsideClick));
+        }
+    }
+    ngOnChanges() {
+        if (this.open && this.overlayRef && !this.overlayRef.hasAttached()) {
+            this.openModal();
+        }
+        if (!this.open && this.overlayRef && this.overlayRef.hasAttached()) {
+            this.closeModal(ModalCloseClickLocation.Other);
+        }
+        if (this.open && this.overlayRef && this.overlayRef.hasAttached() && this.isFocusTrap) {
+            this.trapFocusInModal(this.overlayRef.hostElement);
+        }
+    }
+    ngAfterViewInit() {
+        if (this.open) {
+            timer(0)
+                .pipe(takeUntil(this.destroyed$))
+                .subscribe(() => this.openModal());
+        }
+    }
+    /** @internal */
+    openModal() {
+        this.oldOverflow = document.documentElement.style.overflowY;
+        if (this.size === 'fullscreen') {
+            this.renderer.setStyle(document.documentElement, 'overflowY', 'hidden');
+        }
+        this.overlayRef.attach(this.cdkPortal);
+        this.trapFocusInModal(this.overlayRef.hostElement);
+    }
+    /** @internal */
+    emitBack() {
+        this.back.emit();
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        if (this.size === 'fullscreen') {
+            this.renderer.setStyle(document.documentElement, 'overflowY', this.oldOverflow);
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+    }
+    /** @internal */
+    async closeModal(closeLocation) {
+        if (!this.canModalBeClosed || (await this.canModalBeClosed(closeLocation))) {
+            this.open = false;
+            this.overlayRef.detach();
+            if (this.size === 'fullscreen') {
+                this.renderer.setStyle(document.documentElement, 'overflowY', this.oldOverflow);
+            }
+            this.close.emit(typeof closeLocation === 'boolean' ? ModalCloseClickLocation.Other : closeLocation);
+        }
+    }
+    trapFocusInModal(hostElement) {
+        this.focusTrap.create(hostElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <div (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" role=\"button\" class=\"fal fa-long-arrow-left\"></div>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          class=\"fal fa-times closeButton\"\n        ></button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('modal', [
+                transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
+                transition(':leave', animate('0.15s', style({ opacity: 0 })))
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-modal', animations: [
+                        trigger('modal', [
+                            transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
+                            transition(':leave', animate('0.15s', style({ opacity: 0 })))
+                        ])
+                    ], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule], template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <div (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" role=\"button\" class=\"fal fa-long-arrow-left\"></div>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          class=\"fal fa-times closeButton\"\n        ></button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MODAL_CLOSE]
+                }] }, { type: i2.ConfigurableFocusTrapFactory }], propDecorators: { open: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], showBackButton: [{
+                type: Input
+            }], verticalScroll: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], isFocusTrap: [{
+                type: Input
+            }], canModalBeClosed: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], back: [{
+                type: Output
+            }], header: [{
+                type: ContentChild,
+                args: [ModalHeaderComponent]
+            }], footer: [{
+                type: ContentChild,
+                args: [ModalFooterComponent]
+            }], cdkPortal: [{
+                type: ViewChild,
+                args: [CdkPortal, { static: true }]
+            }], implicitContent: [{
+                type: ViewChild,
+                args: ['implicitContent', { static: true }]
+            }], explicitContent: [{
+                type: ContentChild,
+                args: [ModalContentDirective, { read: TemplateRef, static: true }]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+class UrlValidatorDirective {
+    validate(control) {
+        const urlPattern = /^(https?:\/\/)?([\w-]+\.)*[\w-]+\.[a-z]{2,}(\/[^\s]*)?$/i;
+        return urlPattern.test(control.value || '') ? null : { invalidUrl: true };
     }
-    ngOnInit() {
-        this.setupMaxLengthValidation();
-        this.connectCounter();
-        this.updateCounter();
-        this.subscribeToValueChanges();
-        this.setupInputRestriction();
-        this.checkForInitialOversize();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: UrlValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: UrlValidatorDirective, isStandalone: true, selector: "[lxUrl][ngModel]", providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: UrlValidatorDirective,
+                multi: true
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: UrlValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxUrl][ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: UrlValidatorDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+class LinkModalComponent {
+    constructor() {
+        this.NAME = 'LinkModalComponent';
+        this.ngForm = viewChild.required(NgForm);
+        this.cd = inject(ChangeDetectorRef);
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    get open() {
+        return linkPluginKey.getState(this.editor.state).open;
     }
-    setupMaxLengthValidation() {
-        const maxLength = this.getMaxLength();
-        const control = this.ngControl.control;
-        if (maxLength !== null && control) {
-            const validators = control.validator ? [control.validator, Validators.maxLength(maxLength)] : Validators.maxLength(maxLength);
-            control.setValidators(validators);
-            control.updateValueAndValidity();
-        }
+    get text() {
+        return linkPluginKey.getState(this.editor.state).text;
     }
-    getMaxLength() {
-        if (this.lxMaxLengthCounter) {
-            return this.lxMaxLengthCounter;
-        }
-        const control = this.ngControl.control;
-        const validatorFn = control?.validator;
-        const errors = validatorFn?.(new FormControl({ length: Infinity }));
-        const requiredLength = errors?.['maxlength']['requiredLength'];
-        this.lxMaxLengthCounter = requiredLength ? requiredLength.toString() : null;
-        if (this.lxMaxLengthCounter === null) {
-            console.warn('lxMaxLength directive is used without a value or a control with a maxLength validator');
-        }
-        return requiredLength;
+    get url() {
+        return linkPluginKey.getState(this.editor.state).url;
     }
-    connectCounter() {
-        this.el.nativeElement.classList.add('lx-max-length-counter-input');
-        if (this.lxMaxLengthCounterRef) {
-            this.counterElement = this.lxMaxLengthCounterRef;
-        }
-        else {
-            this.createCounter();
-        }
+    removeLink() {
+        const editorChain = this.editor.chain().focus().extendMarkRange('link');
+        editorChain.focus().extendMarkRange('link').unsetLink().run();
+        this.closeModal();
     }
-    createCounter() {
-        this.counterElement = this.renderer.createElement('span');
-        this.renderer.addClass(this.counterElement, 'lx-max-length-counter');
-        const nextSibling = this.el.nativeElement.nextSibling;
-        if (nextSibling) {
-            this.renderer.insertBefore(this.el.nativeElement.parentNode, this.counterElement, nextSibling);
+    saveLink() {
+        if (!this.ngForm().valid) {
+            this.ngForm().form.markAllAsTouched();
+            return;
+        }
+        const formData = this.ngForm().value;
+        const href = ensureHttpProtocol(formData.url);
+        this.editor.chain().focus().extendMarkRange('link').run(); // Ensure that selection is expanded to the whole link mark
+        const { from, to, empty } = this.editor.state.selection;
+        const tr = this.editor.state.tr;
+        const linkMark = this.editor.schema.marks['link'].create({ href });
+        if (empty) {
+            tr.insertText(formData.text, from);
         }
         else {
-            this.renderer.appendChild(this.el.nativeElement.parentNode, this.counterElement);
+            tr.insertText(formData.text, from, to);
         }
-        this.destroy$.subscribe(() => {
-            this.renderer.removeChild(this.el.nativeElement.parentNode, this.counterElement);
-        });
+        tr.addMark(from, from + formData.text.length, linkMark);
+        this.editor.view.dispatch(tr);
+        this.closeModal();
     }
-    updateCounter() {
-        if (this.counterElement) {
-            const currentLength = this.ngControl.value ? this.ngControl.value.length : 0;
-            const maxLength = this.getMaxLength();
-            this.renderer.setProperty(this.counterElement, 'textContent', `${currentLength} / ${maxLength}`);
-        }
+    closeModal() {
+        dispatchLinkState(this.editor, { open: false, url: null, text: null });
     }
-    subscribeToValueChanges() {
-        const control = this.ngControl.control;
-        if (control) {
-            control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
-                this.updateCounter();
-            });
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LinkModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: LinkModalComponent, isStandalone: true, selector: "lx-link-modal", inputs: { editor: "editor" }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: NgForm, descendants: true, isSignal: true }], ngImport: i0, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lx-modal", inputs: ["open", "showCloseButton", "showBackButton", "verticalScroll", "size", "minWidth", "isFocusTrap", "canModalBeClosed"], outputs: ["close", "back"] }, { kind: "component", type: ModalHeaderComponent, selector: "lx-modal-header", inputs: ["title", "bottomBorder"] }, { kind: "component", type: ModalFooterComponent, selector: "lx-modal-footer", inputs: ["border"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: UrlValidatorDirective, selector: "[lxUrl][ngModel]" }, { kind: "component", type: ErrorMessageComponent, selector: "lx-error-message" }, { kind: "directive", type: MarkInvalidDirective, selector: "[lxMarkInvalid]", inputs: ["lxMarkInvalid"] }, { kind: "directive", type: AutofocusDirective, selector: "[lxAutofocus]", inputs: ["lxAutofocus", "lxAutofocusPreventScroll", "lxAutofocusTimeout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LinkModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-link-modal', imports: [
+                        ModalComponent,
+                        ModalHeaderComponent,
+                        ModalFooterComponent,
+                        TranslateModule,
+                        FormsModule,
+                        ButtonComponent,
+                        UrlValidatorDirective,
+                        ErrorMessageComponent,
+                        MarkInvalidDirective,
+                        AutofocusDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<lx-modal size=\"dialog\" [open]=\"true\" (close)=\"closeModal()\">\n  <lx-modal-header [title]=\"NAME + '.link' | translate\" />\n\n  <form #form=\"ngForm\" (submit)=\"saveLink()\">\n    <div class=\"link-modal-body\">\n      <div class=\"form-group required\">\n        <label for=\"text\">{{ NAME + '.linkText' | translate }}</label>\n        <input\n          #titleInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"text\"\n          type=\"text\"\n          [ngModel]=\"text\"\n          [lxAutofocus]=\"true\"\n          [lxAutofocusTimeout]=\"10\"\n          [lxMarkInvalid]=\"form.submitted && titleInput.control.touched && titleInput.hasError('required')\"\n          required\n        />\n      </div>\n\n      <div class=\"form-group required\">\n        <label for=\"url\">{{ NAME + '.url' | translate }}</label>\n        <input\n          #urlInput=\"ngModel\"\n          class=\"form-control\"\n          name=\"url\"\n          type=\"text\"\n          [ngModel]=\"url\"\n          [lxMarkInvalid]=\"form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')\"\n          lxUrl\n        />\n        @if (form.submitted && urlInput.control.touched && urlInput.hasError('invalidUrl')) {\n          <lx-error-message>\n            {{ NAME + '.invalidUrl' | translate }}\n          </lx-error-message>\n        }\n      </div>\n    </div>\n\n    <lx-modal-footer>\n      <div class=\"link-modal-actions\">\n        <div class=\"link-modal-left-buttons\">\n          @if (url) {\n            <button lx-button type=\"button\" size=\"large\" color=\"danger\" (click)=\"removeLink()\">\n              {{ NAME + '.removeLink' | translate }}\n            </button>\n          }\n        </div>\n\n        <div class=\"link-modal-right-buttons\">\n          <button lx-button type=\"button\" size=\"large\" (click)=\"closeModal()\">\n            {{ NAME + '.cancel' | translate }}\n          </button>\n          <button lx-button type=\"submit\" [disabled]=\"!titleInput.control.value || !urlInput.control.value\" color=\"primary\" size=\"large\">\n            {{ NAME + '.ok' | translate }}\n          </button>\n        </div>\n      </div>\n    </lx-modal-footer>\n  </form>\n</lx-modal>\n", styles: [".link-modal-body{display:flex;flex-direction:column;padding:20px 64px}.link-modal-actions{display:flex;justify-content:space-between}.link-modal-right-buttons{display:flex;gap:10px}\n"] }]
+        }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+const ensureHttpProtocol = (url) => {
+    if (!url)
+        return '';
+    return url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
+};
+
+class RichTextEditorToolbarComponent {
+    constructor() {
+        this.NAME = 'RichTextEditorToolbarComponent';
+        this.headingLevels = [];
+        this.cd = inject(ChangeDetectorRef);
+        this.isLinkModalOpen$ = new BehaviorSubject(false);
+        this.detectChanges = () => {
+            this.cd.markForCheck();
+        };
+        this.update = (event) => {
+            if (event.transaction.getMeta(linkPluginKey)) {
+                this.isLinkModalOpen$.next(linkPluginKey.getState(event.editor.state).open);
+            }
+        };
     }
-    setupInputRestriction() {
-        const maxLength = this.getMaxLength();
-        if (maxLength !== null) {
-            this.renderer.listen(this.el.nativeElement, 'beforeinput', (event) => {
-                const input = event.target;
-                const selectionStart = input.selectionStart || 0;
-                const selectionEnd = input.selectionEnd || 0;
-                const newValue = input.value.slice(0, selectionStart) + (event.data || '') + input.value.slice(selectionEnd);
-                // Prevent input if the new value exceeds the max length and grows
-                if (newValue.length > maxLength && newValue.length > input.value.length) {
-                    event.preventDefault();
-                }
-            });
-            this.renderer.listen(this.el.nativeElement, 'input', () => {
-                this.updateCounter();
-            });
-        }
+    ngOnInit() {
+        this.headingLevels = this.editor.extensionManager.extensions.find((ext) => ext.name === 'heading')?.options?.levels || [];
+        this.editor.on('selectionUpdate', this.detectChanges);
+        this.editor.on('transaction', this.update);
     }
-    checkForInitialOversize() {
-        const maxLength = this.getMaxLength();
-        const value = this.ngControl.value;
-        if (maxLength !== null && value && value.length > maxLength) {
-            this.ngControl.control?.markAsDirty({ onlySelf: true });
-            this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
-        }
+    ngOnDestroy() {
+        this.editor.off('selectionUpdate', this.detectChanges);
+        this.editor.off('transaction', this.update);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
+    insertTable() {
+        this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).track('INSERT_TABLE').run();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorToolbarComponent, isStandalone: true, selector: "lx-rich-text-editor-toolbar", inputs: { editor: "editor" }, ngImport: i0, template: "<div class=\"toolbar\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.list' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.orderedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.justify' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.table' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect", "overlayPositioning", "dropdownClass", "isFlexEnabledTriggerContainer"], outputs: ["opened", "closed", "closedWithoutSelection"] }, { kind: "component", type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "icon", "endIcon", "showSpinner"] }, { kind: "directive", type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { kind: "component", type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick", "keyDownAction"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LinkModalComponent, selector: "lx-link-modal", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-rich-text-editor-toolbar', imports: [
+                        AsyncPipe,
+                        OptionsDropdownComponent,
+                        ButtonComponent,
+                        KeyboardActionSourceDirective,
+                        OptionComponent,
+                        ExtensionEnabledPipe,
+                        TranslatePipe,
+                        LinkModalComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar\">\n  <div class=\"toolbarItemGroup\">\n    @if ('heading' | lxExtensionEnabled: editor) {\n      <lx-options-dropdown>\n        <button\n          class=\"toolbarItem toolbar-heading\"\n          lxKeyboardActionSource\n          lx-button\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"false\"\n          [pressed]=\"editor.isActive('heading') || editor.isActive('paragraph')\"\n          endIcon=\"fa-angle-down\"\n          [disabled]=\"!editor.isActive('heading') && !editor.isActive('paragraph')\"\n        >\n          {{ editor.isActive('heading') ? `${NAME + '.heading' | translate}  ${editor.getAttributes('heading')['level']}` : `${NAME + '.paragraph' | translate}`  }}\n        </button>\n\n        @for (level of headingLevels; track headingLevels) {\n          <lx-option\n            (select)=\"editor.chain().setHeading({ level }).focus().run()\"\n            [hasSelectedState]=\"editor.isActive('heading', { level })\"\n            [selected]=\"editor.isActive('heading', { level })\"\n          >\n            @if (!editor.isActive('heading', { level })) {\n              <i class=\"far fa-heading dropdown-icon\"></i>\n            }\n            <span>{{ NAME + '.headingOption' | translate }} {{ level }}</span>\n          </lx-option>\n        }\n\n        <lx-option\n          (select)=\"this.editor.chain().setParagraph().focus().run()\"\n          [hasSelectedState]=\"editor.isActive('paragraph')\"\n          [selected]=\"editor.isActive('paragraph')\"\n        >\n          @if (!editor.isActive('paragraph')) {\n            <i class=\"far fa-paragraph dropdown-icon\"></i>\n          }\n          <span>{{ NAME + '.paragraphOption' | translate }}</span>\n        </lx-option>\n      </lx-options-dropdown>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bold' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.bold' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [disabled]=\"editor.isActive('header')\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBold().focus().run()\"\n        [pressed]=\"editor.isActive('bold')\"\n        icon=\"fa-bold\"\n      ></button>\n    }\n\n    @if ('italic' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.italic' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleItalic().focus().run()\"\n        [pressed]=\"editor.isActive('italic')\"\n        icon=\"fa-italic\"\n      ></button>\n    }\n\n    @if ('underline' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.underline' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleUnderline().focus().run()\"\n        [pressed]=\"editor.isActive('underline')\"\n        icon=\"fa-underline\"\n      ></button>\n    }\n\n    @if ('strike' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.strikethrough' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleStrike().focus().run()\"\n        [pressed]=\"editor.isActive('strike')\"\n        icon=\"fa-strikethrough\"\n      ></button>\n    }\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('bulletList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.list' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleBulletList().run()\"\n        [pressed]=\"editor.isActive('listItem')\"\n        icon=\"fa-list\"\n      ></button>\n    }\n\n    @if ('orderedList' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.orderedList' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().toggleOrderedList().run()\"\n        [pressed]=\"editor.isActive('orderedList')\"\n        icon=\"fa-list-ol\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('textAlign' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignLeft' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'left' })\"\n        icon=\"fa-align-left\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignCenter' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'center' })\"\n        icon=\"fa-align-center\"\n      ></button>\n\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.alignRight' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'right' })\"\n        icon=\"fa-align-right\"\n      ></button>\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.justify' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n        [pressed]=\"editor.isActive({ textAlign: 'justify' })\"\n        icon=\"fa-align-justify\"\n      ></button>\n    }\n\n    <span class=\"separator\"></span>\n  </div>\n\n  <div class=\"toolbarItemGroup\">\n    @if ('link' | lxExtensionEnabled: editor) {\n      <button\n        class=\"toolbarItem\"\n        lx-button\n        [attr.aria-label]=\"NAME + '.link' | translate\"\n        [mode]=\"'outline'\"\n        [size]=\"'medium'\"\n        [square]=\"true\"\n        (click)=\"editor.chain().openLinkModal().run()\"\n        [pressed]=\"editor.isActive('link')\"\n        icon=\"fa-link\"\n      ></button>\n      <span class=\"separator\"></span>\n    }\n  </div>\n\n  @let tableEnabled = 'table' | lxExtensionEnabled: editor;\n  @let codeEnabled = 'codeBlock' | lxExtensionEnabled: editor;\n\n  @if (tableEnabled || codeEnabled) {\n    <div class=\"toolbarItemGroup\">\n      @if (codeEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.code' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"true\"\n          (click)=\"editor.chain().setCodeBlock().run()\"\n          [pressed]=\"editor.isActive('codeBlock')\"\n          icon=\"fa-code\"\n        ></button>\n      }\n\n      @if ('lxDiagram' | lxExtensionEnabled: editor) {\n        <ng-content select=\".diagram-btn\" />\n      }\n\n      @if (tableEnabled) {\n        <button\n          class=\"toolbarItem\"\n          lx-button\n          [attr.aria-label]=\"NAME + '.table' | translate\"\n          [mode]=\"'outline'\"\n          [size]=\"'medium'\"\n          [square]=\"true\"\n          (click)=\"insertTable()\"\n          [pressed]=\"editor.isActive('table')\"\n          icon=\"fa-table\"\n          [disabled]=\"editor.isActive('table')\"\n        ></button>\n      }\n\n      <span class=\"separator\"></span>\n    </div>\n  }\n</div>\n\n@if (('link' | lxExtensionEnabled: editor) && (isLinkModalOpen$ | async)) {\n  <lx-link-modal [editor]=\"editor\" />\n}\n", styles: [":host{width:100%;display:flex;border-bottom:#99a5bb 1px solid;padding:8px}.toolbar{display:flex;flex-wrap:wrap;width:100%}.toolbar .toolbarItemGroup{display:flex;align-items:center;gap:2px}.toolbar .toolbarItemGroup:not(.toolbarItemGroup:has(.toolbarItem)){display:none}.toolbar .toolbarItemGroup:last-child .separator{display:none}.toolbar .dropdown-icon{margin-left:-4px;margin-right:8px}.toolbar .toolbar-heading{width:100px}.toolbar .toolbarItem{text-wrap:nowrap;color:#2a303d;border:none;height:24px}.toolbar .toolbarItem:hover:not(disabled){border:none}.toolbar .toolbarItem.pressed{background:#f0f2f5!important}.toolbar .toolbarItem.square{border:none!important}.toolbar .separator{width:1px;height:16px;margin:0 4px 0 2px;border:#c2c9d6 .5px solid}\n"] }]
+        }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class RichTextEditorComponent {
+    constructor() {
+        this.mode = input.required();
+        this.outputFormat = input.required();
+        this.additionalFeatures = input([]);
+        this.ariaLabelledBy = input(null);
+        this.maxHeight = input(null);
+        this.customExtensions = input([]);
+        this.blur = output();
+        this.value = null;
+        this.disabled = false;
+        this.editor = inject(TipTapEditorDirective).editor;
+        this.onChange = (_value) => { };
+        this.onTouched = () => { };
+    }
+    ngOnDestroy() {
+        this.editor().destroy();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: RichTextEditorComponent, isStandalone: true, selector: "lx-rich-text-editor", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, outputFormat: { classPropertyName: "outputFormat", publicName: "outputFormat", isSignal: true, isRequired: true, transformFunction: null }, additionalFeatures: { classPropertyName: "additionalFeatures", publicName: "additionalFeatures", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, customExtensions: { classPropertyName: "customExtensions", publicName: "customExtensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, host: { properties: { "style.--editor-max-height": "maxHeight()" } }, providers: [
+            ExtensionsBuilder,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RichTextEditorComponent),
+                multi: true
+            }
+        ], hostDirectives: [{ directive: TipTapEditorDirective, inputs: ["outputFormat", "outputFormat", "additionalFeatures", "additionalFeatures", "ariaLabelledBy", "ariaLabelledBy", "customExtensions", "customExtensions", "mode", "mode"] }, { directive: TrackingDirective, outputs: ["trackEvent", "trackEvent"] }], ngImport: i0, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}\n"], dependencies: [{ kind: "directive", type: EditorDirective, selector: "tiptap-editor[editor]", inputs: ["editor", "outputFormat"], outputs: ["blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RichTextEditorToolbarComponent, selector: "lx-rich-text-editor-toolbar", inputs: ["editor"] }, { kind: "component", type: TableBubbleMenuComponent, selector: "lx-table-bubble-menu", inputs: ["editor"] }, { kind: "pipe", type: ExtensionEnabledPipe, name: "lxExtensionEnabled" }, { kind: "component", type: TruncateButtonComponent, selector: "lx-truncate-button", inputs: ["editor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lx-rich-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        EditorDirective,
+                        FormsModule,
+                        RichTextEditorToolbarComponent,
+                        TableBubbleMenuComponent,
+                        ExtensionEnabledPipe,
+                        TruncateButtonComponent
+                    ], hostDirectives: [
+                        {
+                            directive: TipTapEditorDirective,
+                            inputs: ['outputFormat', 'additionalFeatures', 'ariaLabelledBy', 'customExtensions', 'mode']
+                        },
+                        {
+                            directive: TrackingDirective,
+                            outputs: ['trackEvent']
+                        }
+                    ], providers: [
+                        ExtensionsBuilder,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RichTextEditorComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[style.--editor-max-height]': 'maxHeight()'
+                    }, template: "<div [class.viewMode]=\"mode() === 'view'\" [class.editMode]=\"mode() === 'edit'\" [class.disabled]=\"disabled\">\n  @if (mode() === 'edit' && !disabled) {\n    <lx-rich-text-editor-toolbar (mousedown)=\"$event.preventDefault()\" [editor]=\"editor()\">\n      <ng-content select=\".diagram-btn\" ngProjectAs=\".diagram-btn\" />\n    </lx-rich-text-editor-toolbar>\n  }\n  <tiptap-editor\n    [editor]=\"editor()\"\n    [outputFormat]=\"outputFormat()\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onChange($event)\"\n    (blur)=\"blur.emit()\"\n    [disabled]=\"mode() === 'view' || disabled\"\n  />\n\n  @if (('truncate' | lxExtensionEnabled: editor()) && mode() === 'view') {\n    <lx-truncate-button [editor]=\"editor()\" />\n  }\n</div>\n\n@if ('table' | lxExtensionEnabled: editor()) {\n  <lx-table-bubble-menu [editor]=\"editor()\" />\n}\n\n<ng-content />\n", styles: [":host{display:flex;width:100%}.editorButton{margin:0 5px}.editMode{width:100%;border:1px solid #99a5bb;background-color:#fff;border-radius:2px}:host ::ng-deep .editMode .ProseMirror{padding:15px 18.9px;resize:vertical;max-height:var(--editor-max-height, auto)}.viewMode{width:100%}.disabled{background-color:#f0f2f5;color:#61779d}:host ::ng-deep .ProseMirror{outline-width:0;border-radius:2px;overflow:auto}:host ::ng-deep .ProseMirror-gapcursor:after{width:1px;height:14px;border-left:1px solid #000}:host ::ng-deep .ProseMirror p:first-child{margin-top:0}:host ::ng-deep .ProseMirror p:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1:first-child,:host ::ng-deep .ProseMirror h2:first-child,:host ::ng-deep .ProseMirror h3:first-child,:host ::ng-deep .ProseMirror h4:first-child,:host ::ng-deep .ProseMirror h5:first-child,:host ::ng-deep .ProseMirror h6:first-child{margin-top:0}:host ::ng-deep .ProseMirror h1:last-child,:host ::ng-deep .ProseMirror h2:last-child,:host ::ng-deep .ProseMirror h3:last-child,:host ::ng-deep .ProseMirror h4:last-child,:host ::ng-deep .ProseMirror h5:last-child,:host ::ng-deep .ProseMirror h6:last-child{margin-bottom:0}:host ::ng-deep .ProseMirror h1{font-size:var(--lxFontHeader1Size)}:host ::ng-deep .ProseMirror h2{font-size:var(--lxFontHeader2Size)}:host ::ng-deep .ProseMirror h3{font-size:var(--lxFontHeader3Size)}:host ::ng-deep .ProseMirror h4{font-size:var(--lxFontHeader4Size)}:host ::ng-deep .ProseMirror .tableWrapper{margin:20px 0}:host ::ng-deep .ProseMirror .tableWrapper h1,:host ::ng-deep .ProseMirror .tableWrapper h2,:host ::ng-deep .ProseMirror .tableWrapper h3,:host ::ng-deep .ProseMirror .tableWrapper h4,:host ::ng-deep .ProseMirror .tableWrapper h5,:host ::ng-deep .ProseMirror .tableWrapper h6{margin-top:0}:host ::ng-deep .ProseMirror .tableWrapper table{border-collapse:collapse;margin:0;table-layout:fixed;width:100%}:host ::ng-deep .ProseMirror .tableWrapper table th,:host ::ng-deep .ProseMirror .tableWrapper table td{border:1px solid #c2c9d6;box-sizing:border-box;min-width:1em;padding:12px;position:relative;vertical-align:top}:host ::ng-deep .ProseMirror .tableWrapper table th>*,:host ::ng-deep .ProseMirror .tableWrapper table td>*{margin-bottom:0}:host ::ng-deep .ProseMirror .tableWrapper table th{background-color:#c2c9d6;font-weight:700;text-align:left}:host ::ng-deep .ProseMirror .tableWrapper table p{margin:0}:host ::ng-deep .ProseMirror .tableWrapper table .selectedCell:after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:2}:host ::ng-deep .ProseMirror .tableWrapper table .column-resize-handle{background-color:#b2bccc;bottom:-2px;right:-2px;position:absolute;top:0;width:4px;pointer-events:none}:host ::ng-deep .ProseMirror .selectedCell{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column,:host ::ng-deep .ProseMirror .selector-row{all:unset;display:flex;align-items:center;justify-content:center;background-color:#f0f2f5;cursor:pointer;position:absolute;z-index:10;margin-left:-1px;margin-top:-.5px}:host ::ng-deep .ProseMirror .selector-column:hover,:host ::ng-deep .ProseMirror .selector-row:hover{background-color:#e1e5eb}:host ::ng-deep .ProseMirror .selector-column{width:calc(100% + 1px);border-left:1px solid #e1e5eb;height:11px;top:-11px;left:0}:host ::ng-deep .ProseMirror .selector-column.first{border-left:none}:host ::ng-deep .ProseMirror .selector-column.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-column.selected:before{content:\"\";border-bottom:2px dotted #fff;width:.6rem}:host ::ng-deep .ProseMirror .selector-column:hover:before{content:\"\";border-bottom:2px dotted #61779d;width:.6rem}:host ::ng-deep .ProseMirror .selector-column.selected:before{border-bottom:2px dotted #fff}:host ::ng-deep .ProseMirror .selector-row{height:calc(100% + 1px);border-top:1px solid #e1e5eb;width:11px;left:-11px;top:0}:host ::ng-deep .ProseMirror .selector-row.first{border-top:none}:host ::ng-deep .ProseMirror .selector-row.selected{background-color:#b2bccc;border-color:transparent}:host ::ng-deep .ProseMirror .selector-row.selected:before{content:\"\";border-left:2px dotted #fff;height:.575rem}:host ::ng-deep .ProseMirror .selector-row:hover:before{content:\"\";border-left:2px dotted #61779d;height:.575rem}:host ::ng-deep .ProseMirror .selector-row.selected:before{border-left:2px dotted #fff}\n"] }]
+        }] });
+
+class FocusEditorDirective {
+    constructor() {
+        this.editor = inject(TipTapEditorDirective).editor;
+    }
+    ngOnInit() {
+        this.editor().on('create', () => {
+            this.editor().commands.focus('start');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FocusEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: FocusEditorDirective, isStandalone: true, selector: "lx-rich-text-editor[lxFocusEditor]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FocusEditorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lxMaxLengthCounter]'
+                    selector: 'lx-rich-text-editor[lxFocusEditor]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
-                    type: Self
-                }] }], propDecorators: { lxMaxLengthCounter: [{
+        }] });
+
+class HighlightTermDirective {
+    constructor() {
+        this.lxHighlightTerm = input();
+        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: "19.2.6", ngImport: i0, type: HighlightTermDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: HighlightTermDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxHighlightTerm]'
+                }]
+        }], ctorParameters: () => [] });
+
+class TruncateDirective {
+    constructor() {
+        this.lxTruncate = input();
+        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: "19.2.6", ngImport: i0, type: TruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", 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: "19.2.6", ngImport: i0, type: TruncateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'lx-rich-text-editor[lxTruncate]'
+                }]
+        }], ctorParameters: () => [] });
+
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+class AngularNodeViewComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularNodeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AngularNodeViewComponent, isStandalone: false, selector: "ng-component", inputs: { editor: "editor", node: "node", decorations: "decorations", selected: "selected", extension: "extension", getPos: "getPos", updateAttributes: "updateAttributes", deleteNode: "deleteNode" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AngularNodeViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                    // eslint-disable-next-line @angular-eslint/prefer-standalone
+                    standalone: false
+                }]
+        }], propDecorators: { editor: [{
                 type: Input
-            }], lxMaxLengthCounterRef: [{
+            }], node: [{
+                type: Input
+            }], decorations: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], extension: [{
+                type: Input
+            }], getPos: [{
+                type: Input
+            }], updateAttributes: [{
+                type: Input
+            }], deleteNode: [{
                 type: Input
             }] } });
-
-class Sorting {
-    constructor() {
-        this.key = '';
-        this.order = 'asc';
+
+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);
     }
 }
 
-/**
- * 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.
- * It is still possible to manually input a value lower or higher than min and max value.
- */
-function ValidateDateInForeseeableFuture(control) {
-    // matches yyyy-mm-dd
-    const dateRegex = /^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/;
-    if (control.value && dateRegex.test(control.value)) {
-        const today = formatDate(new Date(), 'yyyy-MM-dd', 'en');
-        const maxDate = '2999-12-31';
-        if (control.value < today || control.value > maxDate) {
-            return {
-                dateInForseeableFuture: {
-                    valid: false
-                }
+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.editor.on('selectionUpdate', this.handleSelectionUpdate);
+        // 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);
             };
         }
-        else {
-            return null;
+        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();
     }
-    return null;
-}
-
-function stringIsInArray(array, stringToFind, valueMapFunction) {
-    const valueToFind = valueMapFunction ? valueMapFunction(stringToFind).toLocaleLowerCase() : stringToFind.toLowerCase();
-    return array.map((item) => item.toLocaleLowerCase()).indexOf(valueToFind) > -1;
-}
-/**
- * Validates that a string is not inside an array of strings
- */
-function ValidateStringNotInArray(array, valueMapFunction, validatorName = 'stringNotInArray') {
-    return function (control) {
-        if (!control.value) {
+    get dom() {
+        return this.renderer.dom;
+    }
+    get contentDOM() {
+        if (this.node.isLeaf) {
             return null;
         }
-        if (stringIsInArray(array, control.value, valueMapFunction)) {
-            return {
-                [validatorName]: true
-            };
+        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);
         }
-        return null;
-    };
-}
-function ValidateStringNotInArrayAsync(array$, valueMapFunction, validatorName = 'stringNotInArrayAsync') {
-    return function (control) {
-        if (!control.value) {
-            return of(null);
+    }
+    handleSelectionUpdate() {
+        const { from, to } = this.editor.state.selection;
+        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+            this.selectNode();
         }
-        return array$.pipe(map$1((array) => ValidateStringNotInArray(array, valueMapFunction, validatorName)(control)));
-    };
+        else {
+            this.deselectNode();
+        }
+    }
+    update(node, decorations) {
+        const updateProps = () => {
+            this.renderer.updateProps({ node, 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() {
+        this.renderer.updateProps({ selected: true });
+    }
+    deselectNode() {
+        this.renderer.updateProps({ selected: false });
+    }
+    destroy() {
+        this.renderer.destroy();
+        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
+        this.contentDOMElement = null;
+    }
 }
+const AngularNodeViewRenderer = (ViewComponent, options) => {
+    return (props) => {
+        return new AngularNodeView(ViewComponent, props, options);
+    };
+};
 
-const MODAL_CLOSE = new InjectionToken('MODAL_CLOSE');
 /**
- * An enum to track how the modal was closed
- * Escape - Esc key press
- * CloseButton - top right close button (x)
- * OutsideClick - click outside the modal
- * Other - modal close with the trigger through closeModal$ subject
+ * 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
  */
-var ModalCloseClickLocation;
-(function (ModalCloseClickLocation) {
-    ModalCloseClickLocation["Escape"] = "escape";
-    ModalCloseClickLocation["CloseButton"] = "closeButton";
-    ModalCloseClickLocation["OutsideClick"] = "outsideClick";
-    ModalCloseClickLocation["CancelButton"] = "cancelButton";
-    ModalCloseClickLocation["Other"] = "other";
-})(ModalCloseClickLocation || (ModalCloseClickLocation = {}));
-
-class ModalFooterComponent {
-    constructor() {
-        this.border = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ModalFooterComponent, isStandalone: true, selector: "lx-modal-footer", inputs: { border: "border" }, ngImport: i0, template: "<div class=\"footerContainer\" [class.border]=\"border\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;text-align:right;--modal-footer-padding-left: 90px;--modal-footer-padding-right: 0;--modal-footer-display: block}:host-context(.fullscreen) .footerContainer{padding-left:var(--modal-footer-padding-left);padding-right:var(--modal-footer-padding-right);height:70px}:host-context(.dialog) .footerContainer,:host-context(.dialog-large) .footerContainer{padding:16px;height:64px;border-radius:0 0 6px 6px;display:var(--modal-footer-display)}.footerContainer.border{border-top:1px solid #cfd5df}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-modal-footer', template: "<div class=\"footerContainer\" [class.border]=\"border\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;text-align:right;--modal-footer-padding-left: 90px;--modal-footer-padding-right: 0;--modal-footer-display: block}:host-context(.fullscreen) .footerContainer{padding-left:var(--modal-footer-padding-left);padding-right:var(--modal-footer-padding-right);height:70px}:host-context(.dialog) .footerContainer,:host-context(.dialog-large) .footerContainer{padding:16px;height:64px;border-radius:0 0 6px 6px;display:var(--modal-footer-display)}.footerContainer.border{border-top:1px solid #cfd5df}\n"] }]
-        }], propDecorators: { border: [{
-                type: Input
-            }] } });
-
-class ModalHeaderComponent {
-    constructor() {
-        this.title = '';
-        this.bottomBorder = true;
+class RemoveMarkdownPipe {
+    transform(markdown) {
+        return markdownToText(markdown);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ModalHeaderComponent, isStandalone: true, selector: "lx-modal-header", inputs: { title: "title", bottomBorder: "bottomBorder" }, ngImport: i0, template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content />\n  @if (title.length > 0) {\n    <h1 class=\"lx-heading-2\">{{ title }}</h1>\n  }\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;color:#2a303d;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-modal-header', template: "<div class=\"headerContainer\" [class.bottomBorder]=\"bottomBorder\">\n  <ng-content />\n  @if (title.length > 0) {\n    <h1 class=\"lx-heading-2\">{{ title }}</h1>\n  }\n</div>\n", styles: [":host{display:block}:host.lxModalHeaderOneLine h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--lx-modal-header-max-width)}:host-context(.fullscreen) .headerContainer{padding:24px 90px;border-bottom:none}:host-context(.fullscreen) .headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}:host-context(.dialog) .headerContainer,:host-context(.dialog-large) .headerContainer{padding:24px 16px;border-radius:6px 6px 0 0}:host-context(.dialog) .headerContainer h1,:host-context(.dialog-large) .headerContainer h1{word-break:break-word}h1{margin:0 auto;padding:0;color:#2a303d;text-align:center}.headerContainer{display:flex}.headerContainer.bottomBorder{border-bottom:1px solid #cfd5df}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], bottomBorder: [{
-                type: Input
-            }] } });
-
-class ModalContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: ModalContentDirective, isStandalone: true, selector: "[lxModalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RemoveMarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: RemoveMarkdownPipe, isStandalone: true, name: "lxRemoveMarkdown" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalContentDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: RemoveMarkdownPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[lxModalContent]'
+                    name: 'lxRemoveMarkdown'
                 }]
         }] });
+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;
+}
 
-/**
- * This documentation provides details on the usage and configuration of the Modal.
- *
- * ## Usage
- *
- * 1. Import `LxModalModule` and `LxCoreUiModule` modules from `@leanix/components` in your module where you want to use the component.
- *
- * ```ts
- * import { LxModalModule, LxCoreUiModule } from '@leanix/components';
- * ```
- *
- * 2. Use the **lx-modal** component in your template with the parameters described below.
- *
- * - **`open`**: Whether the modal is open or closed.
- * - **`size`**: 'dialog' | 'dialog-large'.
- * - **`verticalScroll`**: Whether the modal is scrollable or not.
- * - **`showHeader`**: Whether the modal has a header or not.
- * - **`showFooter`**: Whether the modal has a footer or not.
- * - **`showCloseButton`**: Whether to show the close button.
- * - **`showBackButton`**: Whether to show the back button.
- *
- * 3. Use optional **lx-modal-header** component in your template with the parameters described below.
- *
- * - **`title`**: Title of the modal.
- * - **`subtitle`**: Subtitle of the modal.
- * - **`bottomBorder`**: Whether to show a bottom border.
- *
- * 4. Use optional **lx-modal-footer** component in your template with the parameters described below.
- *
- * - **`border`**: Whether to show the footer at the bottom of the modal.
- *
- * **GLOBAL PROVIDERS** required for this component:
- * - `provideAnimations()`
- *
- * **ATTENTION - SCROLLABLE DIALOG**:
- * The <lx-modal> component when used as "dialog" is not designed to work with a
- * scrollable body (via `overflow: auto | scroll`) in combination with dropdowns.
- * The overflow on the body will also clip the dropdowns, which is expected.
- *
- * Reasoning:
- * The contents within the dialog should be just a few elements which fit and
- * justify the usage of a dialog. If the content is larger than the dialog, and thus
- * requires scrolling, we should discuss whether to put it into a dialog at all
- * and rather think about putting the content on a separate route or
- * using the fullscreen version of the modal.
- */
-class ModalComponent {
-    get content() {
-        return this.explicitContent || this.implicitContent;
-    }
-    /** @internal */
-    onEscape() {
-        if (this.open && this.showCloseButton) {
-            this.closeModal(ModalCloseClickLocation.Escape);
-        }
-    }
-    constructor(overlay, renderer, closeModal$, focusTrap) {
-        this.overlay = overlay;
+class MaxLengthCounterDirective {
+    constructor(el, renderer, ngControl) {
+        this.el = el;
         this.renderer = renderer;
-        this.closeModal$ = closeModal$;
-        this.focusTrap = focusTrap;
-        /** @internal */
-        this.NAME = 'ModalComponent';
-        /** Whether the modal is open or closed. */
-        this.open = false;
-        /** Whether to show the close button. */
-        this.showCloseButton = true;
-        /** Whether to show the back button. */
-        this.showBackButton = false;
-        /*
-         * If true, then the content area scrolls vertically instead of expanding its height.
-         * This can be a problem if the content has dropdowns or date inputs, but can be good if the content has a huge amount of text.
-         */
-        this.verticalScroll = false;
-        /** The size of the modal. */
-        this.size = 'fullscreen';
-        /**
-         * Minimum width of the modal.
-         *
-         * _NB: Some modal implementations rely on this minWidth being 600px_
-         */
-        this.minWidth = '600px';
-        /** Whether the modal is a focus trap. */
-        this.isFocusTrap = false;
-        /** Event emitted when the modal is closed. */
-        this.close = new EventEmitter();
-        /** Event emitted when the back button is clicked. */
-        this.back = new EventEmitter();
-        /** @internal */
-        this.closeLocation = ModalCloseClickLocation;
-        /** @internal */
-        this.destroyed$ = new Subject();
+        this.ngControl = ngControl;
+        this.lxMaxLengthCounter = null;
+        this.counterElement = null;
+        this.destroy$ = new Subject();
     }
     ngOnInit() {
-        this.closeModal$
-            ?.pipe(takeUntil(this.destroyed$))
-            .subscribe((closeLocation) => this.closeModal(closeLocation));
-        if (this.size === 'fullscreen') {
-            this.overlayRef = this.overlay.create({
-                panelClass: this.size,
-                width: '100%',
-                height: '100vh'
-            });
-        }
-        else if (this.size === 'dialog-large') {
-            const positionStrategy = this.overlay.position().global().top('4vh').centerHorizontally();
-            this.overlayRef = this.overlay.create({
-                panelClass: this.size,
-                positionStrategy,
-                hasBackdrop: true,
-                width: '90%',
-                height: '90vh'
-            });
+        this.setupMaxLengthValidation();
+        this.connectCounter();
+        this.updateCounter();
+        this.subscribeToValueChanges();
+        this.setupInputRestriction();
+        this.checkForInitialOversize();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupMaxLengthValidation() {
+        const maxLength = this.getMaxLength();
+        const control = this.ngControl.control;
+        if (maxLength !== null && control) {
+            const validators = control.validator ? [control.validator, Validators.maxLength(maxLength)] : Validators.maxLength(maxLength);
+            control.setValidators(validators);
+            control.updateValueAndValidity();
         }
-        else {
-            // size 'dialog'
-            const positionStrategy = this.overlay.position().global().top('8vh').centerHorizontally();
-            this.overlayRef = this.overlay.create({
-                panelClass: this.size,
-                minWidth: this.minWidth,
-                positionStrategy,
-                hasBackdrop: true,
-                scrollStrategy: this.overlay.scrollStrategies.block()
-            });
+    }
+    getMaxLength() {
+        if (this.lxMaxLengthCounter) {
+            return this.lxMaxLengthCounter;
         }
-        if (this.size !== 'fullscreen') {
-            this.overlayRef
-                .backdropClick()
-                .pipe(takeUntil(this.destroyed$))
-                .subscribe(() => this.closeModal(ModalCloseClickLocation.OutsideClick));
+        const control = this.ngControl.control;
+        const validatorFn = control?.validator;
+        const errors = validatorFn?.(new FormControl({ length: Infinity }));
+        const requiredLength = errors?.['maxlength']['requiredLength'];
+        this.lxMaxLengthCounter = requiredLength ? requiredLength.toString() : null;
+        if (this.lxMaxLengthCounter === null) {
+            console.warn('lxMaxLength directive is used without a value or a control with a maxLength validator');
         }
+        return requiredLength;
     }
-    ngOnChanges() {
-        if (this.open && this.overlayRef && !this.overlayRef.hasAttached()) {
-            this.openModal();
-        }
-        if (!this.open && this.overlayRef && this.overlayRef.hasAttached()) {
-            this.closeModal(ModalCloseClickLocation.Other);
+    connectCounter() {
+        this.el.nativeElement.classList.add('lx-max-length-counter-input');
+        if (this.lxMaxLengthCounterRef) {
+            this.counterElement = this.lxMaxLengthCounterRef;
         }
-        if (this.open && this.overlayRef && this.overlayRef.hasAttached() && this.isFocusTrap) {
-            this.trapFocusInModal(this.overlayRef.hostElement);
+        else {
+            this.createCounter();
         }
     }
-    ngAfterViewInit() {
-        if (this.open) {
-            timer(0)
-                .pipe(takeUntil(this.destroyed$))
-                .subscribe(() => this.openModal());
+    createCounter() {
+        this.counterElement = this.renderer.createElement('span');
+        this.renderer.addClass(this.counterElement, 'lx-max-length-counter');
+        const nextSibling = this.el.nativeElement.nextSibling;
+        if (nextSibling) {
+            this.renderer.insertBefore(this.el.nativeElement.parentNode, this.counterElement, nextSibling);
         }
-    }
-    /** @internal */
-    openModal() {
-        this.oldOverflow = document.documentElement.style.overflowY;
-        if (this.size === 'fullscreen') {
-            this.renderer.setStyle(document.documentElement, 'overflowY', 'hidden');
+        else {
+            this.renderer.appendChild(this.el.nativeElement.parentNode, this.counterElement);
         }
-        this.overlayRef.attach(this.cdkPortal);
-        this.trapFocusInModal(this.overlayRef.hostElement);
-    }
-    /** @internal */
-    emitBack() {
-        this.back.emit();
+        this.destroy$.subscribe(() => {
+            this.renderer.removeChild(this.el.nativeElement.parentNode, this.counterElement);
+        });
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        if (this.size === 'fullscreen') {
-            this.renderer.setStyle(document.documentElement, 'overflowY', this.oldOverflow);
+    updateCounter() {
+        if (this.counterElement) {
+            const currentLength = this.ngControl.value ? this.ngControl.value.length : 0;
+            const maxLength = this.getMaxLength();
+            this.renderer.setProperty(this.counterElement, 'textContent', `${currentLength} / ${maxLength}`);
         }
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
+    }
+    subscribeToValueChanges() {
+        const control = this.ngControl.control;
+        if (control) {
+            control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                this.updateCounter();
+            });
         }
     }
-    /** @internal */
-    async closeModal(closeLocation) {
-        if (!this.canModalBeClosed || (await this.canModalBeClosed(closeLocation))) {
-            this.open = false;
-            this.overlayRef.detach();
-            if (this.size === 'fullscreen') {
-                this.renderer.setStyle(document.documentElement, 'overflowY', this.oldOverflow);
-            }
-            this.close.emit(typeof closeLocation === 'boolean' ? ModalCloseClickLocation.Other : closeLocation);
+    setupInputRestriction() {
+        const maxLength = this.getMaxLength();
+        if (maxLength !== null) {
+            this.renderer.listen(this.el.nativeElement, 'beforeinput', (event) => {
+                const input = event.target;
+                const selectionStart = input.selectionStart || 0;
+                const selectionEnd = input.selectionEnd || 0;
+                const newValue = input.value.slice(0, selectionStart) + (event.data || '') + input.value.slice(selectionEnd);
+                // Prevent input if the new value exceeds the max length and grows
+                if (newValue.length > maxLength && newValue.length > input.value.length) {
+                    event.preventDefault();
+                }
+            });
+            this.renderer.listen(this.el.nativeElement, 'input', () => {
+                this.updateCounter();
+            });
         }
     }
-    trapFocusInModal(hostElement) {
-        this.focusTrap.create(hostElement);
+    checkForInitialOversize() {
+        const maxLength = this.getMaxLength();
+        const value = this.ngControl.value;
+        if (maxLength !== null && value && value.length > maxLength) {
+            this.ngControl.control?.markAsDirty({ onlySelf: true });
+            this.ngControl.control?.updateValueAndValidity({ onlySelf: true });
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, deps: [{ token: i1$2.Overlay }, { token: i0.Renderer2 }, { token: MODAL_CLOSE, optional: true }, { token: i2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ModalComponent, isStandalone: true, selector: "lx-modal", inputs: { open: "open", showCloseButton: "showCloseButton", showBackButton: "showBackButton", verticalScroll: "verticalScroll", size: "size", minWidth: "minWidth", isFocusTrap: "isFocusTrap", canModalBeClosed: "canModalBeClosed" }, outputs: { close: "close", back: "back" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderComponent, descendants: true }, { propertyName: "footer", first: true, predicate: ModalFooterComponent, descendants: true }, { propertyName: "explicitContent", first: true, predicate: ModalContentDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "cdkPortal", first: true, predicate: CdkPortal, descendants: true, static: true }, { propertyName: "implicitContent", first: true, predicate: ["implicitContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <div (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" role=\"button\" class=\"fal fa-long-arrow-left\"></div>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          class=\"fal fa-times closeButton\"\n        ></button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }], animations: [
-            trigger('modal', [
-                transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
-                transition(':leave', animate('0.15s', style({ opacity: 0 })))
-            ])
-        ] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MaxLengthCounterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.NgControl, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MaxLengthCounterDirective, isStandalone: true, selector: "[lxMaxLengthCounter]", inputs: { lxMaxLengthCounter: "lxMaxLengthCounter", lxMaxLengthCounterRef: "lxMaxLengthCounterRef" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lx-modal', animations: [
-                        trigger('modal', [
-                            transition(':enter', [style({ opacity: 0 }), animate('0.15s', style({ opacity: 1 }))]),
-                            transition(':leave', animate('0.15s', style({ opacity: 0 })))
-                        ])
-                    ], imports: [PortalModule, NgTemplateOutlet, TranslateModule, CommonModule], template: "<ng-template cdkPortal>\n  @if (open) {\n    <div\n      role=\"dialog\"\n      class=\"lxmodal\"\n      [class.lxmodal--fullscreen]=\"size === 'fullscreen'\"\n      [class.lxmodal--dialog]=\"size === 'dialog'\"\n      [class.lxmodal--dialog-large]=\"size === 'dialog-large'\"\n      [class.lxmodal--withFooter]=\"!!footer\"\n      [class.lxmodal--verticalScroll]=\"verticalScroll\"\n      @modal\n    >\n      @if (size === 'fullscreen' && showBackButton) {\n        <div (click)=\"emitBack()\" (keyup.enter)=\"emitBack()\" tabindex=\"0\" role=\"button\" class=\"fal fa-long-arrow-left\"></div>\n      }\n      @if (showCloseButton) {\n        <!-- TODO lx-button doesn't comply with modal close button style yet -->\n        <!-- eslint-disable-next-line @nx/workspace-no-icon-in-button-content -->\n        <button\n          (click)=\"closeModal(closeLocation.CloseButton)\"\n          [attr.aria-label]=\"NAME + '.close' | translate\"\n          class=\"fal fa-times closeButton\"\n        ></button>\n      }\n      @if (header) {\n        <ng-content select=\"lx-modal-header\" />\n      }\n      <div class=\"modalContentContainer\" [class.lxThinScrollbar]=\"verticalScroll\">\n        <ng-container *ngTemplateOutlet=\"content\" />\n      </div>\n      @if (footer) {\n        <ng-content select=\"lx-modal-footer\" />\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #implicitContent>\n  <ng-content />\n</ng-template>\n", styles: ["@keyframes subtleScaleUpKeyFrames{0%{transform:scale(.95);opacity:0}}.lxmodal{background:#fff;width:100%}.lxmodal--withFooter.lxmodal--fullscreen.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--withFooter.lxmodal--fullscreen:not(.lxmodal--verticalScroll) .modalContentContainer{bottom:70px;overflow:hidden}.lxmodal--verticalScroll .modalContentContainer{overflow-y:auto;padding:16px}.lxmodal--fullscreen{height:100%;display:flex;flex-direction:column}.lxmodal--fullscreen .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;right:36px;top:12px;z-index:1}.lxmodal--fullscreen .closeButton:before{cursor:pointer}.lxmodal--fullscreen .closeButton:hover,.lxmodal--fullscreen .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .closeButton:focus{outline:0}.lxmodal--fullscreen .fa-long-arrow-left{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;width:48px;height:48px;line-height:48px;left:36px;top:16px}.lxmodal--fullscreen .fa-long-arrow-left:before{cursor:pointer}.lxmodal--fullscreen .fa-long-arrow-left:hover,.lxmodal--fullscreen .fa-long-arrow-left:focus{color:#526179;background-color:#eaedf1}.lxmodal--fullscreen .fa-long-arrow-left:focus{outline:0}.lxmodal--dialog,.lxmodal--dialog-large{display:block;position:relative;border-radius:6px;box-shadow:0 8px 20px #0000003d}.lxmodal--dialog .modalContentContainer,.lxmodal--dialog-large .modalContentContainer{position:relative}.lxmodal--dialog .closeButton,.lxmodal--dialog-large .closeButton{border:0;background:transparent;position:absolute;text-align:center;transition:color,background-color .18s;transition-delay:.1s;transition-timing-function:ease;border-radius:50%;color:#61779d;font-size:26px;height:32px;width:32px;z-index:999;right:10px;top:20px}.lxmodal--dialog .closeButton:before,.lxmodal--dialog-large .closeButton:before{cursor:pointer}.lxmodal--dialog .closeButton:hover,.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:hover,.lxmodal--dialog-large .closeButton:focus{color:#526179;background-color:#eaedf1}.lxmodal--dialog .closeButton:focus,.lxmodal--dialog-large .closeButton:focus{outline:0}.lxmodal--dialog .modalContentContainer{padding:16px 16px 0}.lxmodal--dialog.lxmodal--verticalScroll .modalContentContainer{padding:16px;max-height:calc(84vh - 136px)}.lxmodal--dialog-large .modalContentContainer{padding:16px;height:calc(100% - 136px)}.modalContentContainer{flex:1}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Renderer2 }, { type: i5.Observable, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MODAL_CLOSE]
-                }] }, { type: i2.ConfigurableFocusTrapFactory }], propDecorators: { open: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], showBackButton: [{
-                type: Input
-            }], verticalScroll: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], isFocusTrap: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MaxLengthCounterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lxMaxLengthCounter]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.NgControl, decorators: [{
+                    type: Self
+                }] }], propDecorators: { lxMaxLengthCounter: [{
                 type: Input
-            }], canModalBeClosed: [{
+            }], lxMaxLengthCounterRef: [{
                 type: Input
-            }], close: [{
-                type: Output
-            }], back: [{
-                type: Output
-            }], header: [{
-                type: ContentChild,
-                args: [ModalHeaderComponent]
-            }], footer: [{
-                type: ContentChild,
-                args: [ModalFooterComponent]
-            }], cdkPortal: [{
-                type: ViewChild,
-                args: [CdkPortal, { static: true }]
-            }], implicitContent: [{
-                type: ViewChild,
-                args: ['implicitContent', { static: true }]
-            }], explicitContent: [{
-                type: ContentChild,
-                args: [ModalContentDirective, { read: TemplateRef, static: true }]
-            }], onEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
             }] } });
 
+class Sorting {
+    constructor() {
+        this.key = '';
+        this.order = 'asc';
+    }
+}
+
+/**
+ * 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.
+ * It is still possible to manually input a value lower or higher than min and max value.
+ */
+function ValidateDateInForeseeableFuture(control) {
+    // matches yyyy-mm-dd
+    const dateRegex = /^\d{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])$/;
+    if (control.value && dateRegex.test(control.value)) {
+        const today = formatDate(new Date(), 'yyyy-MM-dd', 'en');
+        const maxDate = '2999-12-31';
+        if (control.value < today || control.value > maxDate) {
+            return {
+                dateInForseeableFuture: {
+                    valid: false
+                }
+            };
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+}
+
+function stringIsInArray(array, stringToFind, valueMapFunction) {
+    const valueToFind = valueMapFunction ? valueMapFunction(stringToFind).toLocaleLowerCase() : stringToFind.toLowerCase();
+    return array.map((item) => item.toLocaleLowerCase()).indexOf(valueToFind) > -1;
+}
+/**
+ * Validates that a string is not inside an array of strings
+ */
+function ValidateStringNotInArray(array, valueMapFunction, validatorName = 'stringNotInArray') {
+    return function (control) {
+        if (!control.value) {
+            return null;
+        }
+        if (stringIsInArray(array, control.value, valueMapFunction)) {
+            return {
+                [validatorName]: true
+            };
+        }
+        return null;
+    };
+}
+function ValidateStringNotInArrayAsync(array$, valueMapFunction, validatorName = 'stringNotInArrayAsync') {
+    return function (control) {
+        if (!control.value) {
+            return of(null);
+        }
+        return array$.pipe(map$1((array) => ValidateStringNotInArray(array, valueMapFunction, validatorName)(control)));
+    };
+}
+
 const MODAL_MODULE_EXPORTS = [ModalComponent, ModalHeaderComponent, ModalFooterComponent, ModalContentDirective];
 class LxModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LxModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -10200,5 +11678,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, 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, FilterSelectionPipe, FilterTermPipe, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, ResizeObserverService, ResponsiveInputComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
+export { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AVATAR_COLORS, AVATAR_SIZE_MAPPING, AfterViewInitDirective, AngularNodeViewComponent, AngularNodeViewRenderer, AutocloseDirective, AutocloseGroupService, AutofocusDirective, AvatarComponent, AvatarGroupComponent, BACKSPACE, BadgeComponent, BannerComponent, BaseSelectDirective, BasicDropdownComponent, BasicDropdownItemComponent, BrPipe, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CORE_MODULE_EXPORTS, CURRENCY_SYMBOL_MAP, CardComponent, CdkOptionsDropdownComponent, CdkOptionsSubDropdownComponent, CollapsibleComponent, ContenteditableDirective, ContrastColorPipe, CounterComponent, CurrencyInputComponent, CurrencySymbolComponent, CustomDatePipe, DATEPICKER_CONTROL_VALUE_ACCESSOR, DATE_FN_LOCALE, DATE_FORMATS, DEFAULT_IMAGE_ID, DateFormatter, DateInputComponent, DatePickerComponent, DatepickerConfig, DatepickerUiModule, DragAndDropListComponent, DragAndDropListItemComponent, END, ENTER, ESCAPE, EllipsisComponent, EmptyStateComponent, ErrorMessageComponent, FORMS_MODULE_EXPORTS, FORM_CONTROL_ERROR_DISPLAY_STRATEGY, FORM_CONTROL_ERROR_NAMESPACE, FilterSelectionPipe, FilterTermPipe, FocusEditorDirective, FormErrorComponent, FormErrorDirective, FormSubmitDirective, FormatNumberPipe, GLOBAL_TRANSLATION_OPTIONS, HOME, HighlightRangePipe, HighlightTermDirective, HighlightTermPipe, ICON_MAP, IMAGE_READER, IconComponent, IconScaleComponent, InputComponent, KeyboardActionSourceDirective, KeyboardSelectAction, KeyboardSelectDirective, LOCALE_FN, LX_BUTTON_USE_SAP_ICONS, LX_ELLIPSIS_DEBOUNCE_ON_RESIZE, LxCoreUiModule, LxDragAndDropListModule, LxFormsModule, LxIsUuidPipe, LxLinkifyPipe, LxModalModule, LxPopoverUiModule, LxTabUiModule, LxTimeAgo, LxTranslatePipe, LxUnlinkifyPipe, MODAL_CLOSE, MODAL_MODULE_EXPORTS, MarkInvalidDirective, MarkdownPipe, MaxLengthCounterDirective, ModalCloseClickLocation, ModalComponent, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, MultiSelectComponent, NbspPipe, OptionComponent, OptionGroupComponent, OptionGroupDropdownComponent, OptionsDropdownComponent, OptionsSubDropdownComponent, PickerComponent, PickerOptionComponent, PickerTriggerDirective, PillItemComponent, PillListComponent, PopoverClickDirective, PopoverComponent, PopoverContentDirective, PopoverHoverDirective, RELEVANCE_SORTING_KEY, RemoveMarkdownPipe, ResizeObserverService, ResponsiveInputComponent, RichTextEditorComponent, SPACE, SelectDropdownDirective, SelectableItemDirective, SelectedOptionDirective, SingleSelectComponent, SkeletonComponent, SortPipe, Sorting, SortingDropdownComponent, SortingDropdownTriggerComponent, SpinnerComponent, StepperComponent, SwitchComponent, TAB, TabComponent, TabGroupComponent, TableComponent, TableHeaderComponent, TinySpinnerComponent, TipTapEditorDirective, TokenComponent, TokenizerComponent, TokenizerOverflowPopoverComponent, TooltipComponent, TooltipDirective, TrackingDirective, TranslationAfterPipe, TranslationBeforePipe, TranslationBetweenPipe, TruncateDirective, UnescapeCurlyBracesPipe, ValidateDateInForeseeableFuture, ValidateStringNotInArray, ValidateStringNotInArrayAsync, getContrastColor, getInitialsUrl, getKeyboardNavigationEvents, getTranslationParts, highlightText, isValidHexColor, isValidX, isValidY, markdownToText, provideFormControlErrorDisplayStrategy, provideFormControlErrorNamespace, shorthandHexHandle, stopKeyboardEventPropagation };
 //# sourceMappingURL=leanix-components.mjs.map