@talrace/ngx-noder 19.0.31 → 19.0.33

package/fesm2022/talrace-ngx-noder.mjs

@@ -177,6 +177,7 @@ const DEFAULT_HEADINGS = [
 ];
 const NEW_LINE_MARKUP = '\n';
 const DEFAULT_TAB_WIDTH = 48;
+const DEFAULT_OFFSET_AFTER_NUMBERING_MARKER = 20;
 const DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER = 0.4;
 
 var PageType;
@@ -1171,7 +1172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class BaseNoderComponent extends DestroyComponent {
     constructor() {
         super(...arguments);
-        this.height = signal(0);
+        this.ascent = signal(0);
+        this.descent = signal(0);
         this.width = signal(0);
         this._isFocused = false;
         this.cdr = inject(ChangeDetectorRef);
@@ -5912,7 +5914,7 @@ class PositionHelper {
             (textLineInfo.indentFirstLine ||
                 (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
                     numberingOffsetLeft - textLineInfo.indentLeft < textLineInfo.markerWidth))) {
-            return textLineInfo.markerWidth;
+            return DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
         }
         return 0;
     }
@@ -6022,7 +6024,7 @@ class RenderingHelper {
         if (currentParagraph.textLinesInfo[0].indentFirstLine ||
             (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
                 numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth)) {
-            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
+            markerWidth = DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
         }
         let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
@@ -6896,7 +6898,7 @@ class TextLayer {
             let offset = 0;
             if (numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
                 numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
-                offset = paragraphSettings.textLinesInfo[0].markerWidth;
+                offset = DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
             }
             const lineInfo = paragraphSettings.textLinesInfo[0];
             const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
@@ -10306,28 +10308,20 @@ class DisplayTokenHelper {
             info.isNumbering = firstWrapToken.isNumbering;
             info.markerWidth = firstWrapToken.markerWidth;
         }
-        let fontSize = 0;
-        let ascent = 0;
-        let descent = 0;
+        let maxAscent = 0;
+        let maxDescent = 0;
         const tokens = isAfterPageBreak && !wrapTokens.length ? [prevToken] : wrapTokens;
         for (const wrapToken of tokens) {
-            if (info.height < wrapToken.height) {
-                info.height = wrapToken.height;
+            if (maxAscent < wrapToken.ascent) {
+                maxAscent = wrapToken.ascent;
             }
-            if (fontSize < wrapToken.font && wrapToken.displayValue !== DisplayValue.customContent) {
-                fontSize = wrapToken.font;
-                ascent = wrapToken.ascent;
-                descent = wrapToken.descent;
+            if (maxDescent < wrapToken.descent) {
+                maxDescent = wrapToken.descent;
             }
             info.width += wrapToken.width;
         }
-        info.height = info.height || 18;
-        if (info.lineSpacing > 1) {
-            info.offsetAfter = (ascent + descent) * (info.lineSpacing - 1);
-        }
-        else if (ascent + descent === info.height) {
-            info.height = info.height * info.lineSpacing;
-        }
+        info.height = maxAscent + maxDescent;
+        info.offsetAfter = info.height * (info.lineSpacing - 1);
         return info;
     }
 }
@@ -11461,20 +11455,20 @@ class NoderTableComponent extends BaseNoderComponent {
                 bordersHeight += this.borderSize;
             }
         }
-        this.height.set(rowsHeight + bordersHeight);
+        this.ascent.set(rowsHeight + bordersHeight);
     }
     processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
         this.removeSplits();
-        if (leftSpaceOnPage >= this.height()) {
-            return { splitsCount: 0, tableHeight: this.height(), leftHeight: 0 };
+        if (leftSpaceOnPage >= this.ascent()) {
+            return { splitsCount: 0, tableHeight: this.ascent(), leftHeight: 0 };
         }
         if (leftSpaceOnPage < this.rowMatrix[0].height) {
-            return { splitsCount: 1, tableHeight: this.height(), leftHeight: this.height() };
+            return { splitsCount: 1, tableHeight: this.ascent(), leftHeight: this.ascent() };
         }
         return this.splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight);
     }
     splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
