@colijnit/corecomponents_v12 258.1.16 → 258.1.18

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1,7 +1,7 @@
 import { __awaiter, __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { Input, Injectable, NgZone, Component, ViewEncapsulation, HostBinding, ComponentFactoryResolver, ApplicationRef, Injector, EventEmitter, Renderer2, ViewChildren, ElementRef, Output, Directive, ChangeDetectorRef, Optional, ViewChild, ViewContainerRef, HostListener, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, Pipe, ContentChildren, NO_ERRORS_SCHEMA, ContentChild } from '@angular/core';
-import { NgModel, FormGroup, FormsModule } from '@angular/forms';
+import { NgModel, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Subject, merge, fromEvent, BehaviorSubject } from 'rxjs';
 import { DomSanitizer, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
@@ -5014,7 +5014,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
@@ -5423,6 +5423,17 @@ CalendarComponent.propDecorators = {
 };
 
 class InputDatePickerComponent extends BaseInputDatePickerDirective {
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
+        this.formComponent = formComponent;
+        this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
+        super._markAsOnPush();
+    }
     showClass() {
         return true;
     }
@@ -5528,6 +5539,15 @@ InputDatePickerComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+InputDatePickerComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: OverlayService },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
 InputDatePickerComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-input-date',] }]
 };
@@ -6823,7 +6843,8 @@ InputDatePickerModule.decorators = [
                     InputTextModule,
                     CalendarModule,
                     ClickoutsideModule,
-                    OverlayModule
+                    OverlayModule,
+                    ReactiveFormsModule
                 ],
                 schemas: [
                     NO_ERRORS_SCHEMA
@@ -9620,6 +9641,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 +9720,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 +9784,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;
         }
+        const absoluteIndex = this.rowsPerPage ? (this.currentPage - 1) * this.rowsPerPage + index : index;
         if (emit) {
-            this.selectRow.next(this.data[this.selectedRowIndex]);
+            this.selectRow.next(this.data[absoluteIndex]);
         }
         this._detectChanges();
     }
@@ -9784,7 +9836,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 +9846,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 +9864,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 +10115,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 +10170,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 +10354,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 +10363,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'],] }]
@@ -11396,8 +11466,15 @@ ListOfValuesPopupComponent.propDecorators = {
 };
 
 class ListOfValuesComponent extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
+    constructor(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
+        this.formComponent = formComponent;
+        this.changeDetector = changeDetector;
+        this.overlayService = overlayService;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
         this.icons = CoreComponentsIcon;
         this.multiselect = false;
         this.largeCollection = false;
@@ -11411,6 +11488,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         this.filteredCollection = [];
         this.isLoading = false;
         this._collection = [];
+        super._markAsOnPush();
     }
     set model(value) {
         super.model = value;
@@ -11555,7 +11633,7 @@ class ListOfValuesComponent extends BaseInputComponent {
                 }
             }
         }
-        this.model = option;
+        this.setModel(option);
         this.modelChange.emit(this.model);
         this.detectChanges();
     }
@@ -11620,6 +11698,7 @@ ListOfValuesComponent.decorators = [
               [id]="label"
               [model]="multiselect ? selectedModels : selectedModel"
               [placeholder]="label"
+              [myFormInputInstance]="this"
               [readonly]="readonly"
               [disabled]="disabled"
               [required]="required"
@@ -11645,7 +11724,7 @@ ListOfValuesComponent.decorators = [
               </div>
           </ng-container>
       </co-input-text>
-      
+
       <co-input-text
               *ngIf="largeCollection"
               [model]="filterText"
@@ -11656,6 +11735,7 @@ ListOfValuesComponent.decorators = [
               (modelChange)="onModelChange($event)">
       </co-input-text>
       <div *ngIf="isLoading" class="filter-loader"><span></span></div>
+      <input type="hidden" [ngModel]="model">
   `,
                 providers: [
                     OverlayService,
@@ -11667,6 +11747,15 @@ ListOfValuesComponent.decorators = [
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+ListOfValuesComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: OverlayService },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
 ListOfValuesComponent.propDecorators = {
     model: [{ type: Input }],
     parentForOverlay: [{ type: ViewChild, args: ['parentForOverlay', { read: ElementRef },] }],