@colijnit/corecomponents_v12 12.0.21 → 12.0.24

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2677,6 +2677,56 @@
                 },] }
     ];
 
+    var CoDialogWizardComponent = /** @class */ (function () {
+        function CoDialogWizardComponent() {
+            this.icons = exports.CoreComponentsIcon;
+            this.showCloseIcon = true;
+            this.animation = true;
+            this.closeClick = new core.EventEmitter();
+        }
+        CoDialogWizardComponent.prototype.showClass = function () {
+            return true;
+        };
+        return CoDialogWizardComponent;
+    }());
+    CoDialogWizardComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'co-dialog-wizard',
+                    template: "\n    <div class=\"co-dialog-wizard-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\">\n        <ng-content select=\"[header]\"></ng-content>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"closeClick.emit($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n\n      <hr class=\"co-dialog-wizard-divider\">\n\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideDialog', [
+                            animations.state('*', animations.style({ opacity: 1 })),
+                            animations.state('void', animations.style({ opacity: 0 })),
+                            animations.transition('void => *', animations.animate('200ms 200ms')),
+                            animations.transition('* => void', animations.animate(200))
+                        ])
+                    ],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    CoDialogWizardComponent.propDecorators = {
+        showCloseIcon: [{ type: core.Input }],
+        animation: [{ type: core.Input }],
+        closeClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-dialog-wizard",] }]
+    };
+
+    var CoDialogWizardModule = /** @class */ (function () {
+        function CoDialogWizardModule() {
+        }
+        return CoDialogWizardModule;
+    }());
+    CoDialogWizardModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        IconModule
+                    ],
+                    declarations: [CoDialogWizardComponent],
+                    exports: [CoDialogWizardComponent]
+                },] }
+    ];
+
     var CoKanbanComponent = /** @class */ (function () {
         function CoKanbanComponent() {
             this.allowDragAndDrop = true;
@@ -3174,6 +3224,8 @@
             this.noFormGroupControl = false;
             this.keepFocus = false;
             this.canSaveOrCancel = false;
+            this.committing = false;
+            this.commitFinished = true;
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
@@ -3544,16 +3596,24 @@
         };
         BaseInputComponent.prototype.commitClick = function (event) {
             return __awaiter(this, void 0, void 0, function () {
+                var success;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             this.keepFocus = true;
+                            this.commitFinished = false;
+                            this.committing = true;
                             return [4 /*yield*/, this.commit(this.model)];
                         case 1:
-                            _a.sent();
+                            success = _a.sent();
                             this.keepFocus = false;
-                            this.doBlur(event);
-                            return [2 /*return*/];
+                            return [4 /*yield*/, this._commitFinished()];
+                        case 2:
+                            _a.sent();
+                            if (success) {
+                                this.doBlur(event);
+                            }
+                            return [2 /*return*/, success];
                     }
                 });
             });
@@ -3573,6 +3633,9 @@
                 var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
                 this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
                 this._errorValidationComponent.instance.error = error;
+                if (this._hasOnPushCdStrategy) {
+                    this.changeDetector.markForCheck();
+                }
                 this._positionValidationError();
             }
         };
@@ -3595,6 +3658,9 @@
             if (this.canChange && this.input) {
                 this.input.focus();
                 this.focused = true;
+                if (this._hasOnPushCdStrategy) {
+                    this.markForCheck();
+                }
             }
         };
         BaseInputComponent.prototype.doFocus = function (event) {
@@ -3604,6 +3670,9 @@
             this._initialModelSet = false;
             this.focused = true;
             this.canSaveOrCancel = false;
+            if (this._hasOnPushCdStrategy) {
+                this.markForCheck();
+            }
             this.focus.next();
         };
         BaseInputComponent.prototype.doBlur = function (event) {
@@ -3616,7 +3685,12 @@
                     return false;
                 }
                 _this.focused = false;
-                _this.input.blur();
+                if (_this._hasOnPushCdStrategy) {
+                    _this.markForCheck();
+                }
+                if (_this.input) {
+                    _this.input.blur();
+                }
                 _this.blur.next();
             }, 200);
         };
@@ -3729,6 +3803,16 @@
                 this.control.updateValueAndValidity();
             }
         };
+        BaseInputComponent.prototype._commitFinished = function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                _this.commitFinished = true;
+                setTimeout(function () {
+                    _this.committing = false;
+                    resolve();
+                }, 800);
+            });
+        };
         BaseInputComponent.prototype._clearErrorComponent = function () {
             if (this.validationErrorContainer) {
                 this.validationErrorContainer.clear();
@@ -3828,7 +3912,7 @@
         };
         BaseInputComponent.prototype._handleKeyDown = function (event) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, nextSiblingToFocus;
+                var _a, nextSiblingToFocus, success;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -3850,12 +3934,14 @@
                             event.preventDefault();
                             return [4 /*yield*/, this.commitClick()];
                         case 4:
-                            _b.sent();
-                            if (nextSiblingToFocus) {
-                                try {
-                                    this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
-                                }
-                                catch (e) {
+                            success = _b.sent();
+                            if (success) {
+                                if (nextSiblingToFocus) {
+                                    try {
+                                        this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                                    }
+                                    catch (e) {
+                                    }
                                 }
                             }
                             return [2 /*return*/, false];
@@ -4118,6 +4204,7 @@
         function FormComponent(_formMaster) {
             this._formMaster = _formMaster;
             this.onChange = new core.EventEmitter();
+            this.showClass = true;
             this.submitted = false;
             // Emits true after every valid submit.
             this.validSubmit = new core.EventEmitter();
@@ -4271,7 +4358,8 @@
     FormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-form",
-                    template: "<ng-content></ng-content>"
+                    template: "\n    <ng-content></ng-content>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     FormComponent.ctorParameters = function () { return [
@@ -4281,6 +4369,7 @@
         readonly: [{ type: core.Input }],
         keepInView: [{ type: core.Input }],
         onChange: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-form",] }],
         submitted: [{ type: core.HostBinding, args: ["class.submitted",] }],
         validSubmit: [{ type: core.Output }],
         anySubmit: [{ type: core.Output }],
@@ -4326,6 +4415,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return DropDownListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: DropDownListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -4400,7 +4492,8 @@
     })(GridLines || (GridLines = {}));
 
     var BaseGridComponent = /** @class */ (function () {
-        function BaseGridComponent() {
+        function BaseGridComponent(element) {
+            this.element = element;
             this.gridLines = GridLines.None;
             this.contextMenuItems = [];
             this.sortingEnabled = false;
@@ -4437,6 +4530,9 @@
     BaseGridComponent.decorators = [
         { type: core.Directive }
     ];
+    BaseGridComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
     BaseGridComponent.propDecorators = {
         grid: [{ type: core.ViewChild, args: ['grid', { static: false },] }],
         data: [{ type: core.Input }],
@@ -4575,6 +4671,10 @@
         function BaseInlineEditGridComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.rowSaved = new core.EventEmitter();
+            _this.beforeRowDelete = new core.EventEmitter(false);
+            _this.rowDeleted = new core.EventEmitter();
+            _this.actionBeginObservable$ = new rxjs.Observable();
+            _this.actionBeginObservableSub = new rxjs.Subscription();
             return _this;
         }
         Object.defineProperty(BaseInlineEditGridComponent.prototype, "inlineEdit", {
@@ -4594,13 +4694,61 @@
             enumerable: false,
             configurable: true
         });
+        BaseInlineEditGridComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (this.grid) {
+                this.actionBeginObservable$ = rxjs.fromEvent(this.grid, 'actionBegin');
+                this.actionBeginObservableSub = this.actionBeginObservable$.subscribe(function (action) {
+                    _this.handleActionBegin(action);
+                });
+            }
+        };
+        BaseInlineEditGridComponent.prototype.ngOnDestroy = function () {
+            this.actionBeginObservableSub.unsubscribe();
+        };
+        BaseInlineEditGridComponent.prototype.handleActionBegin = function (action) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!action) return [3 /*break*/, 3];
+                            if (!(action.requestType === "delete")) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.waitForBeforeDelete(action)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            if (action.requestType === "save") {
+                                this.rowSaved.next(action.data);
+                            }
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         BaseInlineEditGridComponent.prototype.handleActionComplete = function (action) {
             if (action) {
+                if (action.requestType === "delete") {
+                    this.rowDeleted.next(action.data);
+                }
                 if (action.requestType === "save") {
                     this.rowSaved.next(action.data);
                 }
             }
         };
+        BaseInlineEditGridComponent.prototype.waitForBeforeDelete = function (action) {
+            var _this = this;
+            // @ts-ignore
+            var beforeRowDelete$ = rxjs.fromEvent(this.element, 'beforeRowDelete');
+            return new Promise(function (resolve) {
+                beforeRowDelete$.subscribe(function (result) {
+                    action = result;
+                    return resolve(action);
+                }).unsubscribe();
+                _this.beforeRowDelete.next(action);
+            });
+        };
         return BaseInlineEditGridComponent;
     }(BaseToolbarGridComponent));
     BaseInlineEditGridComponent.decorators = [
@@ -4608,7 +4756,9 @@
     ];
     BaseInlineEditGridComponent.propDecorators = {
         inlineEdit: [{ type: core.Input }],
-        rowSaved: [{ type: core.Output }]
+        rowSaved: [{ type: core.Output }],
+        beforeRowDelete: [{ type: core.Output }],
+        rowDeleted: [{ type: core.Output }]
     };
     __decorate([
         InputBoolean()
@@ -4626,6 +4776,8 @@
             _this.contextMenuItemClick = new core.EventEmitter();
             _this.rowDragStartEvent = new core.EventEmitter();
             _this.rowDropEvent = new core.EventEmitter();
+            _this.beforeRowsDelete = new core.EventEmitter();
+            _this.rowsDeleted = new core.EventEmitter();
             _this.selectionOptions = { type: "Single" };
             return _this;
         }
@@ -4677,6 +4829,12 @@
         BaseSelectionGridComponent.prototype.rowDropClick = function (args) {
             this.rowDropEvent.next(args);
         };
+        BaseSelectionGridComponent.prototype.handleBeforeBatchDelete = function (args) {
+            this.beforeRowsDelete.next(args);
+        };
+        BaseSelectionGridComponent.prototype.handleBatchDelete = function (rows) {
+            this.rowsDeleted.next(rows);
+        };
         return BaseSelectionGridComponent;
     }(BaseInlineEditGridComponent));
     BaseSelectionGridComponent.decorators = [
@@ -4691,7 +4849,9 @@
         detailColumnClick: [{ type: core.Output }],
         contextMenuItemClick: [{ type: core.Output }],
         rowDragStartEvent: [{ type: core.Output }],
-        rowDropEvent: [{ type: core.Output }]
+        rowDropEvent: [{ type: core.Output }],
+        beforeRowsDelete: [{ type: core.Output }],
+        rowsDeleted: [{ type: core.Output }]
     };
     __decorate([
         InputBoolean()
@@ -4716,7 +4876,7 @@
     CoGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-grid',
-                    template: "\n        <ejs-grid #grid id=\"grid\"\n                  [dataSource]=\"data\"\n                  [columns]=\"columns\"\n                  [contextMenuItems]=\"contextMenuItems\"\n                  [pageSettings]=\"pageSettings\"\n                  [toolbar]=\"toolbarOptions\"\n                  [gridLines]=\"gridLines\"\n                  [frozenColumns]=\"frozenColumns\"\n                  [frozenRows]=\"frozenRows\"\n                  [selectionSettings]=\"selectionOptions\"\n                  [editSettings]=\"editSettings\"\n                  [allowPaging]=\"pagingEnabled\"\n                  [allowSorting]=\"sortingEnabled\"\n                  [allowFiltering]=\"filteringEnabled\"\n                  [allowGrouping]=\"groupingEnabled\"\n                  [allowReordering]=\"reorderingEnabled\"\n                  [allowResizing]=\"resizingEnabled\"\n                  [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                  [showColumnMenu]=\"showColumnMenu\"\n                  [showColumnChooser]=\"showColumnChooser\"\n                  [allowExcelExport]=\"exportExcelEnabled\"\n                  [allowPdfExport]=\"exportPdfEnabled\"\n                  (toolbarClick)=\"toolbarClick($event)\"\n                  (rowSelected)=\"handleRowSelected($event)\"\n                  (recordDoubleClick)=\"handleDoubleClick($event)\"\n                  (recordClick)=\"handleRecordClick($event)\"\n                  (actionComplete)=\"handleActionComplete($event)\"\n                  (contextMenuClick)=\"contextMenuClick($event)\"\n                  (rowDragStart)=\"rowDragStartClick($event)\"\n                  (rowDrop)=\"rowDropClick($event)\">\n        </ejs-grid>\n    ",
+                    template: "\n      <ejs-grid #grid id=\"grid\"\n                [dataSource]=\"data\"\n                [columns]=\"columns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [pageSettings]=\"pageSettings\"\n                [toolbar]=\"toolbarOptions\"\n                [gridLines]=\"gridLines\"\n                [frozenColumns]=\"frozenColumns\"\n                [frozenRows]=\"frozenRows\"\n                [selectionSettings]=\"selectionOptions\"\n                [editSettings]=\"editSettings\"\n                [allowPaging]=\"pagingEnabled\"\n                [allowSorting]=\"sortingEnabled\"\n                [allowFiltering]=\"filteringEnabled\"\n                [allowGrouping]=\"groupingEnabled\"\n                [allowReordering]=\"reorderingEnabled\"\n                [allowResizing]=\"resizingEnabled\"\n                [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                [showColumnMenu]=\"showColumnMenu\"\n                [showColumnChooser]=\"showColumnChooser\"\n                [allowExcelExport]=\"exportExcelEnabled\"\n                [allowPdfExport]=\"exportPdfEnabled\"\n                (toolbarClick)=\"toolbarClick($event)\"\n                (rowSelected)=\"handleRowSelected($event)\"\n                (recordDoubleClick)=\"handleDoubleClick($event)\"\n                (recordClick)=\"handleRecordClick($event)\"\n                (actionComplete)=\"handleActionComplete($event)\"\n                (contextMenuClick)=\"contextMenuClick($event)\"\n                (rowDragStart)=\"rowDragStartClick($event)\"\n                (rowDrop)=\"rowDropClick($event)\"\n                (beforeBatchDelete)=\"handleBeforeBatchDelete($event)\"\n                (batchDelete)=\"handleBatchDelete($event)\"\n      >\n      </ejs-grid>\n    ",
                     providers: [
                         ej2AngularGrids.RowDDService
                     ],
@@ -4727,6 +4887,59 @@
         showClass: [{ type: core.HostBinding, args: ['class.co-grid',] }]
     };
 
+    var GridToolbarComponent = /** @class */ (function () {
+        function GridToolbarComponent(iconsService) {
+            this.iconsService = iconsService;
+            this.icons = exports.CoreComponentsIcon;
+            this.editClick = new core.EventEmitter();
+            this.cancelClick = new core.EventEmitter();
+            this.saveClick = new core.EventEmitter();
+            this.addClick = new core.EventEmitter();
+        }
+        GridToolbarComponent.prototype.showClass = function () {
+            return true;
+        };
+        return GridToolbarComponent;
+    }());
+    GridToolbarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-grid-toolbar",
+                    template: "\n    <div class=\"grid-toolbar-wrapper\">\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'save'\" (click)=\"saveClick.emit()\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'add'\" (click)=\"addClick.emit()\"></co-button>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    GridToolbarComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    GridToolbarComponent.propDecorators = {
+        editClick: [{ type: core.Output }],
+        cancelClick: [{ type: core.Output }],
+        saveClick: [{ type: core.Output }],
+        addClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar",] }]
+    };
+
+    ej2Base.enableRipple(true);
+    var GridToolbarModule = /** @class */ (function () {
+        function GridToolbarModule() {
+        }
+        return GridToolbarModule;
+    }());
+    GridToolbarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        IconModule,
+                        ButtonModule
+                    ],
+                    declarations: [
+                        GridToolbarComponent
+                    ],
+                    exports: [
+                        GridToolbarComponent
+                    ]
+                },] }
+    ];
+
     var CoGridModule = /** @class */ (function () {
         function CoGridModule() {
         }
@@ -4737,7 +4950,8 @@
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        ej2AngularGrids.GridModule
+                        ej2AngularGrids.GridModule,
+                        GridToolbarModule
                     ],
                     declarations: [CoGridComponent],
                     exports: [CoGridComponent],
@@ -4795,6 +5009,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputCheckboxComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -4896,6 +5113,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputCheckboxMultiSelectComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -4949,7 +5169,6 @@
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
-            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -4970,6 +5189,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputComboBoxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -4989,8 +5211,7 @@
         selected: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         shopPopup: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }],