-        let leftHeight = 0, tableHeightWithSplits = this.height(), rowIndex = 0;
+        let leftHeight = 0, tableHeightWithSplits = this.ascent(), rowIndex = 0;
         while (rowIndex < this.rowMatrix.length) {
             let { index, rowsHeight } = this.getRowIndexByHeight(rowIndex, leftSpaceOnPage);
             rowIndex = index;
@@ -11668,6 +11662,10 @@ class NumberingHelper {
         }
         numberingInfo[numberingId] ??= [];
         this.updateNumberingInfo(numberingInfo, resultMarker, numberingId, levelModel.level);
+        const markerLevels = resultMarker.split('.');
+        if (levelModel.level !== 0 && markerLevels[markerLevels.length - 1] === '') {
+            return resultMarker.slice(0, -1);
+        }
         return resultMarker;
     }
     static createDataModel(numberings, paragraphs, paragraphIndex, numberingInfo) {
@@ -11679,7 +11677,7 @@ class NumberingHelper {
         const level = paragraph.paragraphStyle.numberingLevel;
         const numberingLevelModel = this.find(numberings, numberingId, level);
         for (let i = 0; i < level; i++) {
-            if (!numberingInfo[numberingId][i]) {
+            if (!numberingInfo[numberingId] || !numberingInfo[numberingId][i]) {
                 const numberingLevel = this.find(numberings, numberingId, i);
                 this.getMarker(numberingLevel, numberingId, paragraphs, paragraphIndex, numberingInfo);
             }
@@ -12417,7 +12415,7 @@ class DisplayData extends EventEmitting {
         }
         const startIndex = tabIndex;
         while (this.customComponents.tabs[tabIndex] && this.customComponents.tabs[tabIndex].instance.insertIndex <= paragraphLastIndex) {
-            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width, this.tabTokens[tabIndex - startIndex].font);
+            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width);
             tabIndex++;
         }
         return tabIndex;
@@ -13652,7 +13650,7 @@ class NoderImageComponent extends BaseNoderComponent {
         this.content = val;
     }
     get size() {
-        return { width: this.width(), height: this.height() };
+        return { width: this.width(), height: this.ascent() };
     }
     constructor(elementRef, apiService) {
         super();
@@ -13662,7 +13660,7 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     initialize() {
         const url = this.image.content?.replace('/api/', '') ?? '';
-        this.height.set(ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio));
+        this.ascent.set(ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio));
         this.width.set(ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio));
         this.apiService.getFile(url).subscribe(x => {
             const fileSource = URL.createObjectURL(x);
@@ -13678,7 +13676,7 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     resize(size) {
         this.width.set(size.width);
-        this.height.set(size.height);
+        this.ascent.set(size.height);
         this.isCanvas ? this.resizeCanvas(size) : this.resizeImage(size);
         this.cdr.markForCheck();
     }
@@ -13697,7 +13695,7 @@ class NoderImageComponent extends BaseNoderComponent {
     createImage(fileSource) {
         const imageEl = document.createElement('img');
         imageEl.width = this.width();
-        imageEl.height = this.height();
+        imageEl.height = this.ascent();
         imageEl.draggable = false;
         imageEl.src = fileSource;
         return imageEl;
@@ -13728,20 +13726,18 @@ class NoderTabComponent extends BaseNoderComponent {
         this.content = val;
     }
     initialize() {
-        this.applySize(this.tab.width, this.tab.fontSize);
+        this.applySize(this.tab.width);
     }
-    applySize(width, font) {
-        this.height.set(font);
+    applySize(width) {
         this.width.set(ScalingHelper.scale(width, this.generalProperties.scalingRatio));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "width()", "style.fontSize.pt": "height()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "width()" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
-                        '[style.width.px]': 'width()',
-                        '[style.fontSize.pt]': 'height()'
+                        '[style.width.px]': 'width()'
                     }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
         }] });
 
@@ -14034,6 +14030,7 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreParagraphStyles(this.model, paragraphs);
+        this.displayData.resetAllNumberingInfo(0);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -15921,21 +15918,16 @@ class CustomContentService {
         return this.findComponent(components.tables, charIndex);
     }
     getTokenFromComponent(component, lineInfo, displayValue, isFirst, size) {
-        let height = size.height;
-        if (component.instance.height() > size.height) {
-            height =
-                component.instance instanceof NoderImageComponent
-                    ? component.instance.height() + size.descent
-                    : component.instance.height();
-        }
+        const ascent = component.instance.ascent() ?? 0;
+        const descent = component.instance.descent() ?? 0;
         return new DisplayToken({
             width: component.instance.width(),
-            height,
+            height: ascent + descent,
             baseline: 0,
             content: 0,
             font: size.font,
-            ascent: component.instance.height() ?? size.height,
-            descent: 0,
+            ascent,
+            descent,
             line: 0,
             lineSpacing: lineInfo.lineSpacing,
             multiplier: 0,
@@ -16633,11 +16625,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:3;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:3;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -16736,11 +16728,11 @@ class EditorComponent {
         this.sidenavComponentRef = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }, { token: InsertOverlays }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:3}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:3}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
@@ -19198,5 +19190,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, 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_PARAGRAPH_STYLE, 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, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, 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_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 };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map