@colijnit/corecomponents_v12 12.0.21 → 12.0.22

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@angular/forms'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/cdk/drag-drop'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@angular/forms', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@syncfusion/ej2-angular-richtexteditor', '@angular/cdk/drag-drop', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ng.forms, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ej2AngularRichtexteditor, global.ng.cdk.dragDrop, global.three, global.CSS3DRenderer, global.TWEEN));
-})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, forms, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, ej2AngularRichtexteditor, dragDrop, three, CSS3DRenderer, TWEEN) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@angular/forms'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('rxjs/internal/observable/fromEvent'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/cdk/drag-drop'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@angular/forms', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', 'rxjs/internal/observable/fromEvent', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@syncfusion/ej2-angular-richtexteditor', '@angular/cdk/drag-drop', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ng.forms, global.ej2AngularDropdowns, global.ej2AngularGrids, global.rxjs["internal/observable/fromEvent"], global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ej2AngularRichtexteditor, global.ng.cdk.dragDrop, global.three, global.CSS3DRenderer, global.TWEEN));
+})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, forms, ej2AngularDropdowns, ej2AngularGrids, fromEvent, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, ej2AngularRichtexteditor, dragDrop, three, CSS3DRenderer, TWEEN) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -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;
@@ -3616,7 +3666,9 @@
                     return false;
                 }
                 _this.focused = false;
-                _this.input.blur();
+                if (_this.input) {
+                    _this.input.blur();
+                }
                 _this.blur.next();
             }, 200);
         };
@@ -4118,6 +4170,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 +4324,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 +4335,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 +4381,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return DropDownListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: DropDownListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -4400,7 +4458,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 +4496,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 +4637,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 +4660,61 @@
             enumerable: false,
             configurable: true
         });
+        BaseInlineEditGridComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (this.grid) {
+                this.actionBeginObservable$ = fromEvent.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$ = fromEvent.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 +4722,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 +4742,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 +4795,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 +4815,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 +4842,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      <co-grid-toolbar></co-grid-toolbar>\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 +4853,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 +4916,8 @@
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        ej2AngularGrids.GridModule
+                        ej2AngularGrids.GridModule,
+                        GridToolbarModule
                     ],
                     declarations: [CoGridComponent],
                     exports: [CoGridComponent],
@@ -4795,6 +4975,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 +5079,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 +5135,6 @@
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
-            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -4970,6 +5155,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputComboBoxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -4989,8 +5177,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 +5259,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
                 },] }
@@ -5479,6 +5669,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextComponent
                         }],
                     animations: [
                         animations.trigger('showHideSaveCancel', [
@@ -5770,6 +5963,9 @@
                     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  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputNumberPickerComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputNumberPickerComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -5896,6 +6092,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 +6163,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextareaComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -6055,6 +6257,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: MultiSelectListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -7639,6 +7844,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 +7902,8 @@
     var SimpleGridColumnDirective = /** @class */ (function () {
         function SimpleGridColumnDirective() {
             this.resizable = true;
+            this.required = false;
+            this.readonly = false;
         }
         Object.defineProperty(SimpleGridColumnDirective.prototype, "template", {
             get: function () {
@@ -7707,6 +7917,28 @@
             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.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;
+        };
         return SimpleGridColumnDirective;
     }());
     SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
@@ -7716,39 +7948,46 @@
                 },] }
     ];
     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 }]
     };
 
-    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();
             },
             enumerable: false,
             configurable: true
         });
-        SimpleGridComponent.prototype.showClass = function () {
-            return true;
-        };
-        SimpleGridComponent.prototype.handleMouseMove = function (event) {
+        BaseSimpleGridComponent.prototype.handleMouseMove = function (event) {
             if (event.buttons === 1 && this._columnForResize) {
                 if (!this._columnForResize.width) {
                     var rect = event.target.parentElement.getBoundingClientRect();
@@ -7757,16 +7996,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,27 +8023,452 @@
                 console.error(e);
             }
         };
-        return SimpleGridComponent;
+        return 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  ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
+    BaseSimpleGridComponent.decorators = [
+        { type: core.Directive }
     ];
-    SimpleGridComponent.propDecorators = {
+    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 }],
         onDrop: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid",] }],
+        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._detectChanges();
+            }
+            if (event.code === 'Escape') {
+                this.cancelEditRow();
+            }
+            if (event.code === 'Enter') {
+                this.validateAndSave();
+            }
+        };
+        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 () {
+            // setTimeout(() => {
+            // this._changeDetection.markForCheck();
+            // this._changeDetection.reattach();
+            this._changeDetection.detectChanges();
+            // this._changeDetection.detach();
+            // });
+        };
+        return SimpleGridComponent;
+    }(BaseSimpleGridComponent));
+    SimpleGridComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-simple-grid",
+                    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\">\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\" [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.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n              <co-simple-grid-cell\n                [column]=\"column\"\n                [row]=\"row\"\n                [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex\"\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: ChangeDetectionStrategy.OnPush,
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    SimpleGridComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: FormMasterService }
+    ]; };
+    SimpleGridComponent.propDecorators = {
+        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid",] }],
+        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 () {
+            // setTimeout(() => {
+            this._changeDetector.markForCheck();
+            // 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\" [ngTemplateOutlet]=\"column.editTemplate\" [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\" [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\" [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: 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 () {
         function SimpleGridModule() {
         }
@@ -7814,14 +8478,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 +8754,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 +8891,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;
@@ -8300,15 +8967,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"] = PopupShowerService;
+    exports["ɵy"] = BaseSimpleGridComponent;
+    exports["ɵz"] = SimpleGridCellComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });