@colijnit/corecomponents_v12 12.0.19 → 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;
@@ -2972,7 +3022,14 @@
     CollapsibleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-collapsible",
-                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n      <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\">\n      <ng-content></ng-content>\n    </div>\n  ",
+                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n      <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideContent', [
+                            animations.state('*', animations.style({ height: '*' })),
+                            animations.state('void', animations.style({ height: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -3101,7 +3158,9 @@
     }
 
     var ValidationErrorComponent = /** @class */ (function () {
-        function ValidationErrorComponent() {
+        function ValidationErrorComponent(icons) {
+            this.icons = icons;
+            this.Icons = exports.CoreComponentsIcon;
         }
         ValidationErrorComponent.prototype.showClass = function () {
             return true;
@@ -3111,13 +3170,18 @@
     ValidationErrorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-validation-error",
-                    template: "\n    <div class=\"validation-error-content\">\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
+                    template: "\n    <div class=\"validation-error-content\">\n      <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
                     animations: [],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    ValidationErrorComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
     ValidationErrorComponent.propDecorators = {
         error: [{ type: core.Input }],
+        top: [{ type: core.HostBinding, args: ['style.top.px',] }, { type: core.Input }],
+        left: [{ type: core.HostBinding, args: ['style.left.px',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-validation-error',] }]
     };
 
@@ -3133,10 +3197,13 @@
             this.formUserChangeListener = formUserChangeListener;
             this.ngZoneWrapper = ngZoneWrapper;
             this.elementRef = elementRef;
+            this.showSaveCancel = false;
             this.noValidation = false;
             this.forceRequired = false; // a force outside of [cfgName]'s influence
             // Goal: ability to emulate the red background of input fields (form-submitted invalid state)
             this.redErrorBackground = false;
+            // @Output()
+            // public commit: EventEmitter<any> = new EventEmitter<any>();
             this.nativeBlur = new core.EventEmitter();
             this.blur = new core.EventEmitter();
             // emits when the enter button on keyboard was pressed while this form input had focussed
@@ -3155,12 +3222,21 @@
             this.fullWidth = false;
             this.excludeUserModelChange = false;
             this.noFormGroupControl = false;
+            this.keepFocus = false;
+            this.canSaveOrCancel = false;
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
+            this._initialModelSet = false;
             this._forceReadonly = undefined;
             this._validators = [];
             this._asyncValidators = [];
+            // descendents should override this
+            this.commit = function (model) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, Promise.resolve(true)];
+                });
+            }); };
             BaseInputComponent.BaseFormInputComponentIndex++;
             this.name = BaseInputComponent.BaseFormInputComponentIndex.toString();
             if (this.formUserChangeListener) {
@@ -3186,7 +3262,12 @@
                 return this._model;
             },
             set: function (value) {
+                if (!this._initialModelSet) {
+                    this._initialModel = this._model;
+                    this._initialModelSet = true;
+                }
                 this._model = value;
+                this.canSaveOrCancel = this._model !== this._initialModel;
                 this._clearErrorComponent();
             },
             enumerable: false,
@@ -3407,6 +3488,30 @@
             enumerable: false,
             configurable: true
         });
+        BaseInputComponent.prototype.onClick = function (event) {
+            if (this.canChange && !this.noClickFocus) {
+                this.requestFocus();
+                if (!this.excludeUserModelChange) {
+                    this.markAsUserTouched();
+                }
+            }
+        };
+        BaseInputComponent.prototype.onFocusIn = function () {
+            if (!this.excludeUserModelChange) {
+                this.markAsUserTouched();
+            }
+        };
+        BaseInputComponent.prototype.handleDocumentScroll = function () {
+            this._positionValidationError();
+        };
+        BaseInputComponent.prototype.handleWindowResize = function () {
+            this._positionValidationError();
+        };
+        BaseInputComponent.prototype.handleKeyDown = function (event) {
+            if (this.showSaveCancel && this.canSaveOrCancel) {
+                this._handleKeyDown(event);
+            }
+        };
         Object.defineProperty(BaseInputComponent.prototype, "canChange", {
             get: function () {
                 return !this.readonly && !this.disabled;
@@ -3435,27 +3540,15 @@
             enumerable: false,
             configurable: true
         });
-        BaseInputComponent.prototype.showValidationError = function (error) {
-            if (this.validationErrorContainer) {
-                if (this._errorValidationComponent) {
-                    this._clearErrorComponent();
-                }
-                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
-                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-                this._errorValidationComponent.instance.error = error;
-            }
-        };
         BaseInputComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
-            // if (this.speechInput) {
-            //     this._subscribeToSpeechInput();
-            // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this._prepareInput();
             this._updateControlValidatorsAndOwnFlags();
             this._addOrRemoveSelfFromForm();
             if (this.formComponent) {
@@ -3469,6 +3562,11 @@
             }
         };
         BaseInputComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            if (this.input) {
+                this.input.removeEventListener('blur', function (event) { return _this.doBlur(event); });
+                this.input.removeEventListener('focus', function (event) { return _this.doFocus(event); });
+            }
             this._destroyed = true;
             this._clearErrorComponent();
             // if (this.tooltipManager && this.elementRef) {
@@ -3492,7 +3590,41 @@
             // this._removeSelfFromForm();
             this.elementRef = undefined;
             this.changeDetector = undefined;
-            // this.input = undefined;
+            this.input = undefined;
+        };
+        BaseInputComponent.prototype.commitClick = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.keepFocus = true;
+                            return [4 /*yield*/, this.commit(this.model)];
+                        case 1:
+                            _a.sent();
+                            this.keepFocus = false;
+                            this.doBlur(event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BaseInputComponent.prototype.cancelClick = function (event) {
+            this.keepFocus = true;
+            if (this._initialModelSet) {
+                this.model = this._initialModel;
+            }
+            this.keepFocus = false;
+        };
+        BaseInputComponent.prototype.showValidationError = function (error) {
+            if (this.validationErrorContainer) {
+                if (this._errorValidationComponent) {
+                    this._clearErrorComponent();
+                }
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+                this._errorValidationComponent.instance.error = error;
+                this._positionValidationError();
+            }
         };
         /**
          * Emits a modelChange event with given value, indicating that the model of this form input
@@ -3509,28 +3641,36 @@
                 this.detectChanges();
             }
         };
-        BaseInputComponent.prototype.onClick = function (event) {
-            if (this.canChange && !this.noClickFocus) {
-                this.requestFocus();
-                if (!this.excludeUserModelChange) {
-                    this.markAsUserTouched();
-                }
-            }
-        };
-        BaseInputComponent.prototype.onFocusIn = function () {
-            if (!this.excludeUserModelChange) {
-                this.markAsUserTouched();
-            }
-        };
         BaseInputComponent.prototype.requestFocus = function () {
             if (this.canChange && this.input) {
                 this.input.focus();
                 this.focused = true;
             }
         };
-        BaseInputComponent.prototype.doBlur = function () {
-            this.input.blur();
-            this.focused = false;
+        BaseInputComponent.prototype.doFocus = function (event) {
+            if (this.disabled) {
+                return;
+            }
+            this._initialModelSet = false;
+            this.focused = true;
+            this.canSaveOrCancel = false;
+            this.focus.next();
+        };
+        BaseInputComponent.prototype.doBlur = function (event) {
+            var _this = this;
+            setTimeout(function () {
+                if (_this.keepFocus) {
+                    if (event) {
+                        event.preventDefault;
+                    }
+                    return false;
+                }
+                _this.focused = false;
+                if (_this.input) {
+                    _this.input.blur();
+                }
+                _this.blur.next();
+            }, 200);
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -3583,7 +3723,7 @@
             if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
                 return;
             }
-            if (maxLength > 0) { // not maxLength is 0
+            if (!isNaN(maxLength)) {
                 this._maxLength = maxLength;
                 this._updateControlValidatorsAndOwnFlags();
             }
@@ -3663,7 +3803,7 @@
             }
         };
         BaseInputComponent.prototype._setNativeMaxLength = function (maxlength) {
-            if (this.input) {
+            if (this.input && !isNaN(maxlength)) {
                 this.input.maxLength = maxlength;
             }
         };
@@ -3709,6 +3849,102 @@
                 this.formComponent.addFormInput(this.myFormInputInstance ? this.myFormInputInstance : this);
             }
         };
+        BaseInputComponent.prototype._prepareInput = function () {
+            var _this = this;
+            if (this.elementRef && this.elementRef.nativeElement) {
+                //try to find input element
+                this.input = this._findInputNode(this.elementRef.nativeElement.children);
+                if (this.input) {
+                    this.input.addEventListener('blur', function (event) { return _this.doBlur(event); });
+                    this.input.addEventListener('focus', function (event) { return _this.doFocus(event); });
+                }
+            }
+        };
+        BaseInputComponent.prototype._findInputNode = function (nodes) {
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+                    return node;
+                }
+                else if (node.children.length > 0) {
+                    return this._findInputNode(node.children);
+                }
+            }
+        };
+        BaseInputComponent.prototype._positionValidationError = function () {
+            if (this.elementRef && this.elementRef.nativeElement && this._errorValidationComponent) {
+                var clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+                this._errorValidationComponent.instance.top = clientRect.bottom;
+                this._errorValidationComponent.instance.left = clientRect.left;
+            }
+        };
+        BaseInputComponent.prototype._handleKeyDown = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, nextSiblingToFocus;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = event.code;
+                            switch (_a) {
+                                case 'Enter': return [3 /*break*/, 1];
+                                case 'Tab': return [3 /*break*/, 3];
+                                case 'Escape': return [3 /*break*/, 5];
+                            }
+                            return [3 /*break*/, 6];
+                        case 1:
+                            event.preventDefault();
+                            return [4 /*yield*/, this.commitClick()];
+                        case 2:
+                            _b.sent();
+                            return [2 /*return*/, false];
+                        case 3:
+                            nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
+                            event.preventDefault();
+                            return [4 /*yield*/, this.commitClick()];
+                        case 4:
+                            _b.sent();
+                            if (nextSiblingToFocus) {
+                                try {
+                                    this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                                }
+                                catch (e) {
+                                }
+                            }
+                            return [2 /*return*/, false];
+                        case 5:
+                            this.cancelClick();
+                            event.preventDefault();
+                            return [2 /*return*/, false];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BaseInputComponent.prototype._createNewFocusEvent = function (element) {
+            var eventType = "onfocusin" in element ? "focusin" : "focus", bubbles = "onfocusin" in element, focusEvent;
+            if ("createEvent" in document) {
+                focusEvent = document.createEvent("Event");
+                focusEvent.initEvent(eventType, bubbles, true);
+            }
+            else if ("Event" in window) {
+                focusEvent = new Event(eventType, { bubbles: bubbles, cancelable: true });
+            }
+            return focusEvent;
+        };
+        BaseInputComponent.prototype._setFocusOnNextPossibleInput = function (element, previous) {
+            var elementColl = element.getElementsByTagName('input');
+            if (elementColl && elementColl.length > 0) {
+                var inputElement = elementColl[0];
+                if (inputElement.disabled || inputElement.readOnly) {
+                    this._setFocusOnNextPossibleInput(previous ? element.previousSibling : element.nextSibling, previous);
+                }
+                else {
+                    var focusEvent = this._createNewFocusEvent(element);
+                    inputElement.focus();
+                    inputElement.dispatchEvent(focusEvent);
+                }
+            }
+        };
         return BaseInputComponent;
     }());
     BaseInputComponent.BaseFormInputComponentIndex = 0;
