@colijnit/corecomponents_v12 258.1.16 → 258.1.18

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5532,7 +5532,7 @@
     GridToolbarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-grid-toolbar",
-                    template: "\n    <div class=\"grid-toolbar-wrapper\">\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n<!--      <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"handleDeleteClick()\"></co-icon>-->\n    </div>\n  ",
+                    template: "\n    <div class=\"grid-toolbar-wrapper\">\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"handleDeleteClick()\"></co-icon>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -5952,8 +5952,17 @@
 
     var InputDatePickerComponent = /** @class */ (function (_super) {
         __extends(InputDatePickerComponent, _super);
-        function InputDatePickerComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function InputDatePickerComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            _super.prototype._markAsOnPush.call(_this);
+            return _this;
         }
         InputDatePickerComponent.prototype.showClass = function () {
             return true;
@@ -6043,6 +6052,15 @@
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
+    InputDatePickerComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
+        { type: i0.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: i0.ElementRef }
+    ]; };
     InputDatePickerComponent.propDecorators = {
         showClass: [{ type: i0.HostBinding, args: ['class.co-input-date',] }]
     };
@@ -7314,7 +7332,8 @@
                         InputTextModule,
                         CalendarModule,
                         ClickoutsideModule,
-                        OverlayModule
+                        OverlayModule,
+                        forms.ReactiveFormsModule
                     ],
                     schemas: [
                         i0.NO_ERRORS_SCHEMA
@@ -10244,6 +10263,7 @@
             _this.showGridSettings = false;
             _this.rowsPerPage = 50;
             _this.showColumnSort = false;
+            _this.showRowButtons = false;
             _this.editing = false;
             _this.isSettingsMenuOpen = false;
             _this.editRowIndex = -1;
@@ -10305,13 +10325,13 @@
         SimpleGridComponent.prototype.isRowDisabled = function (row, index) {
             return __awaiter(this, void 0, void 0, function () {
                 var disabled, idxRow;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!(this.rowDisabledFn && (typeof this.rowDisabledFn === 'function'))) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.rowDisabledFn.call(this, row)];
                         case 1:
-                            disabled = _a.sent();
+                            disabled = _c.sent();
                             idxRow = this.disabledRows.indexOf(index);
                             if (disabled) {
                                 if (idxRow < 0) {
@@ -10331,38 +10351,57 @@
         };
         SimpleGridComponent.prototype.addNewRow = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var valid, absoluteIndex, _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var valid, relativeIndex, _c, _d;
+                var _this = this;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
-                            if (!this.inlineEdit) return [3 /*break*/, 4];
+                            if (!this.inlineEdit) return [3 /*break*/, 6];
                             valid = this.validateAndSave();
-                            if (!valid) return [3 /*break*/, 3];
-                            this.data.push({});
+                            if (!valid) return [3 /*break*/, 5];
+                            this._newRowReference = {};
+                            this.data.push(this._newRowReference);
                             this._detectChanges();
                             this._newRow = true;
                             this.editing = true;
-                            if (!(this.rowsPerPage && this.data.length > this.rowsPerPage)) return [3 /*break*/, 1];
-                            // navigate to the last page to the new row
+                            if (!(this.rowsPerPage && this.data.length > this.rowsPerPage)) return [3 /*break*/, 2];
+                            // navigate to last page
                             this.currentPage = Math.ceil(this.data.length / this.rowsPerPage);
-                            absoluteIndex = this.data.length - 1;
-                            this.selectedRowIndex = this.rowsPerPage ? (absoluteIndex - ((this.currentPage - 1) * this.rowsPerPage)) : absoluteIndex;
-                            this.editRow(null);
-                            return [3 /*break*/, 3];
+                            relativeIndex = (this.data.length - 1) % this.rowsPerPage;
+                            this.selectedRowIndex = relativeIndex;
+                            this.editRowIndex = relativeIndex;
+                            // store reference
+                            this.rowToEdit = this._newRowReference;
+                            _c = this;
+                            return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
                         case 1:
+                            _c.editCellIndex = _e.sent();
+                            setTimeout(function () {
+                                var _a, _b;
+                                var 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;
+                            return [3 /*break*/, 4];
+                        case 2:
                             this.editRowIndex = this.data.length - 1;
-                            this.rowToEdit = this.data[this.editRowIndex];
-                            _a = this;
+                            this.rowToEdit = this._newRowReference;
+                            _d = this;
                             return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
-                        case 2:
-                            _a.editCellIndex = _b.sent();
-                            this._detectChanges();
-                            _b.label = 3;
-                        case 3: return [3 /*break*/, 5];
+                        case 3:
+                            _d.editCellIndex = _e.sent();
+                            _e.label = 4;
                         case 4:
+                            this._detectChanges();
+                            _e.label = 5;
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
                             this.addRow.next();
-                            _b.label = 5;
-                        case 5: return [2 /*return*/];
+                            _e.label = 7;
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
@@ -10394,35 +10433,54 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype.removeRow = function () {
-            this.deleteRow.next(this.data[this.selectedRowIndex]);
+            var 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();
         };
-        SimpleGridComponent.prototype.handleClickRow = function (event, index, row) {
+        SimpleGridComponent.prototype.handleClickRow = function (event, index) {
             var _this = this;
-            setTimeout(function () {
-                if (_this._doubleClicked) {
-                    return;
-                }
-                _this.selectTheRow(index);
-            }, 200);
+            if (this.inlineEdit && this.showRowButtons && !this.editing) {
+                this.editing = false;
+            }
+            else {
+                setTimeout(function () {
+                    if (_this._doubleClicked) {
+                        return;
+                    }
+                    _this.selectTheRow(index);
+                    if (_this.inlineEdit && !_this.showRowButtons) {
+                        _this.editRow(event, true, index);
+                    }
+                }, 200);
+            }
         };
         SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
             if (emit === void 0) { emit = true; }
             if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
                 this.selectedRowIndex = index;
             }
+            var 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();
         };
         SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
             return __awaiter(this, void 0, void 0, function () {
                 var canEdit;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0: return [4 /*yield*/, this.isRowDisabled(row, index)];
                         case 1:
-                            if (_a.sent()) {
+                            if (_c.sent()) {
                                 this.selectedRowIndex = -1;
                                 return [2 /*return*/];
                             }
@@ -10430,14 +10488,14 @@
                             if (!(this.canRowBeEdittedFn && typeof this.canRowBeEdittedFn === 'function')) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.canRowBeEdittedFn.call(this, row)];
                         case 2:
-                            canEdit = _a.sent();
-                            _a.label = 3;
+                            canEdit = _c.sent();
+                            _c.label = 3;
                         case 3:
                             if (canEdit) {
                                 this._doubleClicked = true;
                                 this.dblClickRow.next(this.data[index]);
                                 this.selectTheRow(index, false);
-                                if (this.inlineEdit) {
+                                if (this.inlineEdit && !this.showRowButtons) {
                                     this.editRow(event);
                                 }
                             }
@@ -10450,22 +10508,22 @@
         SimpleGridComponent.prototype.editRow = function (event, selectCell, rowIndex) {
             if (selectCell === void 0) { selectCell = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
                         case 0:
                             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) return [3 /*break*/, 2];
-                            _a = this;
+                            if (!(this.showRowButtons && this.inlineEdit && selectCell)) return [3 /*break*/, 2];
+                            _c = this;
                             return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
                         case 1:
-                            _a.editCellIndex = _b.sent();
-                            _b.label = 2;
+                            _c.editCellIndex = _d.sent();
+                            _d.label = 2;
                         case 2:
                             this._detectChanges();
                             return [2 /*return*/];
@@ -10475,27 +10533,25 @@
         };
         SimpleGridComponent.prototype.handleCellClick = function (event, row, rowIndex, cellIndex) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.editOnCellClick) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.isRowDisabled(row, rowIndex)];
                         case 1:
-                            if (_a.sent()) {
+                            if (_c.sent()) {
                                 this.selectedRowIndex = -1;
                                 return [2 /*return*/];
                             }
-                            this.selectTheRow(rowIndex, false);
                             if (this.inlineEdit) {
                                 this.editRowIndex = rowIndex;
                                 this.editCellIndex = cellIndex;
                                 this.editing = true;
-                                this.editRow(event, false);
                             }
                             return [3 /*break*/, 3];
                         case 2:
                             this.editCellIndex = cellIndex;
-                            _a.label = 3;
+                            _c.label = 3;
                         case 3:
                             this._detectChanges();
                             return [2 /*return*/];
@@ -10583,7 +10639,7 @@
                 var value = row[col.key];
                 if (value instanceof Date) {
                     var formattedDate = value.toISOString().split('T')[0];
-                    var _a = __read(formattedDate.split('-'), 3), year = _a[0], month = _a[1], day = _a[2];
+                    var _c = __read(formattedDate.split('-'), 3), year = _c[0], month = _c[1], day = _c[2];
                     return day + "-" + month + "-" + year;
                 }
                 else if (typeof value === 'number') {
@@ -10603,7 +10659,7 @@
                     if (!value)
                         return '';
                     if (typeof value === 'string' && value.includes('T00:00:00')) {
-                        var _b = __read(value.replace('T00:00:00', '').split('-'), 3), year = _b[0], month = _b[1], day = _b[2];
+                        var _d = __read(value.replace('T00:00:00', '').split('-'), 3), year = _d[0], month = _d[1], day = _d[2];
                         return day + "-" + month + "-" + year;
                     }
                     return String(value);
@@ -10748,9 +10804,26 @@
         };
         SimpleGridComponent.prototype._saveRow = function (stopediting) {
             if (stopediting === void 0) { 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 {
+                var 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) {
@@ -10790,7 +10863,7 @@
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n      <co-grid-toolbar\n              *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n              [showEdit]=\"showEdit\"\n              [showAdd]=\"showAdd\"\n              [showDelete]=\"showDelete\"\n              [deleteEnabled]=\"selectedRowIndex > -1\"\n              (addClick)=\"addNewRow()\"\n              (editClick)=\"editRow($event)\"\n              (saveClick)=\"validateAndSave()\"\n              (cancelClick)=\"cancelEditRow()\"\n              (deleteClick)=\"removeRow()\">\n      </co-grid-toolbar>\n\n      <table\n              id=\"simple-grid-table\"\n              class=\"simple-grid-table\"\n              [clickOutside]=\"editing\"\n              (clickOutside)=\"handleClickOutsideRow()\">\n          <colgroup>\n              <col\n                      *ngFor=\"let column of headerColumnsCopy; let index = index\"\n                      [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n                      [style.width.px]=\"column.width\"\n                      [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n          </colgroup>\n          <thead>\n          <tr>\n              <th\n                      scope=\"col\"\n                      #headerCell\n                      class=\"simple-grid-column-header\"\n                      *ngFor=\"let column of headerColumnsCopy; let index = index\">\n                  <div\n                          class=\"simple-grid-column-header-wrapper\"\n                          [class.resizable]=\"resizable\"\n                          [class.selected]=\"column.isSelected\"\n                          [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n                      <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n                          <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n                      </ng-container>\n                      <ng-template #noHeaderTemplate>\n                          <div\n                                  class=\"simple-grid-column-header-label\"\n                                  [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                                  [class.with-menu]=\"showGridSettings\"\n                                  [class.with-sort]=\"showColumnSort\"\n                                  [textContent]=\"column.headerText || '&nbsp;'\"\n                                  (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n                          </div>\n\n                          <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n                              <co-button\n                                      (click)=\"sortColumn(column, column?.field)\"\n                                      [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n                              </co-button>\n                          </div>\n\n                          <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n                              <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n                              <ul>\n                                  <li (click)=\"hideColumn(column)\">Hide Column</li>\n                                  <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n                              </ul>\n                          </div>\n                      </ng-template>\n                      <div\n                              *ngIf=\"resizable && column.resizable\"\n                              class=\"simple-grid-column-sizer\"\n                              (mousedown)=\"handleSizerMouseDown($event, column)\">\n                      </div>\n                  </div>\n              </th>\n          </tr>\n\n          <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n              <co-button\n                      [class.selected]=\"isSettingsMenuOpen\"\n                      [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n                      (click)=\"toggleSettingsMenu()\">\n              </co-button>\n\n              <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n                  <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n                  <ul>\n                      <li (click)=\"exportToExcel()\">Export to Excel</li>\n                      <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n                          Show All Columns\n                      </li>\n                  </ul>\n              </div>\n          </div>\n          </thead>\n          <tbody\n                  #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n                  class=\"simple-grid-drag-drop-list\"\n                  [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n                  [cdkDropListData]=\"data\"\n                  [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n                  (cdkDropListDropped)=\"handleDrop($event)\">\n          <co-form class=\"simple-grid-row-form\">\n              <tr\n                      class=\"simple-grid-row\"\n                      [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n                      [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n                      [class.editing]=\"rowIndex === editRowIndex\"\n                      *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n                      cdkDrag\n                      (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n                      (visibilityChange)=\"rowVisible.next(row)\"\n                      (mouseenter)=\"hoveredRowIndex = rowIndex\"\n                      (mouseleave)=\"hoveredRowIndex = -1\"\n              >\n                  <ng-container *ngIf=\"isSingleColumnRow(row)\">\n                      <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n                          <co-simple-grid-cell\n                                  [column]=\"columns[singleColumnIndex(row)]\"\n                                  [row]=\"row\"\n                                  [editMode]=\"false\">\n                          </co-simple-grid-cell>\n                      </td>\n                  </ng-container>\n                  <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n                      <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n                          <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                              <co-simple-grid-cell\n                                      [column]=\"column\"\n                                      [row]=\"row\"\n                                      [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                                      [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n                                      (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n                              </co-simple-grid-cell>\n                              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                          </td>\n                      </ng-container>\n                      <ng-container *ngIf=\"inlineEdit\">\n                          <div class=\"icons-container\" *ngIf=\"!editing\">\n                              <co-icon class=\"icon-item icon-edit\"\n                                       [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n                                       (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n                              <co-icon class=\"icon-item icon-delete\"\n                                       [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n                                       (click)=\"removeRow()\"></co-icon>\n                          </div>\n                          <div class=\"icons-container\">\n                              <co-button class=\"save-button\"\n                                         *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n                                         [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n                                         (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n                              <co-button class=\"close-button\"\n                                         *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n                                         [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n                                         (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n                          </div>\n                      </ng-container>\n                  </ng-container>\n              </tr>\n          </co-form>\n          </tbody>\n      </table>\n      <co-pagination-bar\n              *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n              [itemsPerPage]=\"rowsPerPage\"\n              [currentPage]=\"currentPage\"\n              [totalItems]=\"data.length\"\n              [autoHide]=\"true\"\n              (previousClick)=\"goToPreviousPage()\"\n              (nextClick)=\"goToNextPage()\"\n              (pageClick)=\"setCurrentPage($event)\">\n      </co-pagination-bar>\n  ",
+                    template: "\n    <co-grid-toolbar\n      *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n      [showEdit]=\"showEdit\"\n      [showAdd]=\"showAdd\"\n      [showDelete]=\"showDelete\"\n      [deleteEnabled]=\"selectedRowIndex > -1\"\n      (addClick)=\"addNewRow()\"\n      (editClick)=\"editRow($event)\"\n      (saveClick)=\"validateAndSave()\"\n      (cancelClick)=\"cancelEditRow()\"\n      (deleteClick)=\"removeRow()\">\n    </co-grid-toolbar>\n\n    <table\n      id=\"simple-grid-table\"\n      class=\"simple-grid-table\"\n      [clickOutside]=\"editing\"\n      (clickOutside)=\"handleClickOutsideRow()\">\n      <colgroup>\n        <col\n          *ngFor=\"let column of headerColumnsCopy; let index = index\"\n          [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n          [style.width.px]=\"column.width\"\n          [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th\n          scope=\"col\"\n          #headerCell\n          class=\"simple-grid-column-header\"\n          *ngFor=\"let column of headerColumnsCopy; let index = index\">\n          <div\n            class=\"simple-grid-column-header-wrapper\"\n            [class.resizable]=\"resizable\"\n            [class.selected]=\"column.isSelected\"\n            [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div\n                class=\"simple-grid-column-header-label\"\n                [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                [class.with-menu]=\"showGridSettings\"\n                [class.with-sort]=\"showColumnSort\"\n                [textContent]=\"column.headerText || '&nbsp;'\"\n                (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n              </div>\n\n              <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n                <co-button\n                  (click)=\"sortColumn(column, column?.field)\"\n                  [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n                </co-button>\n              </div>\n\n              <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n                <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n                <ul>\n                  <li (click)=\"hideColumn(column)\">Hide Column</li>\n                  <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n                </ul>\n              </div>\n            </ng-template>\n            <div\n              *ngIf=\"resizable && column.resizable\"\n              class=\"simple-grid-column-sizer\"\n              (mousedown)=\"handleSizerMouseDown($event, column)\">\n            </div>\n          </div>\n        </th>\n      </tr>\n\n      <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n        <co-button\n          [class.selected]=\"isSettingsMenuOpen\"\n          [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n          (click)=\"toggleSettingsMenu()\">\n        </co-button>\n\n        <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n          <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n          <ul>\n            <li (click)=\"exportToExcel()\">Export to Excel</li>\n            <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n              Show All Columns\n            </li>\n          </ul>\n        </div>\n      </div>\n      </thead>\n      <tbody\n        #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n        class=\"simple-grid-drag-drop-list\"\n        [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n        [cdkDropListData]=\"data\"\n        [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n        (cdkDropListDropped)=\"handleDrop($event)\">\n      <co-form class=\"simple-grid-row-form\">\n        <tr\n          #rowElement\n          class=\"simple-grid-row\"\n          [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n          [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n          [class.editing]=\"rowIndex === editRowIndex\"\n          *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n          cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n          (visibilityChange)=\"rowVisible.next(row)\"\n          (mouseenter)=\"hoveredRowIndex = rowIndex\"\n          (mouseleave)=\"hoveredRowIndex = -1\"\n        >\n          <ng-container *ngIf=\"isSingleColumnRow(row)\">\n            <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n              <co-simple-grid-cell\n                [column]=\"columns[singleColumnIndex(row)]\"\n                [row]=\"row\"\n                [editMode]=\"false\">\n              </co-simple-grid-cell>\n            </td>\n          </ng-container>\n          <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n            <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n              <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                <co-simple-grid-cell\n                  [column]=\"column\"\n                  [row]=\"row\"\n                  [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                  [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n                  (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n                </co-simple-grid-cell>\n                <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"inlineEdit && showRowButtons\">\n              <div class=\"icons-container\" *ngIf=\"!editing\">\n                <co-icon class=\"icon-item icon-edit\"\n                         [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n                         (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n                <co-icon class=\"icon-item icon-delete\"\n                         [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n                         (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n              </div>\n              <div class=\"icons-container\">\n                <co-button class=\"save-button\"\n                           *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n                           [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n                           (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n                <co-button class=\"close-button\"\n                           *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n                           [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n                           (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n              </div>\n            </ng-container>\n          </ng-container>\n        </tr>\n      </co-form>\n      </tbody>\n    </table>\n    <co-pagination-bar\n      *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n      [itemsPerPage]=\"rowsPerPage\"\n      [currentPage]=\"currentPage\"\n      [totalItems]=\"data.length\"\n      [autoHide]=\"true\"\n      (previousClick)=\"goToPreviousPage()\"\n      (nextClick)=\"goToNextPage()\"\n      (pageClick)=\"setCurrentPage($event)\">\n    </co-pagination-bar>\n  ",
                     providers: [FormMasterService],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
@@ -10804,6 +10877,7 @@
     ]; };
     SimpleGridComponent.propDecorators = {
         headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
+        rowElements: [{ type: i0.ViewChildren, args: ['rowElement',] }],
         showAdd: [{ type: i0.Input }],
         showDelete: [{ type: i0.Input }],
         editOnCellClick: [{ type: i0.Input }],
@@ -10812,6 +10886,7 @@
         rowsPerPage: [{ type: i0.Input }],
         rowDisabledFn: [{ type: i0.Input }],
         showColumnSort: [{ type: i0.Input }],
+        showRowButtons: [{ type: i0.Input }],
         canRowBeEdittedFn: [{ type: i0.Input }],
         showClass: [{ type: i0.HostBinding, args: ['class.co-simple-grid',] }],
         handleKeyDown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
@@ -11892,8 +11967,15 @@
 
     var ListOfValuesComponent = /** @class */ (function (_super) {
         __extends(ListOfValuesComponent, _super);
-        function ListOfValuesComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+        function ListOfValuesComponent(formComponent, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.overlayService = overlayService;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
             _this.icons = exports.CoreComponentsIcon;
             _this.multiselect = false;
             _this.largeCollection = false;
@@ -11907,6 +11989,7 @@
             _this.filteredCollection = [];
             _this.isLoading = false;
             _this._collection = [];
+            _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         Object.defineProperty(ListOfValuesComponent.prototype, "model", {
@@ -12077,7 +12160,7 @@
                     }
                 }
             }
-            this.model = option;
+            this.setModel(option);
             this.modelChange.emit(this.model);
             this.detectChanges();
         };
@@ -12131,7 +12214,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\"leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n      \n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n  ",
+                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [myFormInputInstance]=\"this\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\"leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n\n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n      <input type=\"hidden\" [ngModel]=\"model\">\n  ",
                     providers: [
                         OverlayService,
                         {
@@ -12142,6 +12225,15 @@
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
+    ListOfValuesComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: OverlayService },
+        { type: i0.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: i0.ElementRef }
+    ]; };
     ListOfValuesComponent.propDecorators = {
         model: [{ type: i0.Input }],
         parentForOverlay: [{ type: i0.ViewChild, args: ['parentForOverlay', { read: i0.ElementRef },] }],