@colijnit/corecomponents_v12 259.1.0 → 259.1.2

package/fesm2015/colijnit-corecomponents_v12.js

@@ -13,6 +13,7 @@ import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRe
 import * as TWEEN from '@tweenjs/tween.js';
 import 'hammerjs';
 import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -5014,7 +5015,7 @@ GridToolbarComponent.decorators = [
       <co-icon *ngIf="showEdit" [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
       <co-icon *ngIf="showEdit" [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
       <co-icon *ngIf="showAdd || showEdit" [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
-<!--      <co-icon *ngIf="showDelete" [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>-->
+      <co-icon *ngIf="showDelete" [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None
@@ -8093,146 +8094,6 @@ var FileTypeInternal;
     FileTypeInternal[FileTypeInternal["Undefined"] = 8] = "Undefined";
 })(FileTypeInternal || (FileTypeInternal = {}));
 
-// DOM_BESTANDSSOORT
-var FileType;
-(function (FileType) {
-    // DOC: Document
-    FileType["Document"] = "DOC";
-    // IMG: Afbeelding
-    FileType["Image"] = "IMG";
-    // SDWEB: Digitale handtekening
-    FileType["DigitalSignature"] = "SDWEB";
-})(FileType || (FileType = {}));
-
-var CoDocumentImageDisplayKind;
-(function (CoDocumentImageDisplayKind) {
-    CoDocumentImageDisplayKind["NormalImage"] = "N";
-    CoDocumentImageDisplayKind["LayeredImage"] = "L";
-    CoDocumentImageDisplayKind["Avatar"] = "A";
-})(CoDocumentImageDisplayKind || (CoDocumentImageDisplayKind = {}));
-
-var ObjectRightType;
-(function (ObjectRightType) {
-    ObjectRightType[ObjectRightType["NoAccess"] = 0] = "NoAccess";
-    ObjectRightType[ObjectRightType["ReadOnly"] = 1] = "ReadOnly";
-    ObjectRightType[ObjectRightType["ReadWrite"] = 2] = "ReadWrite";
-})(ObjectRightType || (ObjectRightType = {}));
-
-// See DocumentDTO.
-class CoDocument {
-    constructor() {
-        // @ComplexArray(CoDocumentRight)
-        this.rights = [];
-        this.retailFormulas = [];
-        //
-        // @NoDbField()
-        // @ComplexField(Subject)
-        this.documentBodyChange = new Subject();
-    }
-    set documentId(value) {
-        this._documentId = value;
-        // this._idObject.docId = value;
-    }
-    get documentId() {
-        return this._documentId;
-    }
-    set documentBody(documentBody) {
-        const prev = this._documentBody;
-        this._documentBody = documentBody;
-        if (prev !== this._documentBody) {
-            this.documentBodyChange.next(this._documentBody);
-        }
-    }
-    get documentBody() {
-        return this._documentBody;
-    }
-    // @NoDbField()
-    // public idForLink: number;
-    // The internal file type of this document (the MimeType iOneJS uses internally)
-    get fileTypeInternal() {
-        if (!this._fileTypeInternal) {
-            const fileType = FileUtils.FileNameToFileTypeInternal(this.fileName);
-            if (fileType) {
-                this._fileTypeInternal = fileType;
-            }
-        }
-        return this._fileTypeInternal;
-    }
-    /**
-     * The mimetype of this document: uses database-fetched this.mimeType, or calculates / guesses the mime type of the document
-     * if that was not set.
-     */
-    get mimeTypeInternal() {
-        if (this._mimeTypeInternal) {
-            return this._mimeTypeInternal;
-        }
-        else {
-            this._initMimetypeInternal();
-            return this._mimeTypeInternal;
-        }
-    }
-    set mimeTypeInternal(value) {
-        this._mimeTypeInternal = value;
-    }
-    // Gives either the document-(prio) or the thumbnail body. Or undefined if not exist.
-    get bodyAsDataUri() {
-        if (this._documentBody) {
-            return this.documentBodyAsDataUri;
-        }
-        else if (this.thumbnailBody) {
-            return this.thumbnailBodyAsDataUri;
-        }
-    }
-    // The body of this document as a data uri. The data uri also contains the mimetype in its string, and the fact that it's base64.
-    get documentBodyAsDataUri() {
-        try {
-            return FileUtils.DocumentBodyToDataUri(this.documentBody, this.mimeTypeInternal);
-        }
-        catch (error) {
-            return "";
-        }
-    }
-    // The Thumbnailbody of this document as a data uri. The data uri also contains the mimetype in its string, and the fact that it's base64.
-    get thumbnailBodyAsDataUri() {
-        try {
-            return FileUtils.DocumentBodyToDataUri(this.thumbnailBody, this.mimeTypeInternal);
-        }
-        catch (error) {
-            return "";
-        }
-    }
-    get isAvatar() {
-        return this.imageDisplayKind === CoDocumentImageDisplayKind.Avatar;
-    }
-    //
-    // @NoDbField()
-    // private _idObject: any = {};
-    get readonly() {
-        return this.rightLevel === ObjectRightType.ReadOnly;
-    }
-    getId() {
-        return this.documentId;
-    }
-    // Returns whether this is an image document or not.
-    isImageDocument() {
-        return (this.fileTypeInternal === FileTypeInternal.Image);
-    }
-    // @BoSerializerStep()
-    preventOverridingThumbnailToEmpty() {
-        if (!this.thumbnailBody) {
-            this.thumbnailBody = this._documentBody;
-        }
-    }
-    // POSTCONDITION: this._mimeTypeInternal contains, to our best abilities, the true mimeType of this document, a-la "image/jpg"
-    _initMimetypeInternal() {
-        // if no fileType, default to FileType.Image for internal mimetype initialization
-        if ((this.fileType === FileType.Image || !this.fileType) && this.fileName) {
-            const fileExtension = this.fileName.substr(this.fileName.lastIndexOf(".") + 1);
-            this._mimeTypeInternal = "image/" + fileExtension;
-        }
-    }
-}
-
 // for refcode CV_DOCUMENTATIE.DOC_TYPE
 var CoDocumentType;
 (function (CoDocumentType) {
@@ -8244,6 +8105,17 @@ var CoDocumentType;
     CoDocumentType["SaveAsLinkOnDefaultLocation"] = "LW";
 })(CoDocumentType || (CoDocumentType = {}));
 
+// DOM_BESTANDSSOORT
+var FileType;
+(function (FileType) {
+    // DOC: Document
+    FileType["Document"] = "DOC";
+    // IMG: Afbeelding
+    FileType["Image"] = "IMG";
+    // SDWEB: Digitale handtekening
+    FileType["DigitalSignature"] = "SDWEB";
+})(FileType || (FileType = {}));
+
 const MaxUploadSize = 3145728; // 3Mb
 // @dynamic
 class FileUtils {
@@ -9620,6 +9492,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         this.showGridSettings = false;
         this.rowsPerPage = 50;
         this.showColumnSort = false;
+        this.showRowButtons = false;
         this.editing = false;
         this.isSettingsMenuOpen = false;
         this.editRowIndex = -1;
@@ -9698,26 +9571,37 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.inlineEdit) {
                 const valid = this.validateAndSave();
-                // this._detectChanges();
                 if (valid) {
-                    this.data.push({});
+                    this._newRowReference = {};
+                    this.data.push(this._newRowReference);
                     this._detectChanges();
                     this._newRow = true;
                     this.editing = true;
                     if (this.rowsPerPage && this.data.length > this.rowsPerPage) {
-                        // navigate to the last page to the new row
+                        // navigate to last page
                         this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
-                        // select new row
-                        const absoluteIndex = this.data.length - 1;
-                        this.selectedRowIndex = this.rowsPerPage ? (absoluteIndex - ((this.currentPage - 1) * this.rowsPerPage)) : absoluteIndex;
-                        this.editRow(null);
+                        const relativeIndex = (this.data.length - 1) % this.rowsPerPage;
+                        this.selectedRowIndex = relativeIndex;
+                        this.editRowIndex = relativeIndex;
+                        // store reference
+                        this.rowToEdit = this._newRowReference;
+                        this.editCellIndex = yield this._nextAvailableCellToEdit(true);
+                        setTimeout(() => {
+                            var _a, _b;
+                            const el = (_b = (_a = this.rowElements) === null || _a === void 0 ? void 0 : _a.last) === null || _b === void 0 ? void 0 : _b.nativeElement;
+                            if (el) {
+                                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            }
+                        }, 200);
+                        // reset reference to the new row after editCellIndex
+                        this.rowToEdit = this._newRowReference;
                     }
                     else {
                         this.editRowIndex = this.data.length - 1;
-                        this.rowToEdit = this.data[this.editRowIndex];
+                        this.rowToEdit = this._newRowReference;
                         this.editCellIndex = yield this._nextAvailableCellToEdit(true);
-                        this._detectChanges();
                     }
+                    this._detectChanges();
                 }
             }
             else {
@@ -9751,22 +9635,41 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         this._detectChanges();
     }
     removeRow() {
-        this.deleteRow.next(this.data[this.selectedRowIndex]);
+        let absoluteIndex = this.selectedRowIndex;
+        if (this.rowsPerPage) {
+            absoluteIndex = (this.currentPage - 1) * this.rowsPerPage + this.selectedRowIndex;
+        }
+        this.deleteRow.next(this.data[absoluteIndex]);
+        if (this.currentPage !== 1) {
+            this.currentPage = 1;
+            this.selectedRowIndex = -1;
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        this._detectChanges();
     }
-    handleClickRow(event, index, row) {
-        setTimeout(() => {
-            if (this._doubleClicked) {
-                return;
-            }
-            this.selectTheRow(index);
-        }, 200);
+    handleClickRow(event, index) {
+        if (this.inlineEdit && this.showRowButtons && !this.editing) {
+            this.editing = false;
+        }
+        else {
+            setTimeout(() => {
+                if (this._doubleClicked) {
+                    return;
+                }
+                this.selectTheRow(index);
+                if (this.inlineEdit && !this.showRowButtons) {
+                    this.editRow(event, true, index);
+                }
+            }, 200);
+        }
     }
     selectTheRow(index, emit = true) {
         if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
             this.selectedRowIndex = index;
-        }
-        if (emit) {
-            this.selectRow.next(this.data[this.selectedRowIndex]);
+            const absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
+            if (emit) {
+                this.selectRow.next(this.data[absoluteIndex]);
+            }
         }
         this._detectChanges();
     }
@@ -9784,7 +9687,7 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                 this._doubleClicked = true;
                 this.dblClickRow.next(this.data[index]);
                 this.selectTheRow(index, false);
-                if (this.inlineEdit) {
+                if (this.inlineEdit && !this.showRowButtons) {
                     this.editRow(event);
                 }
             }
@@ -9794,12 +9697,12 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
     editRow(event, selectCell = true, rowIndex) {
         return __awaiter(this, void 0, void 0, function* () {
             if (rowIndex !== undefined) {
-                this.selectTheRow(rowIndex, false);
+                this.selectTheRow(rowIndex);
             }
+            this.editing = true;
             this.editRowIndex = this.selectedRowIndex;
             this.rowToEdit = this.data[this.editRowIndex];
-            this.editing = true;
-            if (selectCell) {
+            if (this.showRowButtons && this.inlineEdit && selectCell) {
                 this.editCellIndex = yield this._nextAvailableCellToEdit(true);
             }
             this._detectChanges();
@@ -9812,12 +9715,10 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
                     this.selectedRowIndex = -1;
                     return;
                 }
-                this.selectTheRow(rowIndex, false);
                 if (this.inlineEdit) {
                     this.editRowIndex = rowIndex;
                     this.editCellIndex = cellIndex;
                     this.editing = true;
-                    this.editRow(event, false);
                 }
             }
             else {
@@ -10065,9 +9966,26 @@ class SimpleGridComponent extends BaseSimpleGridComponent {
         });
     }
     _saveRow(stopediting = true) {
-        // emit saveEvent
-        if (this.rowToEdit) {
-            this.saveRow.next(this.rowToEdit);
+        if (this._newRow) {
+            this.saveRow.next(this._newRowReference);
+            this._newRowReference = null; // clear
+        }
+        else {
+            let index = -1; // existing row
+            if (this.rowsPerPage) {
+                index = (this.currentPage - 1) * this.rowsPerPage + this.editRowIndex;
+            }
+            else {
+                index = this.editRowIndex;
+            }
+            if (index >= 0 && index < this.data.length) {
+                this.saveRow.next(this.data[index]);
+            }
+        }
+        if (this.currentPage !== 1) {
+            this.currentPage = 1;
+            this.selectedRowIndex = -1;
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         this._newRow = false;
         if (stopediting) {
@@ -10103,175 +10021,176 @@ SimpleGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-simple-grid',
                 template: `
-      <co-grid-toolbar
-              *ngIf="showToolbar" [class.right]="rightToolbar"
-              [showEdit]="showEdit"
-              [showAdd]="showAdd"
-              [showDelete]="showDelete"
-              [deleteEnabled]="selectedRowIndex > -1"
-              (addClick)="addNewRow()"
-              (editClick)="editRow($event)"
-              (saveClick)="validateAndSave()"
-              (cancelClick)="cancelEditRow()"
-              (deleteClick)="removeRow()">
-      </co-grid-toolbar>
+    <co-grid-toolbar
+      *ngIf="showToolbar" [class.right]="rightToolbar"
+      [showEdit]="showEdit"
+      [showAdd]="showAdd"
+      [showDelete]="showDelete"
+      [deleteEnabled]="selectedRowIndex > -1"
+      (addClick)="addNewRow()"
+      (editClick)="editRow($event)"
+      (saveClick)="validateAndSave()"
+      (cancelClick)="cancelEditRow()"
+      (deleteClick)="removeRow()">
+    </co-grid-toolbar>
 
-      <table
-              id="simple-grid-table"
-              class="simple-grid-table"
-              [clickOutside]="editing"
-              (clickOutside)="handleClickOutsideRow()">
-          <colgroup>
-              <col
-                      *ngFor="let column of headerColumnsCopy; let index = index"
-                      [class.simple-grid-column-auto-fit]="column.autoFit"
-                      [style.width.px]="column.width"
-                      [style.min-width.px]="MIN_COLUMN_WIDTH">
-          </colgroup>
-          <thead>
-          <tr>
-              <th
-                      scope="col"
-                      #headerCell
-                      class="simple-grid-column-header"
-                      *ngFor="let column of headerColumnsCopy; let index = index">
-                  <div
-                          class="simple-grid-column-header-wrapper"
-                          [class.resizable]="resizable"
-                          [class.selected]="column.isSelected"
-                          [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-                      <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
-                          <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
-                      </ng-container>
-                      <ng-template #noHeaderTemplate>
-                          <div
-                                  class="simple-grid-column-header-label"
-                                  [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
-                                  [class.with-menu]="showGridSettings"
-                                  [class.with-sort]="showColumnSort"
-                                  [textContent]="column.headerText || '&nbsp;'"
-                                  (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
-                          </div>
+    <table
+      id="simple-grid-table"
+      class="simple-grid-table"
+      [clickOutside]="editing"
+      (clickOutside)="handleClickOutsideRow()">
+      <colgroup>
+        <col
+          *ngFor="let column of headerColumnsCopy; let index = index"
+          [class.simple-grid-column-auto-fit]="column.autoFit"
+          [style.width.px]="column.width"
+          [style.min-width.px]="MIN_COLUMN_WIDTH">
+      </colgroup>
+      <thead>
+      <tr>
+        <th
+          scope="col"
+          #headerCell
+          class="simple-grid-column-header"
+          *ngFor="let column of headerColumnsCopy; let index = index">
+          <div
+            class="simple-grid-column-header-wrapper"
+            [class.resizable]="resizable"
+            [class.selected]="column.isSelected"
+            [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+            <ng-container *ngIf="column.headerTemplate; else noHeaderTemplate">
+              <ng-container [ngTemplateOutlet]="column.headerTemplate"></ng-container>
+            </ng-container>
+            <ng-template #noHeaderTemplate>
+              <div
+                class="simple-grid-column-header-label"
+                [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
+                [class.with-menu]="showGridSettings"
+                [class.with-sort]="showColumnSort"
+                [textContent]="column.headerText || '&nbsp;'"
+                (click)="showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)">
+              </div>
 
-                          <div class="sort-column" *ngIf="showColumnSort">
-                              <co-button
-                                      (click)="sortColumn(column, column?.field)"
-                                      [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
-                              </co-button>
-                          </div>
+              <div class="sort-column" *ngIf="showColumnSort">
+                <co-button
+                  (click)="sortColumn(column, column?.field)"
+                  [iconData]="icons.getIcon(Icons.ArrowUpArrowDown)">
+                </co-button>
+              </div>
 
-                          <div class="column-menu" *ngIf="column.isSelected">
-                              <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
-                              <ul>
-                                  <li (click)="hideColumn(column)">Hide Column</li>
-                                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
-                              </ul>
-                          </div>
-                      </ng-template>
-                      <div
-                              *ngIf="resizable && column.resizable"
-                              class="simple-grid-column-sizer"
-                              (mousedown)="handleSizerMouseDown($event, column)">
-                      </div>
-                  </div>
-              </th>
-          </tr>
+              <div class="column-menu" *ngIf="column.isSelected">
+                <h3 [textContent]="'COLUMN_OPTIONS' | coreLocalize"></h3>
+                <ul>
+                  <li (click)="hideColumn(column)">Hide Column</li>
+                  <li (click)="sortColumn(column, column.field)">Sort Column</li>
+                </ul>
+              </div>
+            </ng-template>
+            <div
+              *ngIf="resizable && column.resizable"
+              class="simple-grid-column-sizer"
+              (mousedown)="handleSizerMouseDown($event, column)">
+            </div>
+          </div>
+        </th>
+      </tr>
 
-          <div *ngIf="showGridSettings" class="grid-settings">
-              <co-button
-                      [class.selected]="isSettingsMenuOpen"
-                      [iconData]="icons.getIcon(Icons.CogWheels)"
-                      (click)="toggleSettingsMenu()">
-              </co-button>
+      <div *ngIf="showGridSettings" class="grid-settings">
+        <co-button
+          [class.selected]="isSettingsMenuOpen"
+          [iconData]="icons.getIcon(Icons.CogWheels)"
+          (click)="toggleSettingsMenu()">
+        </co-button>
 
-              <div class="settings-menu" *ngIf="isSettingsMenuOpen">
-                  <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
-                  <ul>
-                      <li (click)="exportToExcel()">Export to Excel</li>
-                      <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
-                          Show All Columns
-                      </li>
-                  </ul>
+        <div class="settings-menu" *ngIf="isSettingsMenuOpen">
+          <h3 [textContent]="'GRID_OPTIONS' | coreLocalize"></h3>
+          <ul>
+            <li (click)="exportToExcel()">Export to Excel</li>
+            <li *ngIf="headerColumnsCopy.length !== headerColumns.length" (click)="showAllColumns()">
+              Show All Columns
+            </li>
+          </ul>
+        </div>
+      </div>
+      </thead>
+      <tbody
+        #dropList cdkDropList cdkDropListOrientation="vertical"
+        class="simple-grid-drag-drop-list"
+        [cdkDropListDisabled]="!dragDropEnabled || editing"
+        [cdkDropListData]="data"
+        [cdkDropListEnterPredicate]="handleCanDragDrop"
+        (cdkDropListDropped)="handleDrop($event)">
+      <co-form class="simple-grid-row-form">
+        <tr
+          #rowElement
+          class="simple-grid-row"
+          [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
+          [class.disabled]="getIsRowDisabled(rowIndex)"
+          [class.editing]="rowIndex === editRowIndex"
+          *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
+          cdkDrag
+          (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
+          (visibilityChange)="rowVisible.next(row)"
+          (mouseenter)="hoveredRowIndex = rowIndex"
+          (mouseleave)="hoveredRowIndex = -1"
+        >
+          <ng-container *ngIf="isSingleColumnRow(row)">
+            <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
+              <co-simple-grid-cell
+                [column]="columns[singleColumnIndex(row)]"
+                [row]="row"
+                [editMode]="false">
+              </co-simple-grid-cell>
+            </td>
+          </ng-container>
+          <ng-container *ngIf="!isSingleColumnRow(row)">
+            <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
+              <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
+                <co-simple-grid-cell
+                  [column]="column"
+                  [row]="row"
+                  [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
+                  [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
+                  (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
+                </co-simple-grid-cell>
+                <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
+              </td>
+            </ng-container>
+            <ng-container *ngIf="inlineEdit && showRowButtons">
+              <div class="icons-container" *ngIf="!editing">
+                <co-icon class="icon-item icon-edit"
+                         [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
+                <co-icon class="icon-item icon-delete"
+                         [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
+                         (click)="selectTheRow(rowIndex); removeRow();"></co-icon>
               </div>
-          </div>
-          </thead>
-          <tbody
-                  #dropList cdkDropList cdkDropListOrientation="vertical"
-                  class="simple-grid-drag-drop-list"
-                  [cdkDropListDisabled]="!dragDropEnabled || editing"
-                  [cdkDropListData]="data"
-                  [cdkDropListEnterPredicate]="handleCanDragDrop"
-                  (cdkDropListDropped)="handleDrop($event)">
-          <co-form class="simple-grid-row-form">
-              <tr
-                      class="simple-grid-row"
-                      [class.selected]="rowIndex === selectedRowIndex && !editing" observeVisibility
-                      [class.disabled]="getIsRowDisabled(rowIndex)"
-                      [class.editing]="rowIndex === editRowIndex"
-                      *ngFor="let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index"
-                      cdkDrag
-                      (click)="handleClickRow($event, rowIndex, row)" (dblclick)="handleDblClickRow($event, rowIndex, row)"
-                      (visibilityChange)="rowVisible.next(row)"
-                      (mouseenter)="hoveredRowIndex = rowIndex"
-                      (mouseleave)="hoveredRowIndex = -1"
-              >
-                  <ng-container *ngIf="isSingleColumnRow(row)">
-                      <td class="simple-grid-single-column-cell" [attr.colspan]="headerColumnsCopy.length">
-                          <co-simple-grid-cell
-                                  [column]="columns[singleColumnIndex(row)]"
-                                  [row]="row"
-                                  [editMode]="false">
-                          </co-simple-grid-cell>
-                      </td>
-                  </ng-container>
-                  <ng-container *ngIf="!isSingleColumnRow(row)">
-                      <ng-container *ngFor="let column of headerColumnsCopy; let columnIndex = index">
-                          <td class="simple-grid-column-cell" *ngIf="columnIndex !== singleColumnIndex(row)">
-                              <co-simple-grid-cell
-                                      [column]="column"
-                                      [row]="row"
-                                      [editMode]="inlineEdit && editing && rowIndex === editRowIndex"
-                                      [fieldEditMode]="editCellIndex === columnIndex && rowIndex === editRowIndex"
-                                      (cellClick)="handleCellClick($event, row, rowIndex, columnIndex)">
-                              </co-simple-grid-cell>
-                              <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
-                          </td>
-                      </ng-container>
-                      <ng-container *ngIf="inlineEdit">
-                          <div class="icons-container" *ngIf="!editing">
-                              <co-icon class="icon-item icon-edit"
-                                       [iconData]="icons.getIcon(Icons.PenToSquareSolid)" *ngIf="hoveredRowIndex === rowIndex"
-                                       (click)="editRow($event, true, rowIndex); $event.stopPropagation()"></co-icon>
-                              <co-icon class="icon-item icon-delete"
-                                       [iconData]="icons.getIcon(Icons.TrashBin)" *ngIf="hoveredRowIndex === rowIndex"
-                                       (click)="removeRow()"></co-icon>
-                          </div>
-                          <div class="icons-container">
-                              <co-button class="save-button"
-                                         *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                                         [iconData]="icons.getIcon(Icons.CheckDuotone)"
-                                         (click)="validateAndSave(); $event.stopPropagation()"></co-button>
-                              <co-button class="close-button"
-                                         *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
-                                         [iconData]="icons.getIcon(Icons.CrossSkinny)"
-                                         (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
-                          </div>
-                      </ng-container>
-                  </ng-container>
-              </tr>
-          </co-form>
-          </tbody>
-      </table>
-      <co-pagination-bar
-              *ngIf="data?.length > rowsPerPage" class="pagination-bar"
-              [itemsPerPage]="rowsPerPage"
-              [currentPage]="currentPage"
-              [totalItems]="data.length"
-              [autoHide]="true"
-              (previousClick)="goToPreviousPage()"
-              (nextClick)="goToNextPage()"
-              (pageClick)="setCurrentPage($event)">
-      </co-pagination-bar>
+              <div class="icons-container">
+                <co-button class="save-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CheckDuotone)"
+                           (click)="validateAndSave(); $event.stopPropagation()"></co-button>
+                <co-button class="close-button"
+                           *ngIf="editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))"
+                           [iconData]="icons.getIcon(Icons.CrossSkinny)"
+                           (click)="cancelEditRow(); $event.stopPropagation() "></co-button>
+              </div>
+            </ng-container>
+          </ng-container>
+        </tr>
+      </co-form>
+      </tbody>
+    </table>
+    <co-pagination-bar
+      *ngIf="data?.length > rowsPerPage" class="pagination-bar"
+      [itemsPerPage]="rowsPerPage"
+      [currentPage]="currentPage"
+      [totalItems]="data.length"
+      [autoHide]="true"
+      (previousClick)="goToPreviousPage()"
+      (nextClick)="goToNextPage()"
+      (pageClick)="setCurrentPage($event)">
+    </co-pagination-bar>
   `,
                 providers: [FormMasterService],
                 changeDetection: ChangeDetectionStrategy.OnPush,
@@ -10286,6 +10205,7 @@ SimpleGridComponent.ctorParameters = () => [
 ];
 SimpleGridComponent.propDecorators = {
     headerCells: [{ type: ViewChildren, args: ['headerCell',] }],
+    rowElements: [{ type: ViewChildren, args: ['rowElement',] }],
     showAdd: [{ type: Input }],
     showDelete: [{ type: Input }],
     editOnCellClick: [{ type: Input }],
@@ -10294,6 +10214,7 @@ SimpleGridComponent.propDecorators = {
     rowsPerPage: [{ type: Input }],
     rowDisabledFn: [{ type: Input }],
     showColumnSort: [{ type: Input }],
+    showRowButtons: [{ type: Input }],
     canRowBeEdittedFn: [{ type: Input }],
     showClass: [{ type: HostBinding, args: ['class.co-simple-grid',] }],
     handleKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]