@@ -3726,6 +3962,8 @@
     ]; };
     BaseInputComponent.propDecorators = {
         validationErrorContainer: [{ type: core.ViewChild, args: ["validationError", { read: core.ViewContainerRef },] }],
+        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
+        showSaveCancel: [{ type: core.Input }],
         model: [{ type: core.Input }],
         label: [{ type: core.Input }],
         noValidation: [{ type: core.Input }],
@@ -3755,7 +3993,6 @@
         modelChange: [{ type: core.Output }],
         userModelChange: [{ type: core.Output }],
         hiddenChange: [{ type: core.Output }],
-        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
         focused: [{ type: core.HostBinding, args: ["class.cc-input-focused",] }],
         formInput: [{ type: core.HostBinding, args: ["class.form-input",] }],
         customWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.custom-width",] }],
@@ -3775,7 +4012,10 @@
         valid: [{ type: core.HostBinding, args: ["class.valid",] }],
         validationDisabled: [{ type: core.HostBinding, args: ["class.no-validation",] }],
         onClick: [{ type: core.HostListener, args: ["click", ["$event"],] }],
-        onFocusIn: [{ type: core.HostListener, args: ["focusin",] }]
+        onFocusIn: [{ type: core.HostListener, args: ["focusin",] }],
+        handleDocumentScroll: [{ type: core.HostListener, args: ["document:scroll",] }],
+        handleWindowResize: [{ type: core.HostListener, args: ["window:resize",] }],
+        handleKeyDown: [{ type: core.HostListener, args: ["keydown", ["$event"],] }]
     };
     __decorate([
         InputBoolean()
@@ -3930,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();
@@ -4014,19 +4255,20 @@
         FormComponent.prototype.isValid = function () {
             return this._init && this.formGroup.valid;
         };
-        FormComponent.prototype.onEnterKey = function (event) {
-            var target = event.target;
-            if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
-                return;
-            }
-            if (target.isContentEditable) {
-                return;
-            }
-            if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
-                return;
-            }
-            this.submit();
-        };
+        // @HostListener('keyup.enter', ['$event'])
+        // onEnterKey(event: KeyboardEvent): void {
+        //     const target: HTMLElement = <HTMLElement>event.target;
+        //     if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
+        //         return;
+        //     }
+        //     if (target.isContentEditable) {
+        //         return;
+        //     }
+        //     if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
+        //         return;
+        //     }
+        //     this.submit();
+        // }
         FormComponent.prototype.reset = function () {
             this.submitted = false;
             this.formGroup.markAsUntouched();
@@ -4082,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 [
@@ -4092,13 +4335,13 @@
         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 }],
         validityChange: [{ type: core.Output }],
         readonlyChange: [{ type: core.Output }],
