@talrace/ngx-noder 19.0.38 → 19.0.39

package/fesm2022/talrace-ngx-noder.mjs

@@ -1450,6 +1450,8 @@ class BaseCommentComponent {
     constructor(elementRef, editorService) {
         this.elementRef = elementRef;
         this.editorService = editorService;
+        this.editing = false;
+        this.isNew = false;
         this.resizeObserver = new ResizeObserver(entries => {
             const height = entries[0].borderBoxSize[0].blockSize;
             if (!height || this.height === height) {
@@ -1693,11 +1695,20 @@ class ApplyParagraphsModel {
     }
 }
 
+class ParagraphStyleExtModel extends ParagraphStyleModel {
+    constructor(fields) {
+        super(fields);
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ApplyParagraphStyleModel {
     constructor(fields) {
         if (fields) {
             if (fields.paragraphStyle) {
-                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
+                fields.paragraphStyle = new ParagraphStyleExtModel(fields.paragraphStyle);
             }
             Object.assign(this, fields);
         }
@@ -2199,9 +2210,9 @@ class InputHandler extends BaseHandler {
         this.actionsWithScroll['Ctrl-Alt-Backspace'] = () => editor.removeWordLeft();
         this.actionsWithScroll['Ctrl-Delete'] = () => editor.removeWordRight();
         this.actionsWithScroll['Ctrl-Alt-Delete'] = () => editor.removeWordRight();
-        this.actionsWithScroll['Ctrl-KeyL'] = () => editor.applyParagraphStyles(new ParagraphStyleModel({ alignment: Alignment$1.left }));
-        this.actionsWithScroll['Ctrl-KeyE'] = () => editor.applyParagraphStyles(new ParagraphStyleModel({ alignment: Alignment$1.center }));
-        this.actionsWithScroll['Ctrl-KeyR'] = () => editor.applyParagraphStyles(new ParagraphStyleModel({ alignment: Alignment$1.right }));
+        this.actionsWithScroll['Ctrl-KeyL'] = () => editor.applyParagraphStyles(new ParagraphStyleExtModel({ alignment: Alignment$1.left }));
+        this.actionsWithScroll['Ctrl-KeyE'] = () => editor.applyParagraphStyles(new ParagraphStyleExtModel({ alignment: Alignment$1.center }));
+        this.actionsWithScroll['Ctrl-KeyR'] = () => editor.applyParagraphStyles(new ParagraphStyleExtModel({ alignment: Alignment$1.right }));
         this.actionsWithScroll['Ctrl-KeyB'] = () => editor.applyTextStyleBold();
         this.actionsWithScroll['Ctrl-KeyI'] = () => editor.applyTextStyleItalic();
         this.actionsWithScroll['Ctrl-KeyU'] = () => editor.applyTextStyleUnderline();
@@ -4742,10 +4753,10 @@ class ParagraphOperationsHelper {
         target.alignment = value.alignment ?? target.alignment;
         target.backgroundColor = value.backgroundColor ?? target.backgroundColor;
         target.headingStyleId = value.headingStyleId ?? target.headingStyleId;
-        target.indentFirstLine = value.indentFirstLine ?? target.indentFirstLine;
-        target.indentHanging = value.indentHanging ?? target.indentHanging;
-        target.indentLeft = value.indentLeft ?? target.indentLeft;
-        target.indentRight = value.indentRight ?? target.indentRight;
+        target.indentFirstLine = value.hasIndentFirstLine ? value.indentFirstLine : target.indentFirstLine;
+        target.indentHanging = value.hasIndentHanging ? value.indentHanging : target.indentHanging;
+        target.indentLeft = value.hasIndentLeft ? value.indentLeft : target.indentLeft;
+        target.indentRight = value.hasIndentRight ? value.indentRight : target.indentRight;
         target.lineSpacing = value.lineSpacing ?? target.lineSpacing;
         target.numberingId = value.numberingId ?? target.numberingId;
         target.numberingLevel = value.numberingLevel ?? target.numberingLevel;
@@ -6022,6 +6033,21 @@ class NumberingParagraphStyleModel extends ParagraphStyleModel {
 }
 
 class NumberingHelper {
+    static { this.romanMap = new Map([
+        [1000, 'm'],
+        [900, 'cm'],
+        [500, 'd'],
+        [400, 'cd'],
+        [100, 'c'],
+        [90, 'xc'],
+        [50, 'l'],
+        [40, 'xl'],
+        [10, 'x'],
+        [9, 'ix'],
+        [5, 'v'],
+        [4, 'iv'],
+        [1, 'i']
+    ]); }
     static addValueToNumberingInfo(numberingId, numberingInfo, numberingLevels) {
         if (numberingInfo[numberingId]) {
             return;
@@ -6092,13 +6118,13 @@ class NumberingHelper {
         }
     }
     static getMarker(levelModels, level, numberingId, numberingInfo) {
-        let levelMarker = levelModels[level].marker;
-        let index = levelMarker.indexOf('%');
+        let levelModel = levelModels[level];
+        let index = levelModel.marker.indexOf('%');
         if (index === -1) {
-            return levelMarker;
+            return levelModel.marker;
         }
-        const splittedMarker = levelMarker.split('.');
-        return this.createMarkerString(numberingInfo, numberingId, splittedMarker);
+        const splittedMarker = levelModel.marker.split('.');
+        return this.createMarkerString(numberingInfo, numberingId, splittedMarker, levelModel.markerType);
     }
     static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
         const paragraph = paragraphs[paragraphIndex];
@@ -6147,13 +6173,7 @@ class NumberingHelper {
         numberingInfo[numberingId][level].markerIndex = markerLevels[lastMarkerLevel];
         numberingInfo[numberingId][level].needToRecalculate = true;
     }
-    static getLevelInfo(input) {
-        return input
-            .split('.')
-            .filter(x => !!x)
-            .map(x => parseInt(x));
-    }
-    static createMarkerString(numberingInfo, numberingId, splittedMarker) {
+    static createMarkerString(numberingInfo, numberingId, splittedMarker, markerType) {
         const markers = splittedMarker.map(x => {
             if (x === '') {
                 return '';
@@ -6161,9 +6181,19 @@ class NumberingHelper {
             if (x.indexOf('%') === -1) {
                 return x;
             }
+            let prefix = '';
+            if (x.startsWith('(')) {
+                x = x.slice(1);
+                prefix = '(';
+            }
+            let suffix = '';
+            if (x.endsWith(')')) {
+                x = x.slice(0, -1);
+                suffix = ')';
+            }
             const markerLevel = parseInt(x.slice(1));
             const markerIndex = numberingInfo[numberingId][markerLevel - 1]?.markerIndex;
-            return `${markerIndex}`;
+            return `${prefix}${this.markerTypeToMarker(markerType, markerIndex)}${suffix}`;
         });
         return markers.join('.');
     }
@@ -6186,198 +6216,191 @@ class NumberingHelper {
         const offset = numberingData.width + numberingData.paddingLeft - info.indentLeft;
         return info.indentFirstLine !== null || (offset > 0 && offset <= info.indent.markerWidth) ? info.indent.markerWidth : 0;
     }
+    static markerTypeToMarker(markerType, sequence) {
+        switch (markerType) {
+            case NumberingMarkerType.Decimal:
+                return `${sequence}`;
+            case NumberingMarkerType.LowerLetter:
+                return this.numberToLetters(sequence);
+            case NumberingMarkerType.UpperLetter:
+                return this.numberToLetters(sequence).toUpperCase();
+            case NumberingMarkerType.LowerRoman:
+                return this.numberToRoman(sequence);
+            case NumberingMarkerType.UpperRoman:
+                return this.numberToRoman(sequence).toUpperCase();
+            default: {
+                return `${sequence}`;
+            }
+        }
+    }
+    static getLevelInfo(input) {
+        return input
+            .split('.')
+            .filter(x => !!x)
+            .map(x => parseInt(x));
+    }
+    static numberToLetters(sequence) {
+        let result = '';
+        while (sequence > 0) {
+            sequence--;
+            const charCode = (sequence % 26) + 97;
+            result = String.fromCharCode(charCode) + result;
+            sequence = Math.floor(sequence / 26);
+        }
+        return result;
+    }
+    static numberToRoman(sequence) {
+        sequence = sequence % 4000; // there are no Roman numerals for values greater than 3999
+        let result = '';
+        for (const [num, roman] of this.romanMap) {
+            while (sequence >= num) {
+                result += roman;
+                sequence -= num;
+            }
+        }
+        return result;
+    }
 }
 
 class PositionHelper {
-    /**
-     * Returns an object containing the `pageX` and `pageY` coordinates of the document position.
-     */
-    static documentToPixel(session, documentPosition) {
-        const screenPosition = this.documentToScreen(session, documentPosition.row, documentPosition.column);
-        return this.screenToPixel(session, screenPosition.row, screenPosition.column);
+    static getLineTopOffset(paragraphLines, paragraphLine) {
+        let result = 0;
+        for (let i = 0; i < paragraphLine; i++) {
+            const info = paragraphLines[i];
+            result += info.height + info.endPageOffset + info.offsetBefore + info.offsetAfter;
+        }
+        return result + paragraphLines[paragraphLine].offsetBefore;
     }
-    /**
-     * Get paragraph info (paragraph index, paragraph line index, line top offset and others) by row index
-     **/
-    static getParagraphInfoByRow(paragraphs, row) {
-        const { paragraphIndex, lineIndex } = this.findLineInParagraphs(paragraphs, row);
-        let lineTopOffset = 0;
-        for (let i = 0; i < lineIndex; i++) {
-            const info = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[i];
-            lineTopOffset += info.height + info.endPageOffset + info.offsetBefore + info.offsetAfter;
-        }
-        const paragraphLineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
-        lineTopOffset += paragraphLineInfo.offsetBefore;
-        return {
-            paragraphIndex,
-            lineIndex,
-            lineTopOffset,
-            lineHeight: paragraphLineInfo.height,
-            lineAscent: paragraphLineInfo.ascent
-        };
+    static documentLineToParagraphLine(paragraphs, documentLine) {
+        let index = 0;
+        let paragraph = 0;
+        while (paragraph < paragraphs.length) {
+            if (index + paragraphs[paragraph].paragraphSettings.textLinesInfo.length > documentLine) {
+                break;
+            }
+            index += paragraphs[paragraph].paragraphSettings.textLinesInfo.length;
+            paragraph++;
+        }
+        const paragraphLine = documentLine - index;
+        return { paragraph, paragraphLine };
     }
-    static documentToScreen(session, paragraph, indexInParagraph) {
+    static paragraphToParagraphLine(nextLineIndexes, indexInParagraph) {
+        if (!nextLineIndexes.length || nextLineIndexes[0] > indexInParagraph) {
+            return { paragraphLine: 0, indexInLine: indexInParagraph };
+        }
+        let index = nextLineIndexes.findLastIndex(x => x <= indexInParagraph);
+        const indexInLine = indexInParagraph - nextLineIndexes[index];
+        return { paragraphLine: index + 1, indexInLine };
+    }
+    static paragraphToDocumentLine(session, paragraph, indexInParagraph) {
         const paragraphLine = session.displayData.paragraphs[paragraph].lineNumber;
-        if (!session.displayData.paragraphs[paragraph].nextLineIndexes.length ||
-            session.displayData.paragraphs[paragraph].nextLineIndexes[0] > indexInParagraph) {
+        const nextLineIndexes = session.displayData.paragraphs[paragraph].nextLineIndexes;
+        if (!nextLineIndexes.length || nextLineIndexes[0] > indexInParagraph) {
             return new CursorParagraph(paragraphLine, indexInParagraph);
         }
         let line = 0;
-        while (session.displayData.paragraphs[paragraph].nextLineIndexes[line] <= indexInParagraph &&
-            line < session.displayData.paragraphs[paragraph].nextLineIndexes.length) {
+        while (nextLineIndexes[line] <= indexInParagraph && line < nextLineIndexes.length) {
             line++;
         }
-        const index = indexInParagraph - session.displayData.paragraphs[paragraph].nextLineIndexes[line - 1];
-        return new CursorParagraph(paragraphLine + line, index);
+        return new CursorParagraph(paragraphLine + line, indexInParagraph - nextLineIndexes[line - 1]);
     }
-    static screenToDocument(session, line, indexInLine) {
-        let paragraph = session.displayData.paragraphs.findIndex(x => x.lineNumber > line);
-        if (paragraph === -1) {
-            paragraph = session.displayData.paragraphs.length - 1;
-        }
-        else if (paragraph > 0) {
-            paragraph = paragraph - 1;
-        }
-        let lineInParagraph = line - session.displayData.paragraphs[paragraph].lineNumber;
-        if (!session.displayData.paragraphs[paragraph].nextLineIndexes.length || lineInParagraph === 0) {
-            return new CursorParagraph(paragraph, indexInLine);
-        }
-        const index = indexInLine + session.displayData.paragraphs[paragraph].nextLineIndexes[lineInParagraph - 1];
-        return new CursorParagraph(paragraph, index);
+    static documentLineToParagraph(session, documentLine, indexInLine) {
+        let paragraphIndex = session.displayData.paragraphs.findIndex(x => x.lineNumber > documentLine);
+        paragraphIndex = paragraphIndex === -1 ? session.displayData.paragraphs.length - 1 : paragraphIndex - 1;
+        const paragraph = session.displayData.paragraphs[paragraphIndex];
+        let paragraphLine = documentLine - paragraph.lineNumber;
+        const indexInParagraph = paragraphLine === 0 ? indexInLine : indexInLine + paragraph.nextLineIndexes[paragraphLine - 1];
+        return new CursorParagraph(paragraphIndex, indexInParagraph);
     }
-    /**
-     * Returns an object containing the `pageX` and `pageY` coordinates of the document position.
-     **/
-    static screenToPixel(session, row, column) {
+    static paragraphToPixel(session, paragraph, indexInParagraph) {
+        const line = this.paragraphToParagraphLine(session.displayData.paragraphs[paragraph].nextLineIndexes, indexInParagraph);
+        return this.paragraphLineToPixel(session, paragraph, line.paragraphLine, line.indexInLine);
+    }
+    static documentLineToPixel(session, documentLine, indexInLine) {
+        const { paragraph, paragraphLine } = this.documentLineToParagraphLine(session.displayData.paragraphs, documentLine);
+        return this.paragraphLineToPixel(session, paragraph, paragraphLine, indexInLine);
+    }
+    static paragraphLineToPixel(session, paragraph, paragraphLine, indexInLine) {
+        const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const paragraphs = session.displayData.paragraphs;
-        const paragraphInfo = this.getParagraphInfoByRow(paragraphs, row);
-        const tokens = session.displayData.getParagraphLineTokens(paragraphInfo.paragraphIndex, paragraphInfo.lineIndex);
-        let tokenIndex = column > 0 ? column - 1 : column;
+        const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
+        let tokenIndex = indexInLine > 0 ? indexInLine - 1 : indexInLine;
         let sizeMax = { ...tokens[tokenIndex] };
-        let lineWidthToPosition = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        for (let currentColumn = 0; currentColumn < tokens.length; currentColumn++) {
-            const currentToken = tokens[currentColumn];
-            if (currentColumn < column) {
+        let lineWidthToPosition = marginLeft;
+        for (let i = 0; i < tokens.length; i++) {
+            const currentToken = tokens[i];
+            if (i < indexInLine) {
                 lineWidthToPosition += currentToken.width;
             }
             if (sizeMax.ascent < currentToken.ascent) {
                 sizeMax = currentToken;
             }
         }
-        if (tokens[tokenIndex]?.isTable) {
-            sizeMax.ascent = paragraphInfo.lineHeight;
-        }
-        const paragraph = paragraphs[paragraphInfo.paragraphIndex];
-        const paragraphTop = paragraph.paragraphSettings.distanceFromTop || 0;
-        const info = paragraph.paragraphSettings.textLinesInfo[paragraphInfo.lineIndex];
-        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraph.paragraphSettings.numberingData, info); // todo: verify (case - 1) numbering paragraph with multi-lines; 2) marker is moved far left so it not affect line offset)
+        const lineTopOffset = this.getLineTopOffset(paragraphs[paragraph].paragraphSettings.textLinesInfo, paragraphLine);
+        const paragraphTop = paragraphs[paragraph].paragraphSettings.distanceFromTop || 0;
+        const info = paragraphs[paragraph].paragraphSettings.textLinesInfo[paragraphLine];
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphs[paragraph].paragraphSettings.numberingData, info);
         return {
             pageX: lineWidthToPosition + info.paddingLeft + info.offsetMargin + markerOffset,
-            pageY: paragraphTop + paragraphInfo.lineTopOffset - session.scrollTop,
+            pageY: paragraphTop + lineTopOffset - session.scrollTop,
             width: tokens[tokenIndex].width,
-            height: paragraphInfo.lineHeight,
-            ascent: paragraphInfo.lineAscent
+            height: info.height,
+            ascent: info.ascent
         };
     }
-    /**
-     * Calculates the paragraph and line index based on the given Y position.
-     **/
-    static getParagraphAndLineIndexFromYPosition(session, yPosition, top) {
-        const { displayData, scrollTop } = session;
-        yPosition += scrollTop - top;
-        let paragraphIndex = displayData.paragraphs.findIndex(paragraph => paragraph.paragraphSettings.distanceFromTop > yPosition);
-        if (paragraphIndex < 0) {
-            paragraphIndex = displayData.paragraphs.length - 1;
-        }
-        else if (paragraphIndex > 0) {
-            paragraphIndex--;
-        }
-        const paragraphSettings = displayData.paragraphs[paragraphIndex].paragraphSettings;
-        yPosition -= paragraphSettings.distanceFromTop;
-        let lineIndex = 0;
-        while (yPosition > 0 && lineIndex < paragraphSettings.textLinesInfo.length - 1) {
-            const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
-            const lineHeight = lineInfo.height + lineInfo.endPageOffset + lineInfo.offsetBefore + lineInfo.offsetAfter;
-            if (yPosition <= lineHeight) {
-                break;
-            }
-            lineIndex++;
-            yPosition -= lineHeight;
+    static pixelToParagraphLine(paragraphs, pageY) {
+        let paragraph = paragraphs.findIndex(x => x.paragraphSettings.distanceFromTop > pageY);
+        if (paragraph < 0) {
+            paragraph = paragraphs.length - 1;
         }
-        return { paragraphIndex, lineIndex };
-    }
-    /**
-     * Maps a pixel position to a screen position using half-token width comparison.
-     */
-    static mapPixelToClosestTokenMidpoint(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
-        const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
-        const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
-        const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
-        const line = lineInfo.screenLine;
-        if (tokens[0].isParagraph) {
-            return { line, indexInLine: 0 };
-        }
-        let indexInLine = 0;
-        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
-        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width / 2) {
-            relativeX -= tokens[indexInLine].width;
-            indexInLine++;
-        }
-        return { line, indexInLine };
-    }
-    /**
-     * Maps a pixel position to a screen position using full-token width comparison.
-     */
-    static mapPixelToNextTokenBoundary(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
-        const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
-        const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
-        const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
-        const line = lineInfo.screenLine;
-        if (tokens[0].isParagraph) {
-            return { line, indexInLine: 0 };
-        }
-        let indexInLine = 0;
-        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphSettings.numberingData, lineInfo);
-        let relativeX = xPixel - leftOffset - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
-        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width) {
-            relativeX -= tokens[indexInLine].width;
-            indexInLine++;
+        else if (paragraph > 0) {
+            paragraph--;
         }
-        return { line, indexInLine };
-    }
-    static findLineInParagraphs(paragraphs, documentLine) {
-        let index = 0;
-        let paragraphIndex = 0;
-        while (paragraphIndex < paragraphs.length) {
-            if (index + paragraphs[paragraphIndex].paragraphSettings.textLinesInfo.length > documentLine) {
+        const paragraphSettings = paragraphs[paragraph].paragraphSettings;
+        pageY -= paragraphSettings.distanceFromTop;
+        let paragraphLine = 0;
+        while (pageY > 0 && paragraphLine < paragraphSettings.textLinesInfo.length - 1) {
+            const lineInfo = paragraphSettings.textLinesInfo[paragraphLine];
+            const lineHeight = lineInfo.height + lineInfo.endPageOffset + lineInfo.offsetBefore + lineInfo.offsetAfter;
+            if (pageY <= lineHeight) {
                 break;
             }
-            index += paragraphs[paragraphIndex].paragraphSettings.textLinesInfo.length;
-            paragraphIndex++;
+            paragraphLine++;
+            pageY -= lineHeight;
         }
-        const lineIndex = documentLine - index;
-        return { paragraphIndex, lineIndex };
+        return { paragraph, paragraphLine };
     }
-    static getApproximatePosition(session, documentLine, positionWidth) {
+    static pixelToParagraph(session, pageX, pageY, tokenDivider) {
+        const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
         const paragraphs = session.displayData.paragraphs;
+        const { paragraph, paragraphLine } = this.pixelToParagraphLine(paragraphs, pageY);
+        const settings = paragraphs[paragraph].paragraphSettings;
+        const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
+        const lineInfo = settings.textLinesInfo[paragraphLine];
+        const indexInLine = this.getIndexInLine(tokens, lineInfo, settings.numberingData, marginLeft, pageX, tokenDivider);
+        const indexInParagraph = paragraphLine === 0 ? indexInLine : indexInLine + paragraphs[paragraph].nextLineIndexes[paragraphLine - 1];
+        return { paragraph, indexInParagraph };
+    }
+    static pixelToIndexInLine(session, documentLine, pageX, tokenDivider) {
         const marginLeft = session.displayData.pagesFormat[0].pageFormatModel.marginLeft; // this value is the same for all page formats.
-        const { paragraphIndex, lineIndex } = PositionHelper.findLineInParagraphs(paragraphs, documentLine);
-        const tokens = session.displayData.getParagraphLineTokens(paragraphIndex, lineIndex);
+        const { paragraph, paragraphLine } = this.documentLineToParagraphLine(session.displayData.paragraphs, documentLine);
+        const settings = session.displayData.paragraphs[paragraph].paragraphSettings;
+        const tokens = session.displayData.getParagraphLineTokens(paragraph, paragraphLine);
+        const lineInfo = settings.textLinesInfo[paragraphLine];
+        return this.getIndexInLine(tokens, lineInfo, settings.numberingData, marginLeft, pageX, tokenDivider);
+    }
+    static getIndexInLine(tokens, lineInfo, numberingData, marginLeft, pageX, tokenDivider) {
         if (tokens[0].isParagraph) {
             return 0;
         }
-        let index = 0;
-        const lineInfo = paragraphs[paragraphIndex].paragraphSettings.textLinesInfo[lineIndex];
-        const markerOffset = NumberingHelper.getOffsetCausedByMarker(paragraphs[paragraphIndex].paragraphSettings.numberingData, lineInfo);
-        let width = positionWidth - lineInfo.paddingLeft - marginLeft - lineInfo.offsetMargin - markerOffset;
-        while (index < tokens.length && width >= tokens[index].width) {
-            width -= tokens[index].width;
-            index++;
+        let indexInLine = 0;
+        const markerOffset = NumberingHelper.getOffsetCausedByMarker(numberingData, lineInfo);
+        let width = pageX - marginLeft - lineInfo.paddingLeft - lineInfo.offsetMargin - markerOffset;
+        while (indexInLine < tokens.length && width >= tokens[indexInLine].width / tokenDivider) {
+            width -= tokens[indexInLine].width;
+            indexInLine++;
         }
-        return index;
+        return indexInLine;
     }
 }
 
@@ -6467,15 +6490,16 @@ class RenderingHelper {
                 if (wordSpacing) {
                     const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
                     const lineStartIndex = start + lineStart;
+                    const renderedInLine = renderedCount - lineStart;
                     const wordSpacingStart = lineInfos[lineIndex].wordSpacingStart;
                     const wordSpacingEnd = lineInfos[lineIndex].wordSpacingEnd;
-                    if (renderedCount - lineStart < wordSpacingStart && lineStartIndex + wordSpacingStart < fragmentEnd) {
+                    if (renderedInLine < wordSpacingStart && lineStartIndex + wordSpacingStart < fragmentEnd) {
                         fragmentEnd = lineStartIndex + wordSpacingStart;
                     }
-                    else if (renderedCount - lineStart < wordSpacingEnd && lineStartIndex + wordSpacingEnd < fragmentEnd) {
+                    else if (renderedInLine < wordSpacingEnd && lineStartIndex + wordSpacingEnd < fragmentEnd) {
                         fragmentEnd = lineStartIndex + wordSpacingEnd;
                     }
-                    if (renderedCount - lineStart < wordSpacingStart || renderedCount - lineStart > wordSpacingEnd) {
+                    if (renderedInLine < wordSpacingStart || renderedInLine > wordSpacingEnd) {
                         wordSpacing = null;
                     }
                 }
@@ -7387,15 +7411,9 @@ class Range {
         const compare = this.compareSingleLine(position);
         return compare ?? this.compareMultiLine(position);
     }
-    /**
-     * Given the current `Range`,
-     * this function converts those starting and ending cursor positions into screen positions, and then returns a new `Range` object.
-     * @param {EditSession} session The `EditSession` to retrieve coordinates from
-     * @returns {Range}
-     **/
-    toScreenRange(session) {
-        const screenPosStart = PositionHelper.documentToScreen(session, this.start.row, this.start.column);
-        const screenPosEnd = PositionHelper.documentToScreen(session, this.end.row, this.end.column);
+    paragraphToDocumentLine(session) {
+        const screenPosStart = PositionHelper.paragraphToDocumentLine(session, this.start.row, this.start.column);
+        const screenPosEnd = PositionHelper.paragraphToDocumentLine(session, this.end.row, this.end.column);
         return new Range(screenPosStart, screenPosEnd);
     }
     /**
@@ -7467,7 +7485,7 @@ class RemoveWithParagraphModel {
     constructor(fields) {
         if (fields) {
             if (fields.paragraphStyle) {
-                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
+                fields.paragraphStyle = new ParagraphStyleExtModel(fields.paragraphStyle);
             }
             Object.assign(this, fields);
         }
@@ -7518,7 +7536,7 @@ class RestoreWithParagraphModel {
     constructor(fields) {
         if (fields) {
             if (fields.paragraphStyle) {
-                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
+                fields.paragraphStyle = new ParagraphStyleExtModel(fields.paragraphStyle);
             }
             if (fields.restore) {
                 fields.restore = new RestoreModel(fields.restore);
@@ -8329,7 +8347,7 @@ class Selection {
         this.placeCursor(position);
     }
     moveCursorUp(session, position) {
-        const line = PositionHelper.documentToScreen(session, position.row, position.column);
+        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
         if (line.row === 0) {
             this.selectLineStart(session);
         }
@@ -8338,7 +8356,7 @@ class Selection {
         }
     }
     moveCursorDown(session, position) {
-        const line = PositionHelper.documentToScreen(session, position.row, position.column);
+        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
         const lastParagraphsIndex = session.displayData.paragraphs.length - 1;
         const lastParagraph = session.displayData.getParagraphSettings(lastParagraphsIndex);
         const lastParagraphLine = lastParagraph.textLinesInfo[lastParagraph.textLinesInfo.length - 1].screenLine;
@@ -8351,10 +8369,10 @@ class Selection {
     }
     moveToLine(session, line, fromLine) {
         if (!this.keepLinePositionX) {
-            this.keepLinePositionX = PositionHelper.screenToPixel(session, fromLine.row, fromLine.column).pageX;
+            this.keepLinePositionX = PositionHelper.documentLineToPixel(session, fromLine.row, fromLine.column).pageX;
         }
-        const column = PositionHelper.getApproximatePosition(session, line, this.keepLinePositionX);
-        this.cursor = PositionHelper.screenToDocument(session, line, column);
+        const indexInLine = PositionHelper.pixelToIndexInLine(session, line, this.keepLinePositionX, 2);
+        this.cursor = PositionHelper.documentLineToParagraph(session, line, indexInLine);
         this.overlayService.close();
     }
     getCursorLeft(session) {
@@ -8373,30 +8391,29 @@ class Selection {
         return ContentHelper.documentIndexToParagraphIndex(session.displayData.paragraphs, index + 1);
     }
     getLineStart(session, position) {
-        const line = PositionHelper.documentToScreen(session, position.row, position.column);
-        return PositionHelper.screenToDocument(session, line.row, 0);
+        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
+        return PositionHelper.documentLineToParagraph(session, line.row, 0);
     }
     getLineEnd(session, position) {
-        const line = PositionHelper.documentToScreen(session, position.row, position.column);
+        const line = PositionHelper.paragraphToDocumentLine(session, position.row, position.column);
         const paragraphLength = session.displayData.getParagraphContent(position.row).length;
         const linesCount = session.displayData.getParagraphSettings(position.row).textLinesInfo.length;
         if (linesCount === 1) {
-            return PositionHelper.screenToDocument(session, line.row, paragraphLength);
+            return PositionHelper.documentLineToParagraph(session, line.row, paragraphLength);
         }
         const paragraphLine = line.row - session.displayData.paragraphs[position.row].lineNumber;
+        const nextLineIndexes = session.displayData.paragraphs[position.row].nextLineIndexes;
         let index;
         if (paragraphLine === 0) {
-            index = session.displayData.paragraphs[position.row].nextLineIndexes[0];
+            index = nextLineIndexes[0];
         }
         else if (paragraphLine === linesCount - 1) {
-            index = paragraphLength - session.displayData.paragraphs[position.row].nextLineIndexes[paragraphLine - 1];
+            index = paragraphLength - nextLineIndexes[paragraphLine - 1];
         }
         else {
-            index =
-                session.displayData.paragraphs[position.row].nextLineIndexes[paragraphLine] -
-                    session.displayData.paragraphs[position.row].nextLineIndexes[paragraphLine - 1];
+            index = nextLineIndexes[paragraphLine] - nextLineIndexes[paragraphLine - 1];
         }
-        return PositionHelper.screenToDocument(session, line.row, index);
+        return PositionHelper.documentLineToParagraph(session, line.row, index);
     }
     getWordRight(session, position) {
         let row = position.row;
@@ -8639,7 +8656,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.onSetCommentsVisibility(!!this.model.comments.length);
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscriptions(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8654,7 +8671,7 @@ class Editor {
     selectPageDown() {
         const config = this.mainRenderer.layerConfig;
         const line = config.visibleRange.endScreenLine;
-        const position = PositionHelper.screenToDocument(this.mainSession, line, 0);
+        const position = PositionHelper.documentLineToParagraph(this.mainSession, line, 0);
         this.selection.moveSelection(position);
         this.mainRenderer.scrollBy(config.height);
         this.scrollCursorIntoMainView(0.5);
@@ -8663,7 +8680,7 @@ class Editor {
     selectPageUp() {
         const config = this.mainRenderer.layerConfig;
         const line = config.visibleRange.startScreenLine;
-        const position = PositionHelper.screenToDocument(this.mainSession, line, 0);
+        const position = PositionHelper.documentLineToParagraph(this.mainSession, line, 0);
         this.selection.moveSelection(position);
         this.mainRenderer.scrollBy(-config.height);
         this.scrollCursorIntoMainView(0.5);
@@ -8672,7 +8689,7 @@ class Editor {
     gotoPageDown() {
         const config = this.mainRenderer.layerConfig;
         const line = config.visibleRange.endScreenLine;
-        const position = PositionHelper.screenToDocument(this.mainSession, line, 0);
+        const position = PositionHelper.documentLineToParagraph(this.mainSession, line, 0);
         this.selection.placeCursor(position);
         this.mainRenderer.scrollBy(config.height);
         this.scrollCursorIntoMainView(0.5);
@@ -8681,7 +8698,7 @@ class Editor {
     gotoPageUp() {
         const config = this.mainRenderer.layerConfig;
         const line = config.visibleRange.startScreenLine;
-        const position = PositionHelper.screenToDocument(this.mainSession, line, 0);
+        const position = PositionHelper.documentLineToParagraph(this.mainSession, line, 0);
         this.selection.placeCursor(position);
         this.mainRenderer.scrollBy(-config.height);
         this.scrollCursorIntoMainView(0.5);
@@ -8692,7 +8709,8 @@ class Editor {
         if (!component) {
             return;
         }
-        const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+        const paragraphPos = this.session.selection.cursor;
+        const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
         const rect = this.renderer.container.getBoundingClientRect();
         const x = rect.left + cursor.pageX;
         const y = rect.top + cursor.pageY + cursor.height;
@@ -8784,11 +8802,14 @@ class Editor {
         }
         if (this.selection.range.start.column === 0) {
             const paragraph = this.session.displayData.paragraphs[this.selection.range.start.row];
-            if (paragraph.paragraphSettings.numberingData.numberingId && paragraph.paragraphSettings.numberingData.level <= 6) {
-                this.applyParagraphStyles(new ParagraphStyleModel({
+            if (paragraph.paragraphSettings.numberingData.numberingId && paragraph.paragraphSettings.numberingData.level <= 7) {
+                this.applyParagraphStyles(new ParagraphStyleExtModel({
                     numberingLevel: paragraph.paragraphSettings.numberingData.level + 1,
+                    hasIndentLeft: true,
                     indentLeft: null,
+                    hasIndentFirstLine: true,
                     indentFirstLine: null,
+                    hasIndentHanging: true,
                     indentHanging: null
                 }));
                 return;
@@ -8813,10 +8834,13 @@ class Editor {
                 if (paragraph.paragraphSettings.numberingData.level === 0) {
                     return;
                 }
-                this.applyParagraphStyles(new ParagraphStyleModel({
+                this.applyParagraphStyles(new ParagraphStyleExtModel({
                     numberingLevel: paragraph.paragraphSettings.numberingData.level - 1,
+                    hasIndentLeft: true,
                     indentLeft: null,
+                    hasIndentFirstLine: true,
                     indentFirstLine: null,
+                    hasIndentHanging: true,
                     indentHanging: null
                 }));
                 return;
@@ -9135,7 +9159,7 @@ class Editor {
             command = SaveCommandsHelper.getApplyTextStyleCommand(startIndex, endIndex, textStyle, this.targets);
         }
         else if (operation instanceof ApplyParagraphStyleModel) {
-            const copy = new ParagraphStyleModel(operation.paragraphStyle);
+            const copy = new ParagraphStyleExtModel(operation.paragraphStyle);
             this.session.applyParagraphStyle(operation.startIndex, operation.endIndex, copy);
             const { startIndex, endIndex, paragraphStyle } = operation;
             command = SaveCommandsHelper.getApplyParagraphStyleCommand(startIndex, endIndex, paragraphStyle, this.targets);
@@ -9505,11 +9529,23 @@ class Editor {
         const operation = new RemoveWithParagraphModel({
             startIndex: restoreModel.insertIndex,
             count: restoreModel.text.length,
-            paragraphStyle: new ParagraphStyleModel({ ...firstParagraph.paragraphStyle })
+            paragraphStyle: new ParagraphStyleExtModel({
+                ...firstParagraph.paragraphStyle,
+                hasIndentFirstLine: true,
+                hasIndentHanging: true,
+                hasIndentLeft: true,
+                hasIndentRight: true
+            })
         });
         const reversed = new RestoreWithParagraphModel({
             restore: restoreModel,
-            paragraphStyle: new ParagraphStyleModel({ ...lastParagraph.paragraphStyle })
+            paragraphStyle: new ParagraphStyleExtModel({
+                ...lastParagraph.paragraphStyle,
+                hasIndentFirstLine: true,
+                hasIndentHanging: true,
+                hasIndentLeft: true,
+                hasIndentRight: true
+            })
         });
         this.saveRemoveWithParagraphToHistory(operation, reversed);
         this.removeExternalData();
@@ -9530,7 +9566,15 @@ class Editor {
     }
     removeOrLowerNestingNumbering(paragraph) {
         if (paragraph.paragraphSettings.numberingData.level > 0) {
-            this.applyParagraphStyles(new ParagraphStyleModel({ numberingLevel: paragraph.paragraphSettings.numberingData.level - 1 }));
+            this.applyParagraphStyles(new ParagraphStyleExtModel({
+                numberingLevel: paragraph.paragraphSettings.numberingData.level - 1,
+                hasIndentFirstLine: true,
+                indentFirstLine: null,
+                hasIndentHanging: true,
+                indentHanging: null,
+                hasIndentLeft: true,
+                indentLeft: null
+            }));
         }
         else {
             this.removeNumberingsFromParagraphs();
@@ -9592,9 +9636,9 @@ class Editor {
         this.saveAttachCommentToHistory(commentModel);
     }
     onCommentRemoved(id) {
-        const { session, target } = this.regulatorService.getCommentTarget(id);
+        const session = this.regulatorService.getCommentSessionModel(id);
         const comment = session.session.removeComment(id);
-        this.saveRemoveCommentToHistory(comment, target);
+        this.saveRemoveCommentToHistory(comment, session.source.getTarget());
         this.editorService.removeCommentData([id]);
         session.renderer.loop.schedule({ comments: true });
     }
@@ -9656,7 +9700,7 @@ class Editor {
         }
     }
     onLeftClick(event) {
-        const position = this.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY);
         if (!this.selection.isEmpty && this.session.isPositionInRange(position, this.selection.selectedRange)) {
             this.onSelectionLeftClick(event);
         }
@@ -9683,7 +9727,7 @@ class Editor {
             this.focusCustomComponent(customElement);
             return;
         }
-        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY, 2);
         if (event.shiftKey) {
             this.selection.moveSelection(position);
         }
@@ -9695,7 +9739,8 @@ class Editor {
         const paragraph = this.session.displayData.paragraphs[position.row];
         const error = this.grammarChecker.getError(this.session.sessionId, paragraph.id, position.column);
         if (!this.editorService.isViewOnly && error) {
-            const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+            const paragraphPos = this.session.selection.cursor;
+            const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const rect = this.renderer.container.getBoundingClientRect();
             const hintLeft = rect.left + cursor.pageX;
             const hintTop = rect.top + cursor.pageY - POPUP_HEIGHT;
@@ -9736,7 +9781,7 @@ class Editor {
             return;
         }
         event.preventDefault();
-        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY, 2);
         if (!isEdgeEdit && this.mainSession.customComponents.edges.isEdit) {
             this.selection.placeCursor(position);
         }
@@ -9754,7 +9799,7 @@ class Editor {
             return;
         }
         event.preventDefault();
-        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY, 2);
         const start = new CursorParagraph(position.row, 0);
         const end = new CursorParagraph(position.row, this.session.displayData.getParagraphContent(position.row).length);
         this.selection.placeSelection(start, end);
@@ -9813,7 +9858,7 @@ class Editor {
         else {
             this.regulatorService.setMainSessionAsCurrent();
         }
-        const cursorPosition = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        const cursorPosition = this.renderer.screenToParagraph(event.clientX, event.clientY, 2);
         if (cursorPosition.row === this.selection.cursor.row && cursorPosition.column === this.selection.cursor.column) {
             return;
         }
@@ -9858,13 +9903,13 @@ class Editor {
         const isInsideEdge = this.isInsideEdge(event.target);
         const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
         if (!isInsideEdge || isEdgeEdit) {
-            const position = this.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+            const position = this.renderer.screenToParagraph(event.clientX, event.clientY);
             return this.session.getLinkModel(position);
         }
         const customElement = this.getCustomElement(event.target);
         const sessionId = +customElement.attributes.getNamedItem('data-session-id').value;
         const session = this.regulatorService.getSessionModel(sessionId);
-        const position = session.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY, customElement.getBoundingClientRect());
+        const position = session.renderer.screenToParagraph(event.clientX, event.clientY, 1, customElement.getBoundingClientRect());
         return session.session.getLinkModel(position);
     }
     setCurrentSession(element) {
@@ -9953,7 +9998,8 @@ class Editor {
         this.rerenderMarker();
         this.updateSelectedComment();
         if (!this.selection.isEmpty && this.commentsVisible) {
-            const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+            const paragraphPos = this.session.selection.cursor;
+            const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const mainRect = this.mainRenderer.container.getBoundingClientRect();
             const rect = this.renderer.container.getBoundingClientRect();
             const hintX = mainRect.right - 20;
@@ -10062,7 +10108,7 @@ class Editor {
         this.onContentChange();
     }
     onMousePressedMove(event) {
-        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        const position = this.renderer.screenToParagraph(event.clientX, event.clientY, 2);
         const cursor = this.selection.cursor;
         this.selection.moveSelection(position);
         if (cursor.column !== this.selection.cursor.column || cursor.row !== this.selection.cursor.row) {
@@ -10364,13 +10410,13 @@ class Editor {
         return this.editorService.updateTableBorders$.subscribe(x => this.applyTableCellsStyles(x, (data, table, selection) => TableOperationsHelper.getApplyTableCellsBorders(data, table, selection)));
     }
     selectSpacingSubscription() {
-        return this.editorService.selectSpacing$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ lineSpacing: x })));
+        return this.editorService.selectSpacing$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleExtModel({ lineSpacing: x })));
     }
     selectBeforeSubscription() {
-        return this.editorService.selectBefore$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ spaceBefore: x })));
+        return this.editorService.selectBefore$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleExtModel({ spaceBefore: x })));
     }
     selectAfterSubscription() {
-        return this.editorService.selectAfter$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleModel({ spaceAfter: x })));
+        return this.editorService.selectAfter$.subscribe(x => this.applyParagraphStyles(new ParagraphStyleExtModel({ spaceAfter: x })));
     }
     insertTextSubscription() {
         return this.editorService.insertText$.subscribe(x => {
@@ -10498,10 +10544,11 @@ class Editor {
         return this.editorService.setCommentSelected$.subscribe(x => {
             for (const session of this.regulatorService.sessions) {
                 session.renderer.setSelectedComment(x);
+                session.renderer.loop.schedule({ comments: true });
             }
         });
     }
-    removeCommentSubscription() {
+    removeCommentSubscriptions() {
         return this.editorService.removeComment$.subscribe(x => this.onCommentRemoved(x));
     }
     setComentsVisibilitySubscription() {
@@ -10562,7 +10609,8 @@ class Editor {
         if (this.selection.range.isEmpty || !this.commentsVisible) {
             return;
         }
-        const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+        const paragraphPos = this.session.selection.cursor;
+        const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
         const mainRect = this.mainRenderer.container.getBoundingClientRect();
         const rect = this.renderer.container.getBoundingClientRect();
         const hintX = mainRect.right - 20;
@@ -11328,7 +11376,7 @@ class TableSelection {
                 !this.canStartSelection(event.target)) {
                 return;
             }
-            const position = this.regulatorService.currentSession.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+            const position = this.regulatorService.currentSession.renderer.screenToParagraph(event.clientX, event.clientY);
             if (!this.session.selection.isEmpty && this.session.isPositionInRange(position, this.session.selection.selectedRange)) {
                 return;
             }
@@ -12842,20 +12890,20 @@ class DisplayData extends EventEmitting {
         const { tokens, paragraphToken } = this.getTokens(paragraphInfo.startIndex, paragraphInfo.content, paragraphSymbolIndex);
         return { paragraphTokens: tokens, paragraphToken };
     }
-    getParagraphLineTokens(paragraphIndex, lineIndex) {
+    getParagraphLineTokens(paragraphIndex, paragraphLine) {
         const paragraph = this.paragraphs[paragraphIndex];
-        const lineStart = lineIndex > 0 ? paragraph.nextLineIndexes[lineIndex - 1] : 0;
-        const lineEnd = paragraph.nextLineIndexes[lineIndex] ? paragraph.nextLineIndexes[lineIndex] : paragraph.content.length;
+        const lineStart = paragraphLine > 0 ? paragraph.nextLineIndexes[paragraphLine - 1] : 0;
+        const lineEnd = paragraph.nextLineIndexes[paragraphLine] ? paragraph.nextLineIndexes[paragraphLine] : paragraph.content.length;
         const lineContent = paragraph.content.substring(lineStart, lineEnd);
         const paragraphSymbolIndex = paragraph.paragraphSettings.startInsertIndex + paragraph.content.length;
         const { tokens } = this.getTokens(lineStart + paragraph.startIndex, lineContent, paragraphSymbolIndex);
         const pageFormat = this.getPageFormatAtPosition(this.paragraphs[paragraphIndex].startIndex);
         const paragraphStyle = this.model.paragraphs[paragraphIndex].paragraphStyle;
-        const lineInfo = paragraph.paragraphSettings.textLinesInfo[lineIndex];
+        const lineInfo = paragraph.paragraphSettings.textLinesInfo[paragraphLine];
         const maxWidth = pageFormat.contentWidth - lineInfo.indent.right - lineInfo.indent.markerWidth;
         const startWidth = lineInfo.indentLeft + lineInfo.indentFirstLine - lineInfo.indent.hanging || 0;
         this.computeWrapIndex(tokens, startWidth, maxWidth, paragraphStyle.tabSettings ?? []); // needed to proceed a tab width correction according to the tabs complex positioning
-        const isLast = lineIndex === paragraph.nextLineIndexes.length;
+        const isLast = paragraphLine === paragraph.nextLineIndexes.length;
         LineInfoHelper.get(tokens, false, isLast, paragraphStyle, lineInfo.indent, lineInfo.isNumbering, pageFormat.contentWidth, 0, 0); // needed to proceed a space width correction according to the wordSpacing in case of justify alignment
         return tokens;
     }
@@ -13860,12 +13908,6 @@ class EditSession {
     destroy() {
         this.displayData.destroy();
     }
-    getRowLength(row) {
-        if (!this.displayData.paragraphs[row].nextLineIndexes) {
-            return 1;
-        }
-        return this.displayData.paragraphs[row].nextLineIndexes.length + 1;
-    }
     getRowCacheIndex(cacheArray, value) {
         let start = 0;
         let end = cacheArray.length - 1;
@@ -14644,12 +14686,16 @@ class HighlightLayer {
         selectionElement.className = cssClass;
         return selectionElement;
     }
-    getTop(row) {
-        const paragraphs = this.session.displayData.paragraphs;
-        const paragraphInfo = PositionHelper.getParagraphInfoByRow(paragraphs, row);
-        return (paragraphs[paragraphInfo.paragraphIndex].paragraphSettings.distanceFromTop +
-            paragraphInfo.lineTopOffset -
-            this.session.scrollTop);
+    getTopByDocumentLine(documentLine) {
+        const { paragraph, paragraphLine } = PositionHelper.documentLineToParagraphLine(this.session.displayData.paragraphs, documentLine);
+        const settings = this.session.displayData.paragraphs[paragraph].paragraphSettings;
+        const lineTopOffset = PositionHelper.getLineTopOffset(settings.textLinesInfo, paragraphLine);
+        return settings.distanceFromTop + lineTopOffset - this.session.scrollTop;
+    }
+    getTopByParagraphLine(paragraph, paragraphLine) {
+        const settings = this.session.displayData.paragraphs[paragraph].paragraphSettings;
+        const lineTopOffset = PositionHelper.getLineTopOffset(settings.textLinesInfo, paragraphLine);
+        return settings.distanceFromTop + lineTopOffset - this.session.scrollTop;
     }
     // Draws a multi line marker, where lines span the full width
     drawMultiLineMarker(range, cssClass) {
@@ -14660,13 +14706,10 @@ class HighlightLayer {
         const visibleParagraphs = paragraphs.filter(x => x.paragraphSettings.lastScreenLine >= start && x.paragraphSettings.firstScreenLine <= end);
         const textLinesInfo = visibleParagraphs
             .map(x => x.paragraphSettings.textLinesInfo
-            .filter(l => start <= l.screenLine && l.screenLine <= end)
+            .filter(y => start <= y.screenLine && y.screenLine <= end)
             .map(y => ({ textLinesInfo: y, paragraphSettings: x.paragraphSettings })))
             .flat();
-        const paragraphInfo = PositionHelper.getParagraphInfoByRow(paragraphs, start);
-        let top = paragraphs[paragraphInfo.paragraphIndex].paragraphSettings.distanceFromTop +
-            paragraphInfo.lineTopOffset -
-            this.session.scrollTop;
+        let top = this.getTopByDocumentLine(start);
         const padding = this.session.displayData.pagesFormat[this.session.displayData.pagesFormat.length - 1].pageFormatModel.marginLeft;
         const results = [];
         for (let i = 0; i < textLinesInfo.length; i++) {
@@ -14679,13 +14722,13 @@ class HighlightLayer {
             const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerOffset;
             let style;
             if (i === 0) {
-                const rangeInfo = this.getRangeInfo(this.session, range);
+                const rangeInfo = this.getRangeInfo(range);
                 const width = lineInfo.width - rangeInfo.leftPos + left;
                 style = this.getMarkerStyle(lineInfo.height, width, top, rangeInfo.leftPos);
             }
             else if (i === textLinesInfo.length - 1) {
                 const lastRowRange = new Range(new CursorParagraph(range.end.row, 0), range.end);
-                const rangeInfo = this.getRangeInfo(this.session, lastRowRange);
+                const rangeInfo = this.getRangeInfo(lastRowRange);
                 style = this.getMarkerStyle(lineInfo.height, rangeInfo.screenWidth, top, left);
             }
             else {
@@ -14700,32 +14743,34 @@ class HighlightLayer {
     }
     // Draws a marker which covers part or whole width of a single screen line
     drawSingleLineMarker(range, cssClass) {
-        const rangeInfo = this.getRangeInfo(this.session, range);
-        const paragraphInfo = PositionHelper.getParagraphInfoByRow(this.session.displayData.paragraphs, range.start.row);
-        const height = rangeInfo.screenHeight || paragraphInfo.lineHeight;
-        const width = rangeInfo.screenWidth;
-        const top = this.getTop(range.start.row);
-        const left = rangeInfo.leftPos;
-        return this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
+        const rangeInfo = this.getRangeInfo(range);
+        const paragraphs = this.session.displayData.paragraphs;
+        const { paragraph, paragraphLine } = PositionHelper.documentLineToParagraphLine(paragraphs, range.start.row);
+        const lineHeight = paragraphs[paragraph].paragraphSettings.textLinesInfo[paragraphLine].height;
+        const height = rangeInfo.screenHeight || lineHeight;
+        const top = this.getTopByParagraphLine(paragraph, paragraphLine);
+        const markerStyle = this.getMarkerStyle(height, rangeInfo.screenWidth, top, rangeInfo.leftPos);
+        return this.renderHighlight(markerStyle, cssClass);
     }
     drawCustomElementHighlight(elementInfo, cssClass, screenParentRange) {
-        const lineIndex = elementInfo.parentRange.start.row;
-        const paragraph = this.session.displayData.paragraphs[lineIndex];
-        const lineInfo = paragraph.paragraphSettings.textLinesInfo.find(x => x.screenLine === lineIndex);
-        const elementIndex = paragraph.startIndex + elementInfo.parentRange.start.column;
+        const paragraphPos = elementInfo.parentRange.start;
+        const documentLine = PositionHelper.paragraphToDocumentLine(this.session, paragraphPos.row, paragraphPos.column);
+        const paragraph = this.session.displayData.paragraphs[paragraphPos.row];
+        const lineInfo = paragraph.paragraphSettings.textLinesInfo.find(x => x.screenLine === documentLine.column);
+        const elementIndex = paragraph.startIndex + paragraphPos.column;
         const element = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === elementIndex);
         if (!element) {
             return;
         }
-        const top = this.getTop(screenParentRange.start.row);
-        const info = this.getRangeInfo(this.session, screenParentRange);
-        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.ascent - elementInfo.location.height + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
+        const top = this.getTopByDocumentLine(screenParentRange.start.row);
+        const startPos = PositionHelper.documentLineToPixel(this.session, screenParentRange.start.row, screenParentRange.start.column);
+        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + lineInfo.ascent - elementInfo.location.height + elementInfo.location.top, startPos.pageX + elementInfo.location.left), cssClass);
     }
-    getRangeInfo(session, range) {
-        const start = range.start;
-        const end = range.end;
-        const startPos = PositionHelper.screenToPixel(session, start.row, start.column);
-        const endPos = PositionHelper.screenToPixel(session, end.row, end.column);
+    getRangeInfo(range) {
+        const startLine = range.start;
+        const endLine = range.end;
+        const startPos = PositionHelper.documentLineToPixel(this.session, startLine.row, startLine.column);
+        const endPos = PositionHelper.documentLineToPixel(this.session, endLine.row, endLine.column);
         return {
             screenWidth: Math.abs(endPos.pageX - startPos.pageX),
             screenHeight: Math.abs(endPos.pageY - startPos.pageY),
@@ -14759,7 +14804,7 @@ class CommentHighlightLayer extends HighlightLayer {
             const startPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.startIndex);
             const endPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.endIndex + 1);
             const range = new Range(startPosition, endPosition);
-            const screenRange = range.toScreenRange(this.session);
+            const screenRange = range.paragraphToDocumentLine(this.session);
             if (config.visibleRange &&
                 (screenRange.end.row < config.visibleRange.startScreenLine || screenRange.start.row > config.visibleRange.endScreenLine)) {
                 this.commentService.removeCommentFromRender(this.session.sessionId, comment.commentId);
@@ -14841,7 +14886,7 @@ class CursorLayer {
         if (!position) {
             position = this.session.selection.cursor;
         }
-        return PositionHelper.documentToPixel(this.session, position);
+        return PositionHelper.paragraphToPixel(this.session, position.row, position.column);
     }
     addTextStylesToCursor() {
         const textStyle = this.session.editorService.styles;
@@ -14909,7 +14954,7 @@ class GrammarHighlightLayer extends HighlightLayer {
                 continue;
             }
             for (const error of grammarErrors) {
-                const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).toScreenRange(this.session);
+                const range = new Range(new CursorParagraph(index, error.offset), new CursorParagraph(index, error.offset + error.length)).paragraphToDocumentLine(this.session);
                 if (config.visibleRange &&
                     (range.end.row < config.visibleRange.startScreenLine || range.start.row > config.visibleRange.endScreenLine)) {
                     continue;
@@ -15039,7 +15084,7 @@ class SearchHighlightLayer extends HighlightLayer {
         this.getVisibleCustomElementResults(config);
         if (this.active) {
             if (this.active instanceof Range) {
-                const screenRange = this.active.toScreenRange(this.session);
+                const screenRange = this.active.paragraphToDocumentLine(this.session);
                 if (!screenRange.isEmpty &&
                     (!config.visibleRange ||
                         (screenRange.start.row >= config.visibleRange.startScreenLine &&
@@ -15054,13 +15099,13 @@ class SearchHighlightLayer extends HighlightLayer {
             }
             else {
                 this.updateActiveResult();
-                const screenParentRange = this.active.parentRange.toScreenRange(this.session);
+                const screenParentRange = this.active.parentRange.paragraphToDocumentLine(this.session);
                 this.drawCustomElementHighlight(this.active, this.selectedClassName, screenParentRange);
             }
         }
         if (this.markers?.length) {
             const ranges = this.markers
-                .map(x => x.toScreenRange(this.session))
+                .map(x => x.paragraphToDocumentLine(this.session))
                 .filter(x => !x.isEmpty &&
                 (!config.visibleRange ||
                     (x.start.row >= config.visibleRange.startScreenLine && x.end.row <= config.visibleRange.endScreenLine)) &&
@@ -15085,7 +15130,7 @@ class SearchHighlightLayer extends HighlightLayer {
                         this.active.location.isEqual(element.location))) {
                     continue;
                 }
-                const screenParentRange = element.parentRange.toScreenRange(this.session);
+                const screenParentRange = element.parentRange.paragraphToDocumentLine(this.session);
                 if (!config.visibleRange ||
                     (screenParentRange.start.row >= config.visibleRange.startScreenLine &&
                         screenParentRange.end.row <= config.visibleRange.endScreenLine)) {
@@ -15123,7 +15168,7 @@ class SearchHighlightLayer extends HighlightLayer {
             return;
         }
         for (const group of groupedByParentRange) {
-            const screenParentRange = group.range.toScreenRange(this.session);
+            const screenParentRange = group.range.paragraphToDocumentLine(this.session);
             if (config.visibleRange &&
                 (screenParentRange.start.row < config.visibleRange.startScreenLine ||
                     screenParentRange.end.row > config.visibleRange.endScreenLine)) {
@@ -15167,7 +15212,7 @@ class SelectionLayer extends HighlightLayer {
         if (this.marker) {
             let range = this.marker.clipRows(config.contentRange.start, config.contentRange.end);
             if (!range.isEmpty) {
-                range = range.toScreenRange(this.session);
+                range = range.paragraphToDocumentLine(this.session);
                 if (range.isSingleLine) {
                     this.drawSingleLineMarker(range, this.className);
                 }
@@ -15393,23 +15438,13 @@ class Renderer extends EventEmitting {
     updateCursor() {
         this.loop.schedule({ cursor: true });
     }
-    /**
-     * Converts screen coordinates to text coordinates by mapping to the closest token midpoint.
-     */
-    screenToTextCoordinatesUsingMidpoint(x, y, rect) {
-        const { left, top } = rect ?? this.container.getBoundingClientRect();
-        const { paragraphIndex, lineIndex } = PositionHelper.getParagraphAndLineIndexFromYPosition(this.session, y, top);
-        const { line, indexInLine } = PositionHelper.mapPixelToClosestTokenMidpoint(this.session, x, paragraphIndex, lineIndex, left);
-        return PositionHelper.screenToDocument(this.session, line, indexInLine);
-    }
-    /**
-     * Converts screen coordinates to text coordinates by mapping to the next token boundary.
-     */
-    screenToTextCoordinatesUsingBoundary(x, y, rect) {
+    // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
+    screenToParagraph(x, y, tokenDivider = 1, rect) {
         const { left, top } = rect ?? this.container.getBoundingClientRect();
-        const { paragraphIndex, lineIndex } = PositionHelper.getParagraphAndLineIndexFromYPosition(this.session, y, top);
-        const { line, indexInLine } = PositionHelper.mapPixelToNextTokenBoundary(this.session, x, paragraphIndex, lineIndex, left);
-        return PositionHelper.screenToDocument(this.session, line, indexInLine);
+        const pageX = x - left;
+        const pageY = y + this.session.scrollTop - top;
+        const { paragraph, indexInParagraph } = PositionHelper.pixelToParagraph(this.session, pageX, pageY, tokenDivider);
+        return new CursorParagraph(paragraph, indexInParagraph);
     }
     showCursor() {
         this.cursorLayer.showCursor();
@@ -15459,7 +15494,6 @@ class Renderer extends EventEmitting {
     }
     setSelectedComment(comment) {
         this.commentsLayer.setSelectedComment(comment);
-        this.commentsLayer.update(this.layerConfig);
     }
     setCommentsVisibility(value) {
         this.commentsLayer.enabled = value;
@@ -15968,11 +16002,9 @@ class VirtualRenderer {
         this.commentLayer.scrollComments(deltaY);
         this.loop.schedule({ scroll: true });
     }
-    screenToTextCoordinatesUsingMidpoint(x, y, rect) {
-        return this.renderer.screenToTextCoordinatesUsingMidpoint(x, y, rect);
-    }
-    screenToTextCoordinatesUsingBoundary(x, y, rect) {
-        return this.renderer.screenToTextCoordinatesUsingBoundary(x, y, rect);
+    // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
+    screenToParagraph(x, y, tokenDivider = 1, rect) {
+        return this.renderer.screenToParagraph(x, y, tokenDivider, rect);
     }
     showCursor() {
         this.renderer.showCursor();
@@ -16428,10 +16460,10 @@ class RegulatorService {
         }
         return result;
     }
-    getCommentTarget(commentId) {
+    getCommentSessionModel(commentId) {
         for (const session of this.sessions) {
             if (session.session.model.comments.some(x => x.commentId === commentId)) {
-                return { session, target: session.source.getTarget() };
+                return session;
             }
         }
         return null;
@@ -18184,11 +18216,11 @@ class NumberingComponent {
         this.selectNumberingTemplate.emit(numberingTemplateType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NumberingComponent, isStandalone: false, selector: "app-nod-numbering", inputs: { isDisabled: "isDisabled", selectedNumberingType: "selectedNumberingType", selectedNumberingTemplate: "selectedNumberingTemplate" }, outputs: { selectNumberingTemplate: "selectNumberingTemplate", removeNumberings: "removeNumberings" }, ngImport: i0, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumberingComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-numbering', standalone: false, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        style=\"display: none\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-numbering', standalone: false, template: "<mat-button-toggle-group\n    name=\"format\"\n    [hideMultipleSelectionIndicator]=\"true\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"isDisabled\">\n    <mat-button-toggle\n        (click)=\"onToggleBulletedNumbering()\"\n        [value]=\"numberingType.Bullet\"\n        [checked]=\"selectedNumberingType === numberingType.Bullet\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-bulleted\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listBulletedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\"\n        [matTooltip]=\"'NODER.TOOLTIP.BULLETED_MENU' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listBulletedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-marker\">\n            <mat-icon\n                svgIcon=\"marker-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"marker-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.BulletList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.BulletList6\"></mat-icon>\n        </div>\n    </mat-menu>\n    <mat-button-toggle\n        (click)=\"onToggleNumberedNumbering()\"\n        [value]=\"numberingType.Number\"\n        [checked]=\"selectedNumberingType === numberingType.Number\"\n        [matTooltip]=\"'NODER.TOOLTIP.NUMBERED_LIST' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-format-numbered\"></mat-icon>\n    </mat-button-toggle>\n    <button\n        mat-button\n        [matMenuTriggerFor]=\"listNumberedMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        [disabled]=\"isDisabled\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-arrow-dropdown\"></mat-icon>\n    </button>\n    <mat-menu\n        #listNumberedMenu=\"matMenu\"\n        class=\"dropdown-numbering-overlay noder-modal\"\n        yPosition=\"below\">\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-1\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList1)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList1\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-2\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList2)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList2\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-3\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList3)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList3\"></mat-icon>\n        </div>\n        <div class=\"list-icon list-number\">\n            <mat-icon\n                svgIcon=\"number-4\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList4)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList4\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-5\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList5)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList5\"></mat-icon>\n            <mat-icon\n                svgIcon=\"number-6\"\n                (click)=\"onSelectNumberingTemplate(numberingTemplateType.NumberList6)\"\n                [class.selected]=\"selectedNumberingTemplate === numberingTemplateType.NumberList6\"></mat-icon>\n        </div>\n    </mat-menu>\n</mat-button-toggle-group>\n", styles: [":host{display:flex;align-items:center}mat-button-toggle-group,button{margin:0 3px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.mdc-button{min-width:32px;min-height:32px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.mat-button-toggle-group{align-items:center}.mat-button-toggle-group .mdc-button{min-width:20px;height:32px;padding:0}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none!important}.list-icon .selected,.list-icon .selected:hover{border-width:2px;border-style:solid}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: Input
             }], selectedNumberingType: [{
@@ -18631,7 +18663,7 @@ class TextFormatMobileComponent {
     onApply() {
         const textStyles = new TextStyleModel(this.styles);
         this.editorService.setTextStyles(textStyles);
-        const paragraphStyles = new ParagraphStyleModel({ alignment: this.styles.alignment });
+        const paragraphStyles = new ParagraphStyleExtModel({ alignment: this.styles.alignment });
         this.editorService.setParagraphStyles(paragraphStyles);
         if (this.selectedNumberingTemplate !== null) {
             const templateLevels = NumberingTemplates.find(x => x.templateType === this.selectedNumberingTemplate).levels;
@@ -19542,5 +19574,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, CommentTypeModel, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TABLE_MARGINS, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, CommentTypeModel, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TABLE_MARGINS, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleExtModel, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map