@colijnit/corecomponents_v12 300.1.4 → 300.1.5

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -11942,35 +11942,17 @@ class SimpleGridCellComponent {
     _changeDetector;
     _injector;
     _formComponent;
-    get editMode() {
-        return this._editMode;
-    }
-    set editMode(value) {
-        this._editMode = value;
-    }
+    editMode;
     defaultTextAlign = ColumnAlign.Left;
-    set editTemplateContent(template) {
-        if (template) {
-            this._editTemplate = template;
-            this._setFocusComponent();
-        }
-    }
-    set noEditTemplateContent(template) {
-        if (template) {
-            this._template = template;
-            this._setFocusComponent();
-        }
-    }
-    set noTemplateContent(template) {
-        if (template) {
-            this._inputTemplate = template;
+    set cellFieldContent(element) {
+        if (element) {
+            this._cellField = element;
             this._setFocusComponent();
         }
     }
     column;
     row;
     columnInjector;
-    _editMode = false;
     set fieldEditMode(value) {
         this._fieldEditMode = value;
         this._setFocusComponent();
@@ -11989,9 +11971,7 @@ class SimpleGridCellComponent {
     }
     _fieldEditMode = false;
     _focused = false;
-    _editTemplate;
-    _template;
-    _inputTemplate;
+    _cellField;
     constructor(_changeDetector, _injector, _formComponent) {
         this._changeDetector = _changeDetector;
         this._injector = _injector;
@@ -12006,7 +11986,7 @@ class SimpleGridCellComponent {
         });
     }
     _setFocusComponent() {
-        if (this._editMode && this.fieldEditMode) {
+        if (this.editMode && this.fieldEditMode) {
             const element = this._getElement();
             if (element) {
                 const focusEvent = this._createNewEvent(element, 'focus');
@@ -12050,22 +12030,10 @@ class SimpleGridCellComponent {
         return event;
     }
     _getElement() {
-        let templ;
-        if (this._editTemplate) {
-            templ = this._editTemplate;
-        }
-        else if (this._template) {
-            templ = this._template;
-        }
-        else {
-            templ = this._inputTemplate;
-        }
-        if (templ) {
-            if (templ && templ.elementRef) {
-                const inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
-                if (inputElement) {
-                    return inputElement;
-                }
+        if (this._cellField && this._cellField.nativeElement) {
+            const inputElement = this._getFirstFormInput(this._cellField.nativeElement);
+            if (inputElement) {
+                return inputElement;
             }
         }
     }
@@ -12073,12 +12041,12 @@ class SimpleGridCellComponent {
         this._changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SimpleGridCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: FormComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SimpleGridCellComponent, isStandalone: false, selector: "co-simple-grid-cell", inputs: { editMode: "editMode", column: "column", row: "row", fieldEditMode: "fieldEditMode" }, outputs: { cellClick: "cellClick" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.co-simple-grid-cell": "this.showClass" } }, viewQueries: [{ propertyName: "editTemplateContent", first: true, predicate: ["editTemplate"], descendants: true, read: BaseInputComponent }, { propertyName: "noEditTemplateContent", first: true, predicate: ["noEditTemplate"], descendants: true }, { propertyName: "noTemplateContent", first: true, predicate: ["noTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SimpleGridCellComponent, isStandalone: false, selector: "co-simple-grid-cell", inputs: { editMode: "editMode", column: "column", row: "row", fieldEditMode: "fieldEditMode" }, outputs: { cellClick: "cellClick" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.co-simple-grid-cell": "this.showClass" } }, viewQueries: [{ propertyName: "cellFieldContent", first: true, predicate: ["cellField"], descendants: true }], ngImport: i0, template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
         @if (editMode) {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.editTemplate) {
-              <ng-container #editTemplate
+              <ng-container
                 [ngTemplateOutlet]="column.editTemplate"
                 [ngTemplateOutletInjector]="columnInjector"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12092,7 +12060,7 @@ class SimpleGridCellComponent {
             }
           </div>
         } @else {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.template) {
               <ng-container [ngTemplateOutlet]="column.template"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12111,9 +12079,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
       <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
         @if (editMode) {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.editTemplate) {
-              <ng-container #editTemplate
+              <ng-container
                 [ngTemplateOutlet]="column.editTemplate"
                 [ngTemplateOutletInjector]="columnInjector"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12127,7 +12095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }
           </div>
         } @else {
-          <div class="simple-grid-column-cell-field">
+          <div #cellField class="simple-grid-column-cell-field">
             @if (column.template) {
               <ng-container [ngTemplateOutlet]="column.template"
               [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
@@ -12145,15 +12113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     type: Optional
                 }] }], propDecorators: { editMode: [{
                 type: Input
-            }], editTemplateContent: [{
+            }], cellFieldContent: [{
                 type: ViewChild,
-                args: ["editTemplate", { read: BaseInputComponent }]
-            }], noEditTemplateContent: [{
-                type: ViewChild,
-                args: ["noEditTemplate"]
-            }], noTemplateContent: [{
-                type: ViewChild,
-                args: ["noTemplate"]
+                args: ["cellField"]
             }], column: [{
                 type: Input
             }], row: [{
@@ -12278,9 +12240,11 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
     defaultTextAlign = ColumnAlign.Left;
     scrollDirections = ScrollDirection;
     set headerCells(cells) {
+        // The header cells are rendered from headerColumnsCopy, so the elementRefs
+        // have to be handed back to that same collection.
         const headerElements = cells.toArray();
-        for (let i = 0; i < headerElements.length; i++) {
-            this.columns[i].elementRef = headerElements[i];
+        for (let i = 0; i < headerElements.length && i < this.headerColumnsCopy.length; i++) {
+            this.headerColumnsCopy[i].elementRef = headerElements[i];
         }
     }
     rowElements;
@@ -12315,8 +12279,11 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                 .then((index) => {
                 this.editCellIndex = index;
                 this.changeDetection.markForCheck();
+                this._detectChanges();
+            })
+                .catch(() => {
+                // row change was blocked by validation, keep the current cell in edit mode
             });
-            this._detectChanges();
         }
         if (event.code === 'Escape') {
             this.cancelEditRow();
@@ -12719,6 +12686,9 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         }, 500);
     }
     /**
+     * Cell indexes are expressed in `headerColumnsCopy` space, because that is the
+     * collection the rows are rendered from. Using `columns` here would drift as soon
+     * as a column is hidden or marked as single column.
      *
      * @param next; Move to next or previous cell
      * @param start; Start from cellindex
@@ -12726,9 +12696,16 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
      */
     _nextAvailableCellToEdit(next, start = -1) {
         return new Promise((resolve, reject) => {
-            const numEditableColumns = this.columns.filter(c => !c.readonly).length;
             const wantedIndex = start + (next ? 1 : -1);
-            if (wantedIndex >= numEditableColumns) {
+            const cellIndex = next
+                ? this._getNextEditCellIndex(Math.max(wantedIndex, 0))
+                : this._getPreviousEditCellIndex(wantedIndex);
+            // Still an editable column left in the current row
+            if (cellIndex > -1) {
+                resolve(cellIndex);
+                return;
+            }
+            if (next) {
                 this._getNextEditRowIndex()
                     .then((index) => {
                     this.editRowIndex = index;
@@ -12738,34 +12715,37 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                     reject();
                 });
             }
-            else if (wantedIndex < 0) {
+            else {
                 this._getPreviousEditRowIndex()
                     .then((index) => {
                     this.editRowIndex = index;
-                    resolve(this._getPreviousEditCellIndex(this.columns.length - 1));
+                    resolve(this._getPreviousEditCellIndex(this.headerColumnsCopy.length - 1));
                 })
                     .catch((e) => {
                     reject();
                 });
             }
-            else {
-                resolve(next ? this._getNextEditCellIndex(start + 1) : this._getPreviousEditCellIndex(start - 1));
-            }
         });
     }
     _getNextEditCellIndex(start) {
-        for (let i = start; i < this.columns.length; i++) {
-            if (!this.columns[i].readonly) {
+        for (let i = start; i < this.headerColumnsCopy.length; i++) {
+            if (this._isCellEditable(i)) {
                 return i;
             }
         }
+        return -1;
     }
     _getPreviousEditCellIndex(start) {
-        for (let i = start; i >= 0; i--) {
-            if (!this.columns[i].readonly) {
+        for (let i = Math.min(start, this.headerColumnsCopy.length - 1); i >= 0; i--) {
+            if (this._isCellEditable(i)) {
                 return i;
             }
         }
+        return -1;
+    }
+    _isCellEditable(cellIndex) {
+        const column = this.headerColumnsCopy[cellIndex];
+        return !!column && !column.readonly;
     }
     _getNextEditRowIndex() {
         return new Promise((resolve, reject) => {