-        invalidSubmit: [{ type: core.Output }],
-        onEnterKey: [{ type: core.HostListener, args: ['keyup.enter', ['$event'],] }]
+        invalidSubmit: [{ type: core.Output }]
     };
 
     var DropDownListComponent = /** @class */ (function (_super) {
@@ -4138,6 +4381,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return DropDownListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: DropDownListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -4212,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;
@@ -4249,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 }],
@@ -4387,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", {
@@ -4406,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 = [
@@ -4420,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()
@@ -4438,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;
         }
@@ -4489,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 = [
@@ -4503,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()
@@ -4528,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
                     ],
@@ -4539,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() {
         }
@@ -4549,7 +4916,8 @@
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        ej2AngularGrids.GridModule
+                        ej2AngularGrids.GridModule,
+                        GridToolbarModule
                     ],
                     declarations: [CoGridComponent],
                     exports: [CoGridComponent],
@@ -4607,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
@@ -4708,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
@@ -4761,7 +5135,6 @@
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
-            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -4782,6 +5155,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputComboBoxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -4801,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 () {
@@ -4884,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
                 },] }
@@ -5287,11 +5665,21 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n           (focus)=\"focused = true\"\n           (blur)=\"focused = false\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    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; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: 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
                 },] }
     ];
@@ -5575,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
@@ -5617,7 +6008,8 @@
     ValidationErrorModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        common.CommonModule