-        customHeight: [{ type: core.HostBinding, args: ["class.custom-height",] }]
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
     };
 
     var InputComboBoxModule = /** @class */ (function () {
@@ -5072,6 +5293,9 @@
                     template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputDatePickerComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputDatePickerComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -5414,6 +5638,7 @@
         KeyboardCode.Down,
         KeyboardCode.Up,
         KeyboardCode.Tab,
+        KeyboardCode.Enter,
         KeyboardCode.Home,
         KeyboardCode.End,
         KeyboardCode.Delete,
@@ -5449,64 +5674,6 @@
         KeyboardCode.NumpadNine
     ];
 
-    var InputTextComponent = /** @class */ (function (_super) {
-        __extends(InputTextComponent, _super);
-        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
-            _this.formComponent = formComponent;
-            _this.changeDetector = changeDetector;
-            _this.componentFactoryResolver = componentFactoryResolver;
-            _this.formUserChangeListener = formUserChangeListener;
-            _this.ngZoneWrapper = ngZoneWrapper;
-            _this.elementRef = elementRef;
-            _this.Icons = exports.CoreComponentsIcon;
-            _this.placeholder = "";
-            _this.type = "text";
-            _this.showClearButton = undefined;
-            _this.hasOwnLabel = true;
-            _super.prototype._markAsOnPush.call(_this);
-            return _this;
-        }
-        InputTextComponent.prototype.showClass = function () {
-            return true;
-        };
-        return InputTextComponent;
-    }(BaseInputComponent));
-    InputTextComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div *ngIf=\"showSaveCancel && focused && canSaveOrCancel\" class=\"input-save-cancel-button-wrapper\" @showHideSaveCancel>\n      <div class=\"input-save-cancel-button save\" (click)=\"commitClick($event)\"></div>\n      <div class=\"input-save-cancel-button cancel\" (click)=\"cancelClick($event)\"></div>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return InputTextComponent; })
-                        }],
-                    animations: [
-                        animations.trigger('showHideSaveCancel', [
-                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
-                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
-                            animations.transition('void <=> *', animations.animate(200))
-                        ]),
-                    ],
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    InputTextComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
-        { type: FormInputUserModelChangeListenerService },
-        { type: NgZoneWrapperService },
-        { type: core.ElementRef }
-    ]; };
-    InputTextComponent.propDecorators = {
-        placeholder: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        showClearButton: [{ type: core.Input }],
-        keyDownWhiteList: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
-    };
-
     // Input values for 'buttonShowMode' of NumberPickerComponent.
     var InputNumberPickerButtonShowMode;
     (function (InputNumberPickerButtonShowMode) {
@@ -5548,8 +5715,8 @@
             _this._stepFactor = _this._stepFactors[0];
             _this._mayAutoCount = false;
             _this._numberLogicValueChangeSub = _this.numberLogic.valueChange.subscribe(function (value) {
-                _this.inputTextComp.model = "" + value; // faster than this.detectChanges() just for that input
                 if (!_this._mayAutoCount) {
+                    _this.model = value;
                     _this.modelChange.emit(value);
                     // custom form user chagne listener .next because we don't user super.updateModel() which normally does that for us
                     if (_this._markedAsUserTouched) {
@@ -5560,18 +5727,17 @@
             });
             return _this;
         }
-        Object.defineProperty(InputNumberPickerComponent.prototype, "model", {
-            get: function () {
-                return this.numberLogic.value;
-            },
-            // @override
-            set: function (model) {
-                this.numberLogic.value = model;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(InputNumberPickerComponent.prototype, "min", {
+            // @override
+            // @Input()
+            // public set model(model: number) {
+            //   super.model = model;
+            //   this.numberLogic.value = model;
+            // }
+            //
+            // public get model(): number {
+            //   return this.numberLogic.value;
+            // }
             set: function (min) {
                 this.numberLogic.min = min;
             },
@@ -5645,6 +5811,11 @@
             if (this.myKeyDownWhiteList.find(function (k) { return k === event.keyCode; }) === undefined) {
                 return false;
             }
+            _super.prototype.handleKeyDown.call(this, event);
+        };
+        InputNumberPickerComponent.prototype.handleChangeModel = function (value) {
+            console.log(value);
+            this.numberLogic.setValue(value);
         };
         // Note: recursive through setTimeout().
         InputNumberPickerComponent.prototype.doDecrementAuto = function () {
@@ -5719,17 +5890,6 @@
                 }
             }, this._delayBeforeStartAutoCountMs);
         };
-        // Possibly show buttons.
-        InputNumberPickerComponent.prototype.onNumberInputFocus = function () {
-            this._numberInputHasFocus = true;
-            this._updateButtonsShowState();
-        };
-        // Value correction point.
-        InputNumberPickerComponent.prototype.onNumberInputBlur = function () {
-            this._numberInputHasFocus = false;
-            this.numberLogic.setValueByUserInputText(this.inputTextComp.model);
-            this._updateButtonsShowState();
-        };
         // Note: recursive.
         InputNumberPickerComponent.prototype._doIncreaseStepFactor = function () {
             var _this = this;
@@ -5767,9 +5927,12 @@
     InputNumberPickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-number-picker',
-                    template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"numberLogic.valueAsSting\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
+                    template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (ngModelChange)=\"handleChangeModel($event)\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputNumberPickerComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputNumberPickerComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -5784,7 +5947,6 @@
         { type: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
-        model: [{ type: core.Input }],
         min: [{ type: core.Input }],
         step: [{ type: core.Input }],
         max: [{ type: core.Input }],
@@ -5795,7 +5957,6 @@
         noValidation: [{ type: core.Input }],
         decimals: [{ type: core.Input }],
         modelChange: [{ type: core.Output }],
-        inputTextComp: [{ type: core.ViewChild, args: [InputTextComponent, { static: true },] }],
         showButtonsOnFocusOnly: [{ type: core.HostBinding, args: ["class.show-buttons-on-focus-only",] }],
         hasLabel: [{ type: core.HostBinding, args: ["class.has-label",] }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-number-picker',] }]
@@ -5804,6 +5965,60 @@
         InputBoolean()
     ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
+    var InputTextComponent = /** @class */ (function (_super) {
+        __extends(InputTextComponent, _super);
+        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            _this.Icons = exports.CoreComponentsIcon;
+            _this.placeholder = "";
+            _this.type = "text";
+            _this.showClearButton = undefined;
+            _this.hasOwnLabel = true;
+            _super.prototype._markAsOnPush.call(_this);
+            return _this;
+        }
+        InputTextComponent.prototype.showClass = function () {
+            return true;
+        };
+        return InputTextComponent;
+    }(BaseInputComponent));
+    InputTextComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-input-text",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    providers: [{
+                            provide: COMPONENT_INTERFACE_NAME,
+                            useExisting: core.forwardRef(function () { return InputTextComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextComponent
+                        }],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    InputTextComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
+    ]; };
+    InputTextComponent.propDecorators = {
+        placeholder: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        showClearButton: [{ type: core.Input }],
+        keyDownWhiteList: [{ type: core.Input }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
+        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
+    };
+
     var ValidationErrorModule = /** @class */ (function () {
         function ValidationErrorModule() {
         }
@@ -5824,22 +6039,132 @@
                 },] }
     ];
 
-    var InputTextModule = /** @class */ (function () {
-        function InputTextModule() {
+    var CommitButtonsComponent = /** @class */ (function () {
+        function CommitButtonsComponent(_renderer) {
+            var _this = this;
+            this._renderer = _renderer;
+            this.cancelClick = new core.EventEmitter();
+            this.commitClick = new core.EventEmitter();
+            this._committing = false;
+            this._commitFinished = false;
+            this._handleAnimationIteration = function (event) {
+                _this._renderer.removeClass(event.currentTarget, 'animate');
+                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
+                // elem.removeEventListener('webkitAnimationIteration', () => this._handleAnimationIteration(elem));
+            };
         }
-        return InputTextModule;
-    }());
-    InputTextModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        BaseModule,
-                        common.CommonModule,
-                        forms.FormsModule,
-                        IconModule,
-                        AppendPipeModule,
-                        ej2AngularInputs.TextBoxAllModule,
-                        ej2AngularInputs.NumericTextBoxModule,
-                        ValidationErrorModule
+        Object.defineProperty(CommitButtonsComponent.prototype, "content", {
+            set: function (children) {
+                this.animateDivs = children.toArray();
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "committing", {
+            get: function () {
+                return this._committing;
+            },
+            set: function (value) {
+                this._committing = value;
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "commitFinished", {
+            get: function () {
+                return this._commitFinished;
+            },
+            set: function (value) {
+                this._commitFinished = value;
+                this._checkAnimationFinished();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommitButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        CommitButtonsComponent.prototype._checkAnimation = function () {
+            var _this = this;
+            if (this.committing && this.animateDivs) {
+                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
+            }
+        };
+        CommitButtonsComponent.prototype._checkAnimationFinished = function () {
+            var _this = this;
+            if (this.commitFinished && this.animateDivs) {
+                this.animateDivs.forEach(function (a) {
+                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
+                    // a.nativeElement.addEventListener('webkitAnimationIteration', (event) => this._handleAnimationIteration(event));
+                });
+            }
+        };
+        return CommitButtonsComponent;
+    }());
+    CommitButtonsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-commit-buttons",
+                    template: "\n    <div class=\"commit-buttons-wrapper\" @showHideSaveCancel>\n      <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n           (click)=\"commitClick.emit($event)\">\n        <div class=\"save-button-spinner\" *ngIf=\"committing || commitFinished\">\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n        </div>\n        <div class=\"spinner-checkmark\" *ngIf=\"!committing || commitFinished\"></div>\n      </div>\n      <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n        <div class=\"cancel-button\"></div>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideSaveCancel', [
+                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
+                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    CommitButtonsComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    CommitButtonsComponent.propDecorators = {
+        content: [{ type: core.ViewChildren, args: ['animatediv', { read: core.ElementRef },] }],
+        committing: [{ type: core.Input }],
+        commitFinished: [{ type: core.Input }],
+        cancelClick: [{ type: core.Output }],
+        commitClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-commit-buttons",] }]
+    };
+
+    var CommitButtonsModule = /** @class */ (function () {
+        function CommitButtonsModule() {
+        }
+        return CommitButtonsModule;
+    }());
+    CommitButtonsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        CommitButtonsComponent
+                    ],
+                    exports: [
+                        CommitButtonsComponent
+                    ]
+                },] }
+    ];
+
+    var InputTextModule = /** @class */ (function () {
+        function InputTextModule() {
+        }
+        return InputTextModule;
+    }());
+    InputTextModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        BaseModule,
+                        common.CommonModule,
+                        forms.FormsModule,
+                        IconModule,
+                        AppendPipeModule,
+                        ej2AngularInputs.TextBoxAllModule,
+                        ej2AngularInputs.NumericTextBoxModule,
+                        ValidationErrorModule,
+                        CommitButtonsModule
                     ],
                     declarations: [
                         InputTextComponent
@@ -5896,6 +6221,9 @@
                     template: "\n    <ejs-radiobutton\n      [label]=\"label\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [checked]=\"checked\"\n      (change)=\"handleModelChange($event)\"\n    ></ejs-radiobutton>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputRadioButtonComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputRadioButtonComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -5964,6 +6292,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextareaComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -6055,6 +6386,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: MultiSelectListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -7639,6 +7973,9 @@
                     template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputListboxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputListboxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -7694,6 +8031,10 @@
     var SimpleGridColumnDirective = /** @class */ (function () {
         function SimpleGridColumnDirective() {
             this.resizable = true;
+            this.required = false;
+            this.readonly = false;
+            this.order = 0;
+            this.singleColumn = false;
         }
         Object.defineProperty(SimpleGridColumnDirective.prototype, "template", {
             get: function () {
@@ -7707,6 +8048,38 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SimpleGridColumnDirective.prototype, "editTemplate", {
+            get: function () {
+                return this._editTemplate;
+            },
+            set: function (template) {
+                if (template) {
+                    this._editTemplate = template;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SimpleGridColumnDirective.prototype.ngOnInit = function () {
+            this._setSingleColumnProps();
+        };
+        SimpleGridColumnDirective.prototype.getFieldValue = function (value) {
+            var _this = this;
+            if (this.collection && this.displayField) {
+                var result = this.collection.find(function (c) { return c[_this.codeField] === value; });
+                if (result) {
+                    return result[this.displayField];
+                }
+            }
+            return value;
+        };
+        SimpleGridColumnDirective.prototype._setSingleColumnProps = function () {
+            if (this.singleColumn) {
+                this.resizable = false;
+                this.readonly = true;
+                this.width = 0;
+            }
+        };
         return SimpleGridColumnDirective;
     }());
     SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
@@ -7716,39 +8089,55 @@
                 },] }
     ];
     SimpleGridColumnDirective.propDecorators = {
-        template: [{ type: core.ContentChild, args: [core.TemplateRef,] }],
+        template: [{ type: core.ContentChild, args: ['template',] }],
+        editTemplate: [{ type: core.ContentChild, args: ['editTemplate',] }],
         headerText: [{ type: core.Input }],
         field: [{ type: core.Input }],
+        codeField: [{ type: core.Input }],
+        displayField: [{ type: core.Input }],
         textAlign: [{ type: core.Input }],
         format: [{ type: core.Input }],
         resizable: [{ type: core.Input }],
-        width: [{ type: core.Input }]
+        required: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        collection: [{ type: core.Input }],
+        order: [{ type: core.Input }],
+        singleColumn: [{ type: core.Input }]
     };
 
-    var SimpleGridComponent = /** @class */ (function () {
-        function SimpleGridComponent() {
-            this.defaultTextAlign = exports.ColumnAlign.Left;
+    var BaseSimpleGridComponent = /** @class */ (function () {
+        function BaseSimpleGridComponent() {
             this.data = [];
             this.dragDropEnabled = false;
+            this.inlineEdit = false;
+            this.showToolbar = false;
             /**
              * Should component emit drag and drop actions instead of handle
              * (update collection) by itself
              */
             this.emitDragDrop = false;
             this.onDrop = new core.EventEmitter();
+            this.selectRow = new core.EventEmitter();
+            this.dblClickRow = new core.EventEmitter();
+            this.saveRow = new core.EventEmitter();
             this.columns = [];
         }
-        Object.defineProperty(SimpleGridComponent.prototype, "content", {
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "content", {
             set: function (columnComponents) {
-                this.columns = columnComponents.toArray();
+                this._setColumns(columnComponents.toArray());
             },
             enumerable: false,
             configurable: true
         });
-        SimpleGridComponent.prototype.showClass = function () {
-            return true;
-        };
-        SimpleGridComponent.prototype.handleMouseMove = function (event) {
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "extraColumns", {
+            set: function (value) {
+                this._setColumns(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseSimpleGridComponent.prototype.handleMouseMove = function (event) {
             if (event.buttons === 1 && this._columnForResize) {
                 if (!this._columnForResize.width) {
                     var rect = event.target.parentElement.getBoundingClientRect();
@@ -7757,16 +8146,16 @@
                 this._columnForResize.width += event.movementX;
             }
         };
-        SimpleGridComponent.prototype.handleMouseUp = function (event) {
+        BaseSimpleGridComponent.prototype.handleMouseUp = function (event) {
             this._columnForResize = undefined;
         };
-        SimpleGridComponent.prototype.handleSizerMouseDown = function (event, column) {
+        BaseSimpleGridComponent.prototype.handleSizerMouseDown = function (event, column) {
             this._columnForResize = column;
         };
-        SimpleGridComponent.prototype.handleCanDragDrop = function (drag, drop) {
+        BaseSimpleGridComponent.prototype.handleCanDragDrop = function (drag, drop) {
             return true;
         };
-        SimpleGridComponent.prototype.handleDrop = function (event) {
+        BaseSimpleGridComponent.prototype.handleDrop = function (event) {
             try {
                 var from = event.previousIndex;
                 var to = event.currentIndex;
@@ -7784,25 +8173,457 @@
                 console.error(e);
             }
         };
-        return SimpleGridComponent;
+        BaseSimpleGridComponent.prototype._setColumns = function (columns) {
+            var _a;
+            (_a = this.columns).push.apply(_a, __spreadArray([], __read(columns)));
+            this.columns.sort(function (a, b) { return a.order < b.order ? -1 : 1; });
+        };
+        return BaseSimpleGridComponent;
     }());
+    BaseSimpleGridComponent.decorators = [
+        { type: core.Directive }
+    ];
+    BaseSimpleGridComponent.propDecorators = {
+        content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
+        data: [{ type: core.Input }],
+        dragDropEnabled: [{ type: core.Input }],
+        inlineEdit: [{ type: core.Input }],
+        showToolbar: [{ type: core.Input }],
+        emitDragDrop: [{ type: core.Input }],
+        extraColumns: [{ type: core.Input }],
+        onDrop: [{ type: core.Output }],
+        selectRow: [{ type: core.Output }],
+        dblClickRow: [{ type: core.Output }],
+        saveRow: [{ type: core.Output }],
+        handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
+        handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
+    };
+
+    var SimpleGridComponent = /** @class */ (function (_super) {
+        __extends(SimpleGridComponent, _super);
+        function SimpleGridComponent(_changeDetection, _formMaster) {
+            var _this = _super.call(this) || this;
+            _this._changeDetection = _changeDetection;
+            _this._formMaster = _formMaster;
+            _this.defaultTextAlign = exports.ColumnAlign.Left;
+            _this.editting = false;
+            _this.editRowIndex = -1;
+            _this.editCellIndex = -1;
+            _this.selectedRowIndex = -1;
+            _this._doubleClicked = false;
+            _this._newRow = false;
+            return _this;
+        }
+        SimpleGridComponent.prototype.showClass = function () {
+            return true;
+        };
+        SimpleGridComponent.prototype.handleKeyDown = function (event) {
+            var _this = this;
+            if (!this.inlineEdit) {
+                return;
+            }
+            if (event.code === 'Tab') {
+                event.preventDefault();
+                this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
+                    .then(function (index) {
+                    _this.editCellIndex = index;
+                    _this._changeDetection.markForCheck();
+                });
+                this._detectChanges();
+            }
+            if (event.code === 'Escape') {
+                this.cancelEditRow();
+            }
+            if (event.code === 'Enter') {
+                this.validateAndSave();
+            }
+        };
+        SimpleGridComponent.prototype.isSingleColumn = function (column) {
+            return column.singleColumn;
+        };
+        SimpleGridComponent.prototype.rowContainsSingleColumn = function (row, columns) {
+            var _this = this;
+            var singleColumn = columns.find(function (column) { return _this.isSingleColumn(column) && !!row[column.field]; });
+            return !!singleColumn;
+        };
+        SimpleGridComponent.prototype.addRow = function () {
+            var _this = this;
+            var valid = this.validateAndSave();
+            this._detectChanges();
+            if (valid) {
+                this.data.unshift({});
+                this._newRow = true;
+                this.editRowIndex = 0;
+                this._nextAvailableCellToEdit(true).then(function (index) {
+                    _this.editCellIndex = index;
+                });
+                this.editting = true;
+                this.rowToEdit = this.data[0];
+                this._detectChanges();
+            }
+        };
+        SimpleGridComponent.prototype.validateAndSave = function (stopEditting) {
+            if (stopEditting === void 0) { stopEditting = true; }
+            if (!this.editting) {
+                return true;
+            }
+            var valid = this._formMaster.submitSlaves();
+            this._detectChanges();
+            if (valid) {
+                this._saveRow(stopEditting);
+                return true;
+            }
+        };
+        SimpleGridComponent.prototype.cancelEditRow = function () {
+            if (!this.editting) {
+                return;
+            }
+            if (this._newRow) {
+                this.data.shift();
+            }
+            else {
+                this.data[this.editRowIndex] = this.rowToEdit;
+            }
+            this._newRow = false;
+            this.editting = false;
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleClickRow = function (event, index) {
+            var _this = this;
+            setTimeout(function () {
+                if (_this._doubleClicked) {
+                    return;
+                }
+                _this.selectTheRow(index);
+            }, 200);
+        };
+        SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
+            if (emit === void 0) { emit = true; }
+            if (this.selectedRowIndex !== index && ((this.editting && this.validateAndSave()) || !this.editting)) {
+                this.selectedRowIndex = index;
+                if (emit) {
+                    this.selectRow.next(this.data[this.selectedRowIndex]);
+                }
+            }
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleDblClickRow = function (event, index) {
+            this._doubleClicked = true;
+            this.dblClickRow.next(this.data[index]);
+            this.selectTheRow(index, false);
+            if (this.inlineEdit) {
+                this.editRow(event);
+            }
+            this._resetDblClick();
+        };
+        SimpleGridComponent.prototype.editRow = function (event) {
+            var _this = this;
+            this.editRowIndex = this.selectedRowIndex;
+            this.rowToEdit = this.data[this.editRowIndex];
+            this.editting = true;
+            this._nextAvailableCellToEdit(true).then(function (index) {
+                _this.editCellIndex = index;
+            });
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleCellClick = function (index) {
+            this.editCellIndex = index;
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype._resetDblClick = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this._doubleClicked = false;
+            }, 500);
+        };
+        /**
+         *
+         * @param next; Move to next or previous cell
+         * @param start; Start from cellindex
+         * @private
+         */
+        SimpleGridComponent.prototype._nextAvailableCellToEdit = function (next, start) {
+            var _this = this;
+            if (start === void 0) { start = -1; }
+            return new Promise(function (resolve, reject) {
+                var numEditableColumns = _this.columns.filter(function (c) { return !c.readonly; }).length;
+                var wantedIndex = start + (next ? 1 : -1);
+                if (wantedIndex >= numEditableColumns) {
+                    _this._getNextEditRowIndex()
+                        .then(function (index) {
+                        _this.editRowIndex = index;
+                        resolve(_this._getNextEditCellIndex(0));
+                    })
+                        .catch(function (e) {
+                        reject();
+                    });
+                }
+                else if (wantedIndex < 0) {
+                    _this._getPreviousEditRowIndex()
+                        .then(function (index) {
+                        _this.editRowIndex = index;
+                        resolve(_this._getPreviousEditCellIndex(_this.columns.length - 1));
+                    })
+                        .catch(function (e) {
+                        reject();
+                    });
+                }
+                else {
+                    resolve(next ? _this._getNextEditCellIndex(start + 1) : _this._getPreviousEditCellIndex(start - 1));
+                }
+            });
+        };
+        SimpleGridComponent.prototype._getNextEditCellIndex = function (start) {
+            for (var i = start; i < this.columns.length; i++) {
+                if (!this.columns[i].readonly) {
+                    return i;
+                }
+            }
+        };
+        SimpleGridComponent.prototype._getPreviousEditCellIndex = function (start) {
+            for (var i = start; i >= 0; i--) {
+                if (!this.columns[i].readonly) {
+                    return i;
+                }
+            }
+        };
+        SimpleGridComponent.prototype._getNextEditRowIndex = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                var newRowIndex = 0;
+                if (_this.editRowIndex + 1 >= _this.data.length) {
+                    newRowIndex = 0;
+                }
+                else {
+                    newRowIndex = _this.editRowIndex + 1;
+                }
+                if (newRowIndex !== _this.editRowIndex) { // go to different row validate current one first
+                    if (_this.validateAndSave(false)) {
+                        _this.rowToEdit = _this.data[newRowIndex];
+                        resolve(newRowIndex);
+                    }
+                    else {
+                        reject();
+                    }
+                }
+                else {
+                    resolve(newRowIndex);
+                }
+            });
+        };
+        SimpleGridComponent.prototype._getPreviousEditRowIndex = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                var newRowIndex = 0;
+                if (_this.editRowIndex - 1 < 0) {
+                    newRowIndex = _this.data.length - 1;
+                }
+                else {
+                    newRowIndex = _this.editRowIndex - 1;
+                }
+                if (newRowIndex !== _this.editRowIndex) { // go to different row validate current one first
+                    if (_this.validateAndSave(false)) {
+                        _this.rowToEdit = _this.data[newRowIndex];
+                        resolve(newRowIndex);
+                    }
+                    else {
+                        reject();
+                    }
+                }
+                else {
+                    resolve(newRowIndex);
+                }
+            });
+        };
+        SimpleGridComponent.prototype._saveRow = function (stopEditting) {
+            if (stopEditting === void 0) { stopEditting = true; }
+            // emit saveEvent
+            if (this.rowToEdit) {
+                this.saveRow.next(this.rowToEdit);
+            }
+            this._newRow = false;
+            if (stopEditting) {
+                this.editRowIndex = -1;
+                this.editCellIndex = -1;
+                this.editting = false;
+                this.rowToEdit = undefined;
+            }
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype._detectChanges = function () {
+            this._changeDetection.detectChanges();
+        };
+        return SimpleGridComponent;
+    }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid",
-                    template: "\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" *ngFor=\"let row of data\" cdkDrag>\n          <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns\"\n               [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n            <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n              <ng-container *ngIf=\"column.template\">\n                <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n              </ng-container>\n              <div  *ngIf=\"!column.template\" [textContent]=\"row[column.field]\"></div>\n            </div>\n            <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\" [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\"\n             [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n             (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns; let columnIndex = index\"\n                 [style.min-width]=\"isSingleColumn(column) ? 'fit-content' : column.width\" [style.max-width.px]=\"column.width\"\n                 [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\" >\n                <co-simple-grid-cell\n                  [column]=\"column\"\n                  [row]=\"row\"\n                  [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex && !isSingleColumn(column) && !rowContainsSingleColumn(row, columns)\"\n                  [fieldEditMode]=\"editCellIndex === columnIndex\"\n                  (cellClick)=\"handleCellClick(columnIndex)\"\n                ></co-simple-grid-cell>\n              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n            </div>\n          </co-form>\n        </div>\n      </div>\n    </div>\n  ",
+                    providers: [
+                        FormMasterService
+                    ],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    SimpleGridComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: FormMasterService }
+    ]; };
     SimpleGridComponent.propDecorators = {
-        content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
-        data: [{ type: core.Input }],
-        dragDropEnabled: [{ type: core.Input }],
-        emitDragDrop: [{ type: core.Input }],
-        onDrop: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid",] }],
-        handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
-        handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
+        handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
+    };
+
+    var SimpleGridCellComponent = /** @class */ (function () {
+        function SimpleGridCellComponent(_changeDetector) {
+            this._changeDetector = _changeDetector;
+            this.defaultTextAlign = exports.ColumnAlign.Left;
+            this.editMode = false;
+            this.cellClick = new core.EventEmitter();
+            this._fieldEditMode = false;
+            this._focused = false;
+        }
+        Object.defineProperty(SimpleGridCellComponent.prototype, "editTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._editTemplate = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noEditTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._template = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._inputTemplate = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "fieldEditMode", {
+            get: function () {
+                return this._fieldEditMode;
+            },
+            set: function (value) {
+                this._fieldEditMode = value;
+                this._setFocusComponent();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SimpleGridCellComponent.prototype.showClass = function () {
+            return true;
+        };
+        SimpleGridCellComponent.prototype.handleClick = function (event) {
+            if (this.column && !this.column.readonly) {
+                this.cellClick.next();
+            }
+        };
+        SimpleGridCellComponent.prototype._setFocusComponent = function () {
+            if (this.editMode && this.fieldEditMode) {
+                var element = this._getElement();
+                if (element) {
+                    var focusEvent = this._createNewEvent(element, 'focus');
+                    element.focus();
+                    element.dispatchEvent(focusEvent);
+                    this._focused = true;
+                }
+            }
+            else {
+                if (this._focused) {
+                    var element = this._getElement();
+                    if (element) {
+                        var blurEvent = this._createNewEvent(element, 'blur');
+                        element.blur();
+                        element.dispatchEvent(blurEvent);
+                    }
+                    this._focused = false;
+                }
+            }
+            this._detectChanges();
+        };
+        SimpleGridCellComponent.prototype._getFirstFormInput = function (parent) {
+            if (parent) {
+                var collection_1 = Array.from(parent.getElementsByTagName('input'));
+                var otherCollection = Array.from(parent.getElementsByTagName('textarea'));
+                otherCollection.map(function (o) { return collection_1.push(o); });
+                if (collection_1.length > 0) {
+                    return collection_1[0];
+                }
+            }
+        };
+        SimpleGridCellComponent.prototype._createNewEvent = function (element, eventType) {
+            var event;
+            if ("createEvent" in document) {
+                event = document.createEvent("Event");
+                event.initEvent(eventType, true, true);
+            }
+            else if ("Event" in window) {
+                event = new Event(eventType, { bubbles: true, cancelable: true });
+            }
+            return event;
+        };
+        SimpleGridCellComponent.prototype._getElement = function () {
+            var templ;
+            if (this._editTemplate) {
+                templ = this._editTemplate;
+            }
+            else if (this._template) {
+                templ = this._template;
+            }
+            else {
+                templ = this._inputTemplate;
+            }
+            if (templ) {
+                if (templ && templ.elementRef) {
+                    var inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
+                    if (inputElement) {
+                        return inputElement;
+                    }
+                }
+            }
+        };
+        SimpleGridCellComponent.prototype._detectChanges = function () {
+            this._changeDetector.detectChanges();
+        };
+        return SimpleGridCellComponent;
+    }());
+    SimpleGridCellComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-simple-grid-cell",
+                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <div [textContent]=\"column.getFieldValue(row[column.field])\"></div>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None,
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    SimpleGridCellComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    SimpleGridCellComponent.propDecorators = {
+        editTemplateContent: [{ type: core.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
+        noEditTemplateContent: [{ type: core.ViewChild, args: ["noEditTemplate",] }],
+        noTemplateContent: [{ type: core.ViewChild, args: ["noTemplate",] }],
+        column: [{ type: core.Input }],
+        row: [{ type: core.Input }],
+        editMode: [{ type: core.Input }],
+        fieldEditMode: [{ type: core.Input }],
+        cellClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid-cell",] }],
+        handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
     };
 
     var SimpleGridModule = /** @class */ (function () {
@@ -7814,14 +8635,19 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        dragDrop.DragDropModule
+                        dragDrop.DragDropModule,
+                        GridToolbarModule,
+                        InputTextModule,
+                        FormModule
                     ],
                     declarations: [
                         SimpleGridComponent,
+                        SimpleGridCellComponent,
                         SimpleGridColumnDirective
                     ],
                     exports: [
                         SimpleGridComponent,
+                        SimpleGridCellComponent,
                         SimpleGridColumnDirective
                     ]
                 },] }
@@ -8085,11 +8911,7 @@
             boundingBox.getSize(size);
             // get the max side of the bounding box (fits to width OR height as needed )
             var maxDim = Math.max(size.x, size.y, size.z);
-            var fov = this._camera.fov * (Math.PI / 180);
-            // let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 200));
-            var cameraZ = Math.abs((maxDim / 2) / Math.tan(fov / 2));
-            // cameraZ *= offset; // zoom out a little so that objects don't fill the screen
-            this._camera.position.z = cameraZ;
+            this._camera.position.z = Math.abs((maxDim / 2) * Math.atan(this._camera.fov / 2));
             this._camera.lookAt(center);
         };
         Carousel3dComponent.prototype._checkNavigationButtons = function () {
@@ -8226,6 +9048,8 @@
     exports.CoDialogModule = CoDialogModule;
     exports.CoDialogPromptComponent = CoDialogPromptComponent;
     exports.CoDialogPromptModule = CoDialogPromptModule;
+    exports.CoDialogWizardComponent = CoDialogWizardComponent;
+    exports.CoDialogWizardModule = CoDialogWizardModule;
     exports.CoGridComponent = CoGridComponent;
     exports.CoGridModule = CoGridModule;
     exports.CoKanbanComponent = CoKanbanComponent;
@@ -8289,6 +9113,8 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
+    exports["ɵba"] = BaseSimpleGridComponent;
+    exports["ɵbb"] = SimpleGridCellComponent;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;
@@ -8300,15 +9126,19 @@
     exports["ɵk"] = FormInputUserModelChangeListenerService;
     exports["ɵl"] = NgZoneWrapperService;
     exports["ɵm"] = BaseInputComponent;
-    exports["ɵn"] = BaseSelectionGridComponent;
-    exports["ɵo"] = BaseInlineEditGridComponent;
-    exports["ɵp"] = BaseToolbarGridComponent;
-    exports["ɵq"] = BaseGridComponent;
-    exports["ɵr"] = AppendPipeModule;
-    exports["ɵs"] = AppendPipe;
-    exports["ɵt"] = ValidationErrorModule;
-    exports["ɵu"] = ValidationErrorComponent;
-    exports["ɵv"] = PopupShowerService;
+    exports["ɵn"] = GridToolbarModule;
+    exports["ɵo"] = GridToolbarComponent;
+    exports["ɵp"] = BaseSelectionGridComponent;
+    exports["ɵq"] = BaseInlineEditGridComponent;
+    exports["ɵr"] = BaseToolbarGridComponent;
+    exports["ɵs"] = BaseGridComponent;
+    exports["ɵt"] = AppendPipeModule;
+    exports["ɵu"] = AppendPipe;
+    exports["ɵv"] = ValidationErrorModule;
+    exports["ɵw"] = ValidationErrorComponent;
+    exports["ɵx"] = CommitButtonsModule;
+    exports["ɵy"] = CommitButtonsComponent;
+    exports["ɵz"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });