@talrace/ngx-noder 0.0.44 → 0.0.45

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, input, signal, computed, effect, NgModule, Inject } from '@angular/core';
+import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, Inject, input, computed, effect, NgModule } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, debounceTime, distinctUntilChanged, startWith, takeUntil, tap, map, catchError } from 'rxjs';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
@@ -24,10 +24,14 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i5$3 from '@angular/cdk/clipboard';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$2 from '@angular/material/core';
 import * as i8 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$2 from '@angular/material/dialog';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -36,9 +40,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i8$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/core';
 import * as i5$4 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i3$3 from '@angular/material/button-toggle';
@@ -153,7 +154,8 @@ const DEFAULT_PARAGRAPH_STYLE = new ParagraphStyleModel({
     numberingLevel: null,
     contextualSpacing: false,
     beforeAutospacing: false,
-    afterAutospacing: false
+    afterAutospacing: false,
+    tabSettings: []
 });
 const DEFAULT_HEADINGS = [
     new HeadingModel({
@@ -594,6 +596,7 @@ class EditorService {
         this._rightMarginPageFormat$ = new Subject();
         this._firstLinePosition$ = new Subject();
         this._leftIndentParagraph$ = new Subject();
+        this._tabSettings$ = new Subject();
         this._rightIndentParagraph$ = new Subject();
         this._paragraphStyle$ = new BehaviorSubject(new ParagraphStyleModel());
     }
@@ -811,12 +814,18 @@ class EditorService {
     get leftIndentParagraph$() {
         return this._leftIndentParagraph$.asObservable();
     }
+    get tabSettings$() {
+        return this._tabSettings$.asObservable();
+    }
     get rightIndentParagraph$() {
         return this._rightIndentParagraph$.asObservable();
     }
     get paragraphStyle$() {
         return this._paragraphStyle$.asObservable();
     }
+    tabSettings(value) {
+        this._tabSettings$.next(value);
+    }
     applyFirstLinePosition(value) {
         this._firstLinePosition$.next(value);
     }
@@ -911,14 +920,14 @@ class EditorService {
     disableSelection() {
         this._disableSelection$.next();
     }
-    openElementSidenav(component, model, contentWidth) {
-        this._toggleSidenav$.next({ open: true, component, data: { model, contentWidth } });
+    openElementSidenav(component, model, contentWidth, focus) {
+        this._toggleSidenav$.next({ open: true, component, focus, data: { model, contentWidth } });
     }
-    openSidenav(component) {
-        this._toggleSidenav$.next({ open: true, component });
+    openSidenav(component, focus) {
+        this._toggleSidenav$.next({ open: true, component, focus });
     }
     closeSidenav() {
-        this._toggleSidenav$.next({ open: false, component: null });
+        this._toggleSidenav$.next({ open: false, component: null, focus: false });
     }
     changedTableSize(insertIndex, sessionId) {
         this._changedTableSize$.next({ insertIndex, sessionId });
@@ -1035,6 +1044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class BaseNoderComponent extends DestroyComponent {
     constructor() {
         super(...arguments);
+        this.height = signal(0);
+        this.width = signal(0);
         this._isFocused = false;
         this.cdr = inject(ChangeDetectorRef);
         this.editorService = inject(EditorService);
@@ -1097,16 +1108,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class ExternalComponent extends BaseNoderComponent {
+    constructor() {
+        super(...arguments);
+        this.focusSidenav = true;
+    }
+    skipSidenav() {
+        return this.editorService.isViewOnly;
+    }
     focus() {
         super.focus();
-        if (this.editorService.isViewOnly) {
+        if (this.skipSidenav()) {
             return;
         }
-        this.editorService.openElementSidenav(this.sidenavComponent, this.content, this.contentWidth);
+        this.editorService.openElementSidenav(this.sidenavComponent, this.content, this.contentWidth, this.focusSidenav);
     }
     blur() {
         super.blur();
-        if (this.editorService.isViewOnly) {
+        if (this.skipSidenav()) {
             return;
         }
         this.editorService.closeSidenav();
@@ -6973,7 +6991,8 @@ class Search {
                         this.allMatches.push(new CustomElementSearchResult({
                             sessionId: currentSession.sessionId,
                             range: parentRange,
-                            mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, container.index)
+                            mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, container.index),
+                            index: matchIndex
                         }));
                         customElementHighlights.push(new CustomElementInfo({ index: matchIndex, parentRange }));
                     }
@@ -7642,7 +7661,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), 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.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.commandCreatedForEdges());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), 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.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());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8977,6 +8996,9 @@ class Editor {
     applyLeftIndentParagraphSubscription() {
         return this.editorService.leftIndentParagraph$.subscribe(indentLeft => this.applyParagraphsMargin({ indentLeft }));
     }
+    applyTabSettingsSubscription() {
+        return this.editorService.tabSettings$.subscribe(tabSettings => this.applyParagraphsMargin({ tabSettings }));
+    }
     setImageStyleSubscription() {
         return this.editorService.setImageStyle$.subscribe(image => this.applyImageStyles(image));
     }
@@ -10525,7 +10547,7 @@ class NoderTableComponent extends BaseNoderComponent {
         const cellWidth = this.getCellWidth(tableRow, cellIndex, absoluteCellIndex);
         if (tableRow.cells[cellIndex].widthType === 'pct') {
             tableRow.cells[cellIndex].widthType = 'dxa';
-            return (cellWidth * this.width) / 5000; // 5000 is equal to 100% in docx units of measurement
+            return (cellWidth * this.width()) / 5000; // 5000 is equal to 100% in docx units of measurement
         }
         return ScalingHelper.scale(cellWidth, this.generalProperties.scalingRatio);
     }
@@ -10551,7 +10573,7 @@ class NoderTableComponent extends BaseNoderComponent {
         this.initialize();
     }
     insertRows(rowsCount, targetIndex) {
-        this.width = this.getTableWidth();
+        this.width.set(this.getTableWidth());
         let rowIndex = 0;
         while (rowIndex < rowsCount) {
             const targetRowIndex = targetIndex + rowIndex;
@@ -10726,20 +10748,20 @@ class NoderTableComponent extends BaseNoderComponent {
                 bordersHeight += this.borderSize;
             }
         }
-        this.height = rowsHeight + bordersHeight;
+        this.height.set(rowsHeight + bordersHeight);
     }
     processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
         this.removeSplits();
-        if (leftSpaceOnPage >= this.height) {
-            return { splitsCount: 0, tableHeight: this.height, leftHeight: 0 };
+        if (leftSpaceOnPage >= this.height()) {
+            return { splitsCount: 0, tableHeight: this.height(), leftHeight: 0 };
         }
         if (leftSpaceOnPage < this.rowMatrix[0].height) {
-            return { splitsCount: 1, tableHeight: this.height, leftHeight: this.height };
+            return { splitsCount: 1, tableHeight: this.height(), leftHeight: this.height() };
         }
         return this.splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight);
     }
     splitTable(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
-        let leftHeight = 0, tableHeightWithSplits = this.height, rowIndex = 0;
+        let leftHeight = 0, tableHeightWithSplits = this.height(), rowIndex = 0;
         while (rowIndex < this.rowMatrix.length) {
             let { index, rowsHeight } = this.getRowIndexByHeight(rowIndex, leftSpaceOnPage);
             rowIndex = index;
@@ -11233,9 +11255,20 @@ class ParagraphStyleHelper {
     }
 }
 
+var TabAlignment;
+(function (TabAlignment) {
+    TabAlignment[TabAlignment["Left"] = 0] = "Left";
+    TabAlignment[TabAlignment["Center"] = 1] = "Center";
+    TabAlignment[TabAlignment["Right"] = 2] = "Right";
+    TabAlignment[TabAlignment["Decimal"] = 3] = "Decimal";
+    TabAlignment[TabAlignment["Bar"] = 4] = "Bar";
+})(TabAlignment || (TabAlignment = {}));
+
 class TabHelper {
-    static calculateTabWidth(rowWidth, defaultTabWidth) {
-        return defaultTabWidth - (rowWidth % defaultTabWidth);
+    static calculateTabWidth(rowWidth, defaultTabWidth, tabSettings) {
+        const tabs = tabSettings ?? [];
+        const nextSetting = tabs.find(x => x.position > rowWidth);
+        return nextSetting ? nextSetting.position - rowWidth : defaultTabWidth - (rowWidth % defaultTabWidth);
     }
 }
 
@@ -11269,11 +11302,6 @@ class DisplayData extends EventEmitting {
         this.paragraphs = this.splitByParagraphs(this.model.content).map(x => new ParagraphInfoModel({ content: x }));
         this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
-    recreatePageFormatsNotMainSession(width) {
-        this.pagesFormat = [
-            new PageFormat(new PageFormatModel({ ...this.pagesFormat[0].pageFormatModel, pageWidth: width }), this.pagesSpace, this.customComponents)
-        ];
-    }
     insertText(position, text) {
         const endPoint = this.insertTextAndReturnEndCursorPosition(text, position);
         return endPoint;
@@ -11603,8 +11631,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.width = this.tabTokens[tabIndex - startIndex].width;
-            this.customComponents.tabs[tabIndex].instance.height = this.tabTokens[tabIndex - startIndex].font;
+            this.customComponents.tabs[tabIndex].instance.applySize(this.tabTokens[tabIndex - startIndex].width, this.tabTokens[tabIndex - startIndex].font);
             tabIndex++;
         }
         return tabIndex;
@@ -11639,7 +11666,7 @@ class DisplayData extends EventEmitting {
             if (!tokens.length) {
                 tokens.push(...this.getEmptyDisplayTokens(model, this.paragraphs[paragraphIndex].startIndex + index));
             }
-            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth);
+            let wrapLimit = this.computeWrapIndex(tokens, pageFormat.contentWidth, this.generalProperties.defaultTabWidth, model.paragraphs[paragraphIndex].paragraphStyle.tabSettings);
             if (tokens[tokens.length - 1].isPageBreak && wrapLimit === tokens.length && this.paragraphs.length > paragraphIndex + 1) {
                 wrapLimit = 0;
             }
@@ -12042,7 +12069,7 @@ class DisplayData extends EventEmitting {
     /**
      * Computes wrap index based on max row width
      */
-    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth) {
+    computeWrapIndex(displayTokens, contentWidth, defaultTabWidth, tabSettings) {
         if (!displayTokens[0]) {
             return 0;
         }
@@ -12055,13 +12082,46 @@ class DisplayData extends EventEmitting {
             displayTokens[0].indentHanging || 0;
         const maxRowWidth = contentWidth - indent;
         let sum = 0;
+        let prevTabIndex = null;
+        let tabCenter = null;
+        let prevTabAlignment = TabAlignment.Left;
         for (let i = 0; i < displayTokens.length; i++) {
             const token = displayTokens[i];
             const prevToken = i > 0 ? displayTokens[i - 1] : null;
             if (token.isTab) {
-                token.width = TabHelper.calculateTabWidth(sum, defaultTabWidth);
+                const tabs = tabSettings ?? [];
+                const nextSettingIndex = tabs.findIndex(x => x.position > sum);
+                const tokenWidth = TabHelper.calculateTabWidth(sum, defaultTabWidth, tabSettings);
+                if (nextSettingIndex >= 0 && tabs[nextSettingIndex].alignment === TabAlignment.Center) {
+                    prevTabAlignment = TabAlignment.Center;
+                    tabCenter = { stringWidth: 0, tokenWidth };
+                    token.width = tokenWidth;
+                }
+                else {
+                    prevTabAlignment = nextSettingIndex >= 0 ? tabs[nextSettingIndex].alignment : TabAlignment.Left;
+                    token.width = tokenWidth;
+                    tabCenter = null;
+                }
+                prevTabIndex = i;
+            }
+            if (prevTabAlignment === TabAlignment.Center && !token.isTab && tabCenter.stringWidth < tabCenter.tokenWidth) {
+                const tokenWidth = token.width / 2;
+                displayTokens[prevTabIndex].width -= tokenWidth;
+                tabCenter.stringWidth += tokenWidth;
+                sum += tokenWidth;
+            }
+            else if (prevTabAlignment === TabAlignment.Right && !token.isTab && displayTokens[prevTabIndex].width !== 0) {
+                if (displayTokens[prevTabIndex].width - token.width < 0) {
+                    sum += token.width - displayTokens[prevTabIndex].width;
+                    displayTokens[prevTabIndex].width = 0;
+                }
+                else {
+                    displayTokens[prevTabIndex].width -= token.width;
+                }
+            }
+            else {
+                sum += token.width;
             }
-            sum += token.width;
             if (sum >= maxRowWidth) {
                 return i > 0 ? i - 1 : 0;
             }
@@ -12766,7 +12826,7 @@ class NoderImageComponent extends BaseNoderComponent {
         this.content = val;
     }
     get size() {
-        return { width: this.width, height: this.height };
+        return { width: this.width(), height: this.height() };
     }
     constructor(elementRef, apiService) {
         super();
@@ -12776,8 +12836,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     initialize() {
         const url = this.image.content?.replace('/api/', '') ?? '';
-        this.height = ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio);
-        this.width = ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio);
+        this.height.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);
             const image = this.createImage(fileSource);
@@ -12791,8 +12851,8 @@ class NoderImageComponent extends BaseNoderComponent {
         this.editorService.changeImageStyle(resizedImage);
     }
     resize(size) {
-        this.width = size.width;
-        this.height = size.height;
+        this.width.set(size.width);
+        this.height.set(size.height);
         this.isCanvas ? this.resizeCanvas(size) : this.resizeImage(size);
         this.cdr.markForCheck();
     }
@@ -12810,8 +12870,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     createImage(fileSource) {
         const imageEl = document.createElement('img');
-        imageEl.width = this.width;
-        imageEl.height = this.height;
+        imageEl.width = this.width();
+        imageEl.height = this.height();
         imageEl.draggable = false;
         imageEl.src = fileSource;
         return imageEl;
@@ -12842,25 +12902,22 @@ class NoderTabComponent extends BaseNoderComponent {
         this.content = val;
     }
     initialize() {
-        this.calculateProperties();
+        this.applySize(this.tab.width, this.tab.fontSize);
     }
-    calculateProperties() {
-        this.height = this.tab.fontSize;
-        this.width = ScalingHelper.scale(this.tab.width, this.generalProperties.scalingRatio);
+    applySize(width, font) {
+        this.height.set(font);
+        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": "this.width", "style.fontSize.pt": "this.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()", "style.fontSize.pt": "height()" } }, 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, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
-        }], propDecorators: { width: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }], height: [{
-                type: HostBinding,
-                args: ['style.fontSize.pt']
-            }] } });
+            args: [{ selector: 'app-nod-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, host: {
+                        '[style.width.px]': 'width()',
+                        '[style.fontSize.pt]': 'height()'
+                    }, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"] }]
+        }] });
 
 const CHARS = [
     // eslint-disable-next-line prettier/prettier
@@ -14736,17 +14793,19 @@ class CustomContentService {
     }
     getTokenFromComponent(component, lineInfo, displayValue, isFirst, size) {
         let height = size.height;
-        if (component.instance.height > size.height) {
+        if (component.instance.height() > size.height) {
             height =
-                component.instance instanceof NoderImageComponent ? component.instance.height + size.descent : component.instance.height;
+                component.instance instanceof NoderImageComponent
+                    ? component.instance.height() + size.descent
+                    : component.instance.height();
         }
         return new DisplayToken({
-            width: component.instance.width,
+            width: component.instance.width(),
             height,
             baseline: 0,
             content: 0,
             font: size.font,
-            ascent: component.instance.height ?? size.height,
+            ascent: component.instance.height() ?? size.height,
             descent: 0,
             line: 0,
             lineSpacing: lineInfo.lineSpacing,
@@ -15060,10 +15119,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
+class TabSettingModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TabSettingsDialogComponent {
+    constructor(data, ref, fb) {
+        this.data = data;
+        this.ref = ref;
+        this.fb = fb;
+        this.modal = true;
+        this.alignments = [
+            { title: marker('NODER.LABEL.LEFT'), type: TabAlignment.Left },
+            { title: marker('NODER.LABEL.CENTER'), type: TabAlignment.Center },
+            { title: marker('NODER.LABEL.RIGHT'), type: TabAlignment.Right }
+        ];
+        this.form = this.fb.group({
+            tabs: this.fb.array(this.data.tabs.map(x => this.createTabGroup(x)))
+        });
+    }
+    tabsArray() {
+        return this.form.get('tabs');
+    }
+    onRemove(index) {
+        this.tabsArray().removeAt(index);
+    }
+    onClose() {
+        this.ref.close();
+    }
+    onSave() {
+        const result = this.tabsArray()
+            .value.filter(x => x.position !== null)
+            .map(v => new TabSettingModel({ position: v.position, alignment: v.alignment }));
+        this.ref.close(result);
+    }
+    onAddTab() {
+        const group = this.createTabGroup({ position: 0, alignment: TabAlignment.Left });
+        this.tabsArray().push(group);
+    }
+    createTabGroup(tab) {
+        return this.fb.group({
+            position: new FormControl(tab.position, { nonNullable: true, validators: [Validators.required] }),
+            alignment: new FormControl(tab.alignment, { nonNullable: true, validators: [Validators.required] })
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TabSettingsDialogComponent, isStandalone: true, selector: "app-nod-tab-settings-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TabSettingsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        TranslateModule,
+                        MatSelectModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule
+                    ], selector: 'app-nod-tab-settings-dialog', template: "<div class=\"columns\">\n    <span class=\"position\">{{ 'NODER.LABEL.POSITION' | translate }}</span>\n    <span class=\"alignment\">{{ 'NODER.LABEL.ALIGNMENT' | translate }}</span>\n</div>\n<form\n    [formGroup]=\"form\"\n    class=\"form\">\n    <div\n        class=\"tabs\"\n        formArrayName=\"tabs\">\n        @for (tabCtrl of tabsArray().controls; let i = $index; track i) {\n            <div\n                class=\"item\"\n                [formGroupName]=\"i\">\n                <div class=\"tab\">\n                    <mat-form-field class=\"position\">\n                        <input\n                            matInput\n                            type=\"number\"\n                            formControlName=\"position\" />\n                    </mat-form-field>\n                    <mat-form-field class=\"alignment\">\n                        <mat-select formControlName=\"alignment\">\n                            @for (alignment of alignments; track alignment) {\n                                <mat-option [value]=\"alignment.type\">\n                                    {{ alignment.title | translate }}\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                    <button\n                        id=\"tab-setting-dialog-delete-btn\"\n                        mat-icon-button\n                        type=\"button\"\n                        (click)=\"onRemove(i)\">\n                        <mat-icon\n                            fontSet=\"noder-icon\"\n                            fontIcon=\"icon-delete\"></mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n    </div>\n</form>\n<div class=\"tab-actions\">\n    <button\n        id=\"tab-setting-dialog-add-btn\"\n        mat-stroked-button\n        (click)=\"onAddTab()\">\n        {{ 'NODER.LABEL.ADD' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-clear-all-btn\"\n        mat-stroked-button\n        (click)=\"tabsArray().clear()\">\n        {{ 'NODER.LABEL.CLEAR_ALL' | translate }}\n    </button>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"tab-setting-dialog-cancel-btn\"\n        mat-stroked-button\n        (click)=\"onClose()\">\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        id=\"tab-setting-dialog-ok-btn\"\n        mat-stroked-button\n        (click)=\"onSave()\">\n        {{ 'NODER.LABEL.SAVE' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:550px;width:360px;padding:20px 0 20px 20px;gap:20px}.tabs{flex:1;overflow:hidden auto;display:flex;flex-direction:column}.form{height:350px;display:flex}.item{display:flex}.tab{display:flex;flex:1;gap:20px}.mat-mdc-form-field{width:120px}.columns{display:flex;gap:30%}.columns .position,.columns .alignment{font-weight:700}.tab-actions{display:flex;justify-content:start;gap:10px}.actions{display:flex;justify-content:end;gap:10px;margin-right:20px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
+                type: HostBinding,
+                args: ['class.noder-modal']
+            }] } });
+
 class EditorRulerComponent {
     constructor() {
         this.unit = input.required();
         this.editorService = inject(EditorService);
+        this.dialog = inject(MatDialog);
         this.defaultPaddingCm = 2.5;
         this.pageWidth$ = this.editorService.pageFormat$.pipe(distinctUntilChanged(), tap(x => {
             this.recalcGeometry(x.pageWidth);
@@ -15075,26 +15207,27 @@ class EditorRulerComponent {
         this.snapCm = 0.25;
         this.pxPerCm = 37.8; // 96dpi / 2.54
         this.pxPerInch = 96;
-        this.firstLine = signal(this.defaultPaddingCm * this.pxPerCm);
-        this.leftIndent = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.firstLine = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
+        this.leftIndent = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
         this.rightIndent = signal(0);
         this.leftIndentPx = computed(() => this.leftIndent() + this.leftMarginPageFormatPx());
         this.firstLinePx = computed(() => this.firstLine() + this.leftIndentPx());
         this.rightIndentPx = computed(() => this.rightMarginPageFormatPx() - this.rightIndent());
-        this.leftMarginPageFormatPx = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.leftMarginPageFormatPx = signal(Math.floor(this.defaultPaddingCm * this.pxPerCm));
         this.rightMarginPageFormatPx = signal(0);
         this.guideX = signal(0);
         this.showGuide = signal(false);
+        this.tabSettings = signal([]);
         this.containerWidthPx = 0;
         this.ticks = [];
         this.dragging = null;
         this.dragOffsetX = 0;
-        this.onMove = (ev) => {
+        this.onMove = (event) => {
             if (!this.dragging) {
                 return;
             }
-            ev.preventDefault();
-            const pointX = this.getClientX(ev);
+            event.preventDefault();
+            const pointX = this.getClientX(event);
             const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
             let x = pointX - rect.left - this.dragOffsetX;
             if (x < -1 || x > this.containerWidthPx) {
@@ -15116,6 +15249,9 @@ class EditorRulerComponent {
             else if (this.dragging === 'rightIndent') {
                 this.rightIndent.set(this.rightMarginPageFormatPx() - x);
             }
+            else if (this.dragging === 'tabs') {
+                this.tabSettings()[this.draggableTabIndex].position = x - this.leftMarginPageFormatPx();
+            }
             this.guideX.set(x);
         };
         this.onUp = () => {
@@ -15134,6 +15270,14 @@ class EditorRulerComponent {
             else if (this.dragging === 'rightMarginPageFormat') {
                 this.editorService.applyRightMarginPageFormat(Math.round(this.containerWidthPx - this.rightMarginPageFormatPx()));
             }
+            else if (this.dragging === 'tabs') {
+                this.editorService.tabSettings(this.tabSettings()
+                    .sort((a, b) => a.position - b.position)
+                    .map(x => new TabSettingModel({
+                    alignment: x.alignment,
+                    position: Math.floor(x.position)
+                })));
+            }
             this.dragging = null;
             this.showGuide.set(false);
             window.removeEventListener('mousemove', this.onMove);
@@ -15141,6 +15285,9 @@ class EditorRulerComponent {
             window.removeEventListener('touchmove', this.onMove);
             window.removeEventListener('touchend', this.onUp);
         };
+        this.editorService.paragraphStyle$
+            .pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(x => !!x.tabSettings), map(x => x.tabSettings?.map(y => new TabSettingModel({ alignment: y.alignment, position: y.position })) ?? []))
+            .subscribe(x => this.tabSettings.set(x));
         this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(x => {
             this.firstLine.set(x.indentHanging ? -x.indentHanging : x.indentFirstLine);
             this.leftIndent.set(x.indentLeft);
@@ -15158,6 +15305,31 @@ class EditorRulerComponent {
         this.recalcGeometry();
         this.buildTicksCm();
     }
+    onOpenDialog() {
+        const tabs = this.tabSettings().map(x => {
+            const position = this.unit() === 'inch' ? this.pxToInch(x.position) : this.pxToCm(x.position);
+            return new TabSettingModel({ position, alignment: x.alignment });
+        });
+        this.dialog
+            .open(TabSettingsDialogComponent, {
+            autoFocus: false,
+            restoreFocus: false,
+            data: { tabs, unit: this.unit() }
+        })
+            .afterClosed()
+            .pipe(filter(x => !!x))
+            .subscribe((x) => {
+            const convertedTabs = x.map(y => {
+                const position = this.unit() === 'inch' ? this.inchToPx(y.position) : this.cmToPx(y.position);
+                return new TabSettingModel({
+                    alignment: y.alignment,
+                    position: Math.floor(position)
+                });
+            });
+            this.tabSettings.set(convertedTabs);
+            this.editorService.tabSettings(convertedTabs.sort((a, b) => a.position - b.position));
+        });
+    }
     recalcGeometry(width = null) {
         this.containerWidthPx = width ?? this.rulerContainer.nativeElement.getBoundingClientRect().width;
     }
@@ -15246,9 +15418,17 @@ class EditorRulerComponent {
         }
         this.ticks = ticks;
     }
-    startDrag(ev, target) {
-        ev.preventDefault();
-        const pointX = this.getClientX(ev);
+    addTab(event) {
+        const position = this.getClientX(event) - this.rulerContainer.nativeElement.getBoundingClientRect().left - this.leftMarginPageFormatPx();
+        this.tabSettings.update(x => {
+            x.push(new TabSettingModel({ alignment: TabAlignment.Left, position }));
+            return x;
+        });
+        this.startDrag(event, 'tabs', this.tabSettings().length - 1);
+    }
+    startDrag(event, target, tabIndex) {
+        event.preventDefault();
+        const pointX = this.getClientX(event);
         const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
         this.dragging = target;
         if (target === 'leftMarginPageFormat') {
@@ -15266,6 +15446,10 @@ class EditorRulerComponent {
         else if (target === 'rightIndent') {
             this.dragOffsetX = pointX - rect.left - this.rightIndentPx();
         }
+        else if (target === 'tabs') {
+            this.draggableTabIndex = tabIndex;
+            this.dragOffsetX = pointX - rect.left - this.tabSettings()[tabIndex].position - this.leftMarginPageFormatPx();
+        }
         this.showGuide.set(true);
         this.guideX.set(this.getCurrentDraggedPx());
         window.addEventListener('mousemove', this.onMove);
@@ -15291,14 +15475,16 @@ class EditorRulerComponent {
                 return this.leftIndentPx();
             case 'rightIndent':
                 return this.rightIndentPx();
+            case 'tabs':
+                return this.tabSettings()[this.draggableTabIndex].position + this.leftMarginPageFormatPx();
         }
     }
     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 } }, 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    [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 class=\"ruler-track\">\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    <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;width:100%;height:22px;justify-content:center;align-items:center}.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 } }, 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    [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;width:100%;height:22px;justify-content:center;align-items:center}.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    [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 class=\"ruler-track\">\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    <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;width:100%;height:22px;justify-content:center;align-items:center}.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    [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;width:100%;height:22px;justify-content:center;align-items:center}.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 }]
@@ -15359,6 +15545,7 @@ class EditorComponent {
                 this.sidenavComponentRef = this.componentService.createComponent(data.component, data?.data);
                 this.componentService.attachComponent(this.sidenavContainer.nativeElement, this.sidenavComponentRef);
                 if (!this.sidenav.opened) {
+                    this.sidenav.autoFocus = data.focus;
                     this.sidenav.open().catch(() => {
                         // continue regardless of error
                     });
@@ -15513,7 +15700,7 @@ class NoderTranslateLoader extends TranslateHttpLoader {
     getTranslation(lang) {
         return super.getTranslation(lang).pipe(catchError(() => super.getTranslation('en')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTranslateLoader, decorators: [{
@@ -15521,7 +15708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
 
 var Mode;
 (function (Mode) {
@@ -15677,7 +15864,7 @@ class ToolbarCoreService {
     }
     openBurgerMenu() {
         this.mode = EditorToolbarMode.Menu;
-        this.editorService.openSidenav(MenuDropdownsMobileComponent);
+        this.editorService.openSidenav(MenuDropdownsMobileComponent, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarCoreService, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarCoreService }); }
@@ -17508,7 +17695,7 @@ class PageSetupComponent {
         return customPageSize;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, deps: [{ token: EditorService }, { token: ToolbarCoreService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PageSetupComponent, isStandalone: true, selector: "app-nod-page-setup", viewQueries: [{ propertyName: "pageSizeForm", first: true, predicate: ["pageSizeForm"], descendants: true }], ngImport: i0, template: "<div class=\"title\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        (click)=\"onClose()\"\n        fontIcon=\"icon-arrow-forward\" />\n    <span>{{ 'NODER.LABEL.PAGE_SETUP' | translate }}</span>\n</div>\n<form #pageSizeForm=\"ngForm\">\n    <div class=\"content\">\n        <mat-form-field appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.APPLY_TO' | translate }}</mat-label>\n            <mat-select [(value)]=\"selectedDocumentArea\">\n                <mat-option [value]=\"documentAreas.WholeDocument\">{{ 'NODER.LABEL.WHOLE_DOCUMENT' | translate }}</mat-option>\n                <mat-option [value]=\"documentAreas.ThisSection\">{{ 'NODER.LABEL.THIS_SECTION' | translate }}</mat-option>\n                @if (hasSelection$ | async) {\n                    <mat-option [value]=\"documentAreas.SelectedText\">{{ 'NODER.LABEL.SELECTED_TEXT' | translate }}</mat-option>\n                }\n            </mat-select>\n        </mat-form-field>\n        <div class=\"orientation\">\n            <div class=\"label\">{{ 'NODER.LABEL.ORIENTATION' | translate }}</div>\n            <mat-radio-group\n                aria-label=\"Select an option\"\n                [(ngModel)]=\"pageSize.orientation\"\n                name=\"orientation\"\n                (change)=\"onPageOrientationChanged()\">\n                <mat-radio-button [value]=\"pageOrientations.Portrait\">\n                    <span>{{ 'NODER.LABEL.PORTRAIT' | translate }}</span>\n                </mat-radio-button>\n                <mat-radio-button [value]=\"pageOrientations.Landscape\">\n                    <span>{{ 'NODER.LABEL.LANDSCAPE' | translate }}</span>\n                </mat-radio-button>\n            </mat-radio-group>\n        </div>\n        <div class=\"page-format\">\n            <div class=\"page-format-tile\">\n                <div class=\"label\">{{ 'NODER.LABEL.PAGE_FORMAT' | translate }}</div>\n                <div class=\"checkbox-area\">\n                    <div class=\"checkbox-label\">{{ 'NODER.LABEL.CUSTOM_SIZE' | translate }}</div>\n                    <mat-checkbox\n                        [checked]=\"pageSize.isCustom\"\n                        (change)=\"toggleCustomSize($event)\" />\n                </div>\n            </div>\n            @if (!pageSize.isCustom) {\n                <div class=\"page-size\">\n                    <mat-form-field appearance=\"outline\">\n                        <mat-label>{{ 'NODER.LABEL.SIZE' | translate }}</mat-label>\n                        <mat-select\n                            [(value)]=\"pageSizeName\"\n                            (selectionChange)=\"onPageSizeChange()\">\n                            @for (option of pageSizes; track option) {\n                                <mat-option [value]=\"option.name\">\n                                    <div class=\"size-option\">\n                                        <span class=\"option-name\">{{ option.name + ' ' }}</span>\n                                        <span class=\"option-size\">{{ option.size }}</span>\n                                    </div>\n                                </mat-option>\n                            }\n                        </mat-select>\n                    </mat-form-field>\n                </div>\n            } @else {\n                <div class=\"page-custom-size\">\n                    <mat-form-field\n                        appearance=\"outline\"\n                        class=\"size-unit\">\n                        <mat-label>{{ 'NODER.LABEL.MEASURE' | translate }}</mat-label>\n                        <mat-select\n                            [(ngModel)]=\"pageSize.unit\"\n                            name=\"unit\"\n                            (valueChange)=\"onUnitChanged($event)\">\n                            <mat-option [value]=\"sizeUnits.Millimeters\">{{ 'NODER.LABEL.MILLIMETERS' | translate }}</mat-option>\n                            <mat-option [value]=\"sizeUnits.Inches\">{{ 'NODER.LABEL.INCHES' | translate }}</mat-option>\n                        </mat-select>\n                    </mat-form-field>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-width\">\n                            <mat-label>{{ ('NODER.LABEL.WIDTH' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customWidth\"\n                                name=\"customWidth\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementWidth()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                    <div class=\"size-panel\">\n                        <mat-form-field\n                            appearance=\"outline\"\n                            class=\"custom-height\">\n                            <mat-label>{{ ('NODER.LABEL.HEIGHT' | translate) + currentUnit }}</mat-label>\n                            <input\n                                matInput\n                                [(ngModel)]=\"pageSize.customHeight\"\n                                name=\"customHeight\" />\n                        </mat-form-field>\n                        <button\n                            mat-button\n                            (click)=\"onIncrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-add\"></mat-icon>\n                        </button>\n                        <button\n                            mat-button\n                            (click)=\"onDecrementHeight()\">\n                            <mat-icon\n                                fontSet=\"noder-icon\"\n                                fontIcon=\"icon-remove\"></mat-icon>\n                        </button>\n                    </div>\n                </div>\n            }\n        </div>\n    </div>\n    <div class=\"actions\">\n        <button\n            mat-stroked-button\n            (click)=\"onClose()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-cancel-thin\" />\n        </button>\n        <button\n            mat-flat-button\n            color=\"primary\"\n            (click)=\"onApply()\"\n            [disabled]=\"pageSizeForm.pristine\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-done-thin\" />\n        </button>\n    </div>\n</form>\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:400px}.title{margin:12px 16px;height:32px;display:flex;align-items:center;gap:8px}.title span{overflow:hidden;text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:8px 16px 0;gap:24px}.actions{display:flex;justify-content:flex-end;margin:0 16px 16px;gap:10px}.actions .mdc-button{width:32px;height:32px;min-width:32px;padding:0}.actions .mdc-button .mat-icon{margin-right:0;margin-left:0}.orientation{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.orientation mat-radio-group{display:flex;width:100%;gap:16px}.label{font-size:14px;font-style:normal;font-weight:400;line-height:normal}.page-format{display:flex;flex-direction:column;gap:16px}.page-format-tile{display:flex;align-items:center;justify-content:space-between}.page-format-tile .checkbox-area{display:flex;align-items:center}.checkbox-label{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.custom-width,.custom-height,.size-unit{width:120px}.page-custom-size{display:flex;flex-direction:column}.size-panel{display:flex;gap:10px}.size-panel .mdc-button{width:40px;height:40px;min-width:40px;padding:0}.size-panel .mdc-button .mat-icon{margin-right:0;margin-left:0}.size-option{display:flex;flex-direction:column}.option-name{font-weight:400}.option-size{font-size:12px}form{display:flex;flex-direction:column;flex:1}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i12.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i12.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PageSetupComponent, decorators: [{
             type: Component,
@@ -17578,7 +17765,8 @@ class RevisionHelper {
             beforeAutospacing: paragraphStyle.beforeAutospacing ?? DEFAULT_PARAGRAPH_STYLE.beforeAutospacing,
             afterAutospacing: paragraphStyle.afterAutospacing ?? DEFAULT_PARAGRAPH_STYLE.afterAutospacing,
             numberingId: paragraphStyle.numberingId ?? DEFAULT_PARAGRAPH_STYLE.numberingId,
-            numberingLevel: paragraphStyle.numberingLevel ?? DEFAULT_PARAGRAPH_STYLE.numberingLevel
+            numberingLevel: paragraphStyle.numberingLevel ?? DEFAULT_PARAGRAPH_STYLE.numberingLevel,
+            tabSettings: paragraphStyle.tabSettings ?? DEFAULT_PARAGRAPH_STYLE.tabSettings
         });
     }
     static getEmptyDocxModel() {
@@ -17658,8 +17846,8 @@ class AddLinkDialogComponent {
         }
         this.dialogRef.close({ text: this.form.controls.text.value, link: this.form.controls.link.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AddLinkDialogComponent, isStandalone: true, selector: "app-nod-add-link-dialog", host: { listeners: { "keydown.esc": "onClose()", "keydown.enter": "onApply()" }, properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AddLinkDialogComponent, decorators: [{
             type: Component,
@@ -17673,7 +17861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ReactiveFormsModule,
                         TranslateModule
                     ], selector: 'app-nod-add-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div mat-dialog-title>{{ 'NODER.LABEL.ADD_LINK' | translate }}</div>\n<div\n    mat-dialog-content\n    [formGroup]=\"form\">\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.TEXT' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.text\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_TEXT_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.LINK' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"form.controls.link\"\n            required />\n        <mat-error>{{ 'NODER.LABEL.THE_LINK_IS_REQUIRED' | translate }}.</mat-error>\n    </mat-form-field>\n</div>\n<div mat-dialog-actions>\n    <button\n        mat-button\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\" />\n        {{ 'NODER.LABEL.CANCEL' | translate }}\n    </button>\n    <button\n        mat-raised-button\n        color=\"primary\"\n        class=\"apply-btn\"\n        [disabled]=\"form.invalid\"\n        (click)=\"onApply()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\" />\n        {{ 'NODER.LABEL.APPLY' | translate }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;height:300px;width:430px;overflow:hidden}:host ::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: 12px;height:48px}:host ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:12px}.mat-mdc-dialog-title{font-weight:600;padding-top:5px}mat-form-field{width:100%}.mat-mdc-dialog-content{padding-top:10px!important;padding-bottom:0}.mat-mdc-dialog-actions{display:flex;justify-content:center;padding-top:5px;height:40px;margin-bottom:30px}.mat-mdc-dialog-actions button{width:30%;height:100%;letter-spacing:1px;border-radius:8px;text-transform:uppercase}.mat-mdc-dialog-actions button .apply-btn{font-weight:400}.mat-mdc-dialog-actions button .mat-icon{font-size:24px;height:24px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i2.FormBuilder }], propDecorators: { modal: [{
                 type: HostBinding,
                 args: ['class.noder-modal']
             }], onClose: [{
@@ -17724,7 +17912,7 @@ class ConfirmDialogComponent {
     onClose(status) {
         this.ref.close(status);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ConfirmDialogComponent, isStandalone: true, selector: "app-nod-confirm-dialog", host: { properties: { "class.noder-modal": "this.modal" } }, ngImport: i0, template: "<p class=\"title\">{{ data.title ? data.title : ('NODER.LABEL.CONFIRMATION' | translate) }}</p>\n<div class=\"content\">\n    <p>{{ data.message }}</p>\n</div>\n<div class=\"actions\">\n    <button\n        id=\"confirm-dialog-cancel-btn\"\n        mat-button\n        (click)=\"onClose(false)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n        {{ data.cancel ? data.cancel : ('NODER.LABEL.CANCEL' | translate) }}\n    </button>\n    <button\n        id=\"confirm-dialog-confirm-btn\"\n        mat-raised-button\n        class=\"delete-btn\"\n        color=\"primary\"\n        (click)=\"onClose(true)\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-done-thin\"></mat-icon>\n        {{ data.confirm ? data.confirm : ('NODER.LABEL.DELETE' | translate) }}\n    </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-width:400px;max-width:440px;min-height:208px}.title{font-size:18px;font-weight:700;text-transform:capitalize;padding:24px 24px 12px;margin:0;border-bottom-width:1px;border-bottom-style:solid}.content{display:flex;flex:1;font-size:16px;line-height:20px;padding:20px 24px 16px}.content p{margin:0;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;justify-content:center;margin-bottom:24px;gap:8px}.actions button{height:40px;width:120px;text-transform:uppercase}.actions button mat-icon{font-size:24px;height:24px;width:24px}.actions button .mat-button-toggle-label-content{padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
@@ -17733,7 +17921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$2.MatDialogRef }], propDecorators: { modal: [{
+                }] }, { type: i1$1.MatDialogRef }], propDecorators: { modal: [{
                 type: HostBinding,
                 args: ['class.noder-modal']
             }] } });