+                        common.CommonModule,
+                        IconModule
                     ],
                     declarations: [
                         ValidationErrorComponent
@@ -5700,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
@@ -5764,10 +6159,13 @@
     InputTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-textarea",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea type=\"textarea\"\n              [ngModel]=\"model\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              (ngModelChange)=\"modelChange.emit($event)\"\n              (focus)=\"focused = true\"\n              (blur)=\"focused = false\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextareaComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -5859,6 +6257,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: MultiSelectListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -7443,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
                 },] }
@@ -7498,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 () {
@@ -7511,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;
@@ -7520,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();
@@ -7561,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;
@@ -7588,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() {
         }
@@ -7618,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
                     ]
                 },] }
@@ -7745,6 +8610,7 @@
                 this._createTiles();
             }
             this._checkNavigationButtons();
+            this._resizeCanvasToDisplaySize();
         };
         Carousel3dComponent.prototype._init = function () {
             var _this = this;
@@ -7888,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 () {
@@ -7951,11 +8813,17 @@
             this._rotate(800);
         };
         Carousel3dComponent.prototype._resizeCanvasToDisplaySize = function () {
-            this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
-            this._camera.updateProjectionMatrix();
-            this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
-            this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
-            this._render();
+            var _this = this;
+            setTimeout(function () {
+                if (!_this.canvasContainer || !_this.canvasContainer.nativeElement) {
+                    return;
+                }
+                _this._camera.aspect = _this.canvasContainer.nativeElement.clientWidth / _this.canvasContainer.nativeElement.clientHeight;
+                _this._camera.updateProjectionMatrix();
+                _this._rendererCss.setSize(_this.canvasContainer.nativeElement.clientWidth, _this.canvasContainer.nativeElement.clientHeight);
+                _this._renderer.setSize(_this.canvasContainer.nativeElement.clientWidth, _this.canvasContainer.nativeElement.clientHeight);
+                _this._render();
+            });
         };
         Carousel3dComponent.prototype._render = function () {
             this._rendererCss.render(this._sceneCss, this._camera);
@@ -8023,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;
@@ -8075,6 +8945,8 @@
     exports.PopupMessageDisplayComponent = PopupMessageDisplayComponent;
     exports.PopupModule = PopupModule;
     exports.PopupWindowShellComponent = PopupWindowShellComponent;
+    exports.PriceDisplayPipe = PriceDisplayPipe;
+    exports.PriceDisplayPipeModule = PriceDisplayPipeModule;
     exports.PromptService = PromptService;
     exports.SimpleGridColumnDirective = SimpleGridColumnDirective;
     exports.SimpleGridComponent = SimpleGridComponent;
@@ -8090,13 +8962,13 @@
     exports["ɵf"] = CoScrollableDirective;
     exports["ɵg"] = StopClickModule;
     exports["ɵh"] = StopClickDirective;
-    exports["ɵi"] = PriceDisplayPipeModule;
-    exports["ɵj"] = PriceDisplayPipe;
-    exports["ɵk"] = InputBoolean;
-    exports["ɵl"] = BaseModule;
-    exports["ɵm"] = FormInputUserModelChangeListenerService;
-    exports["ɵn"] = NgZoneWrapperService;
-    exports["ɵo"] = BaseInputComponent;
+    exports["ɵi"] = InputBoolean;
+    exports["ɵj"] = BaseModule;
+    exports["ɵk"] = FormInputUserModelChangeListenerService;
+    exports["ɵl"] = NgZoneWrapperService;
+    exports["ɵm"] = BaseInputComponent;
+    exports["ɵn"] = GridToolbarModule;
+    exports["ɵo"] = GridToolbarComponent;
     exports["ɵp"] = BaseSelectionGridComponent;
     exports["ɵq"] = BaseInlineEditGridComponent;
     exports["ɵr"] = BaseToolbarGridComponent;
@@ -8106,6 +8978,8 @@
     exports["ɵv"] = ValidationErrorModule;
     exports["ɵw"] = ValidationErrorComponent;
     exports["ɵx"] = PopupShowerService;
+    exports["ɵy"] = BaseSimpleGridComponent;
+    exports["ɵz"] = SimpleGridCellComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });