@talrace/ngx-noder 19.0.44 → 19.0.45

package/fesm2022/talrace-ngx-noder.mjs

@@ -2066,13 +2066,10 @@ class FormatHelper {
     }
 }
 
-const POPUP_HEIGHT = 150;
-
 class GrammarPopupComponent {
     constructor(editorService, overlayService) {
         this.editorService = editorService;
         this.overlayService = overlayService;
-        this.hostHeight = `${POPUP_HEIGHT}px`;
     }
     onSuggestionClick(index) {
         this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
@@ -2083,15 +2080,12 @@ class GrammarPopupComponent {
         this.overlayService.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, host: { properties: { "style.height": "this.hostHeight" } }, ngImport: i0, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, ngImport: i0, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"], dependencies: [{ 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: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule], standalone: true, template: "<span\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    {{ 'NODER.LABEL.IGNORE' | translate }}\n</span>\n<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px;box-shadow:0 8px 20px #00000026,0 4px 10px #0000001a}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:14px;padding:0 10px;border-bottom-width:1px;border-bottom-style:solid}.options{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:5px 0}.suggestion{font-weight:600;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{border-radius:4px;margin-left:auto;font-weight:600;cursor:pointer;transition:all .3s ease;padding:3px 8px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hostHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }], error: [{
+            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, TranslateModule], standalone: true, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { error: [{
                 type: Input
             }], paragraphIndex: [{
                 type: Input
@@ -5210,7 +5204,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ lineStyle: style }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, lineStyle: style })),
             insertIndex: table.insertIndex
         });
     }
@@ -5225,7 +5219,7 @@ class TableOperationsHelper {
             return null;
         }
         return new ApplyTableCellsStylesModel({
-            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, ...new BordersStyleModel({ width }) })),
+            cellsData: this.getCellDataFromBorderCells(cellsMap, (oldBorder) => new BordersStyleModel({ ...oldBorder, width })),
             insertIndex: table.insertIndex
         });
     }
@@ -9854,8 +9848,8 @@ class Editor {
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const rect = this.renderer.container.getBoundingClientRect();
             const hintLeft = rect.left + cursor.pageX;
-            const hintTop = rect.top + cursor.pageY - POPUP_HEIGHT;
-            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft - 100, hintTop);
+            const hintTop = rect.top + cursor.pageY + cursor.height + 5;
+            this.overlayService.open(GrammarPopupComponent, { error, paragraphIndex: position.row }, hintLeft, hintTop);
             event.stopPropagation();
         }
         event.preventDefault();
@@ -11026,11 +11020,12 @@ class CellResizer {
             this.columnPositionChanged(positionX);
         };
     }
-    onStartResizing(cellResizerParameters) {
+    onStartResizing(cellResizerParameters, maxExpansionSpace = 0) {
         if (this.editorService.isViewOnly) {
             return;
         }
         this.cellResizerParameters = cellResizerParameters;
+        this.maxExpansionSpace = maxExpansionSpace;
         switch (this.cellResizerParameters.cellSide) {
             case ResizerSide.Left:
                 this.startResizingFromLeft();
@@ -11061,9 +11056,13 @@ class CellResizer {
         this.spaceLeft = this.table.columns[columnIndex].width - this.minCellWidth;
         this.spaceRight = 0;
         const nextColumnIndex = columnIndex + 1;
+        const isLast = columnIndex === this.table.columns.length - 1;
         if (this.table.columns.length > nextColumnIndex) {
             this.spaceRight = this.table.columns[nextColumnIndex].width - this.minCellWidth;
         }
+        else if (isLast) {
+            this.spaceRight = this.maxExpansionSpace;
+        }
         const cellRect = this.tableEl.rows[this.splitRowIndex].cells[this.cellResizerParameters.columnIndex].getBoundingClientRect();
         this.startX = this.tableEl.offsetLeft + cellRect.left + cellRect.width - this.resizerBorderSize;
         this.columnPositionChanged(this.startX);
@@ -11274,6 +11273,9 @@ class TableCellHelper {
         if (border.color && border.color !== 'auto') {
             style += ` ${border.color}`;
         }
+        else {
+            style += ` #000`;
+        }
         return style;
     }
     static getBorderLineStyle(lineStyle) {
@@ -11837,11 +11839,12 @@ class NoderTableComponent extends BaseNoderComponent {
         this.borderSize = 1;
         this.startResizing = (cellResizerParameters) => {
             const splitRowIndex = this.getSplitRowIndex(cellResizerParameters.rowIndex);
+            const availableTableSpace = this.getAvailableTableSpace();
             this.resizer.resizerHeight = this.getRowsHeightBetweenSplits(splitRowIndex);
             this.resizer.startY = this.getRowsHeightBefore(splitRowIndex);
             this.resizer.splitRowIndex = splitRowIndex;
             this.resizer.tableInsertIndex = this.insertIndex;
-            this.resizer.onStartResizing(cellResizerParameters);
+            this.resizer.onStartResizing(cellResizerParameters, availableTableSpace);
         };
         this.cellHeightChanged = (rowIndex, cellIndex, height) => {
             const tableRow = this.table.rows[rowIndex];
@@ -12199,6 +12202,13 @@ class NoderTableComponent extends BaseNoderComponent {
         }
         return sum;
     }
+    getAvailableTableSpace() {
+        const parent = this.el.nativeElement.parentElement;
+        if (!parent || !parent.classList.contains('noder-line')) {
+            return 0;
+        }
+        return Math.max(0, parent.clientWidth - this.tableEl.clientWidth);
+    }
     updateCells() {
         const rows = this.rowMatrix.length;
         const cols = rows > 0 ? this.rowMatrix[0].cells.length : 0;