@colijnit/corecomponents_v12 12.0.20 → 12.0.23

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
                 },] }
@@ -3140,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
@@ -3162,12 +3222,23 @@
             this.fullWidth = false;
             this.excludeUserModelChange = false;
             this.noFormGroupControl = false;
+            this.keepFocus = false;
+            this.canSaveOrCancel = false;
+            this.committing = false;
+            this.commitFinished = true;
             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) {
@@ -3193,7 +3264,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,
@@ -3414,6 +3490,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;
@@ -3447,18 +3547,6 @@
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
-            var iOptions = {
-                trackVisibility: true,
-                // 🆕 Set a minimum delay between notifications
-                delay: 100,
-                // root: document,
-                // rootMargin: "1px",
-                threshold: 1
-            };
-            this.intersectionObserver = new IntersectionObserver(function (entries, observer) { return _this._handleElementPositionChange(entries, observer); }, iOptions);
-            // if (this.speechInput) {
-            //     this._subscribeToSpeechInput();
-            // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -3478,8 +3566,8 @@
         BaseInputComponent.prototype.ngOnDestroy = function () {
             var _this = this;
             if (this.input) {
-                this.input.removeEventListener('blur', function () { return _this.doBlur(); });
-                this.input.removeEventListener('focus', function () { return _this.doFocus(); });
+                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();
@@ -3506,18 +3594,49 @@
             this.changeDetector = undefined;
             this.input = undefined;
         };
+        BaseInputComponent.prototype.commitClick = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var success;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.keepFocus = true;
+                            this.commitFinished = false;
+                            this.committing = true;
+                            return [4 /*yield*/, this.commit(this.model)];
+                        case 1:
+                            success = _a.sent();
+                            this.keepFocus = false;
+                            return [4 /*yield*/, this._commitFinished()];
+                        case 2:
+                            _a.sent();
+                            if (success) {
+                                this.doBlur(event);
+                            }
+                            return [2 /*return*/, success];
+                    }
+                });
+            });
+        };
+        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 clientRect = this.elementRef.nativeElement.getBoundingClientRect();
                 var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
                 this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-                this._errorValidationComponent.instance.top = clientRect.bottom;
-                this._errorValidationComponent.instance.left = clientRect.left;
                 this._errorValidationComponent.instance.error = error;
-                this.intersectionObserver.observe(this.elementRef.nativeElement);
+                if (this._hasOnPushCdStrategy) {
+                    this.changeDetector.markForCheck();
+                }
+                this._positionValidationError();
             }
         };
         /**
@@ -3535,32 +3654,45 @@
                 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;
+                if (this._hasOnPushCdStrategy) {
+                    this.markForCheck();
+                }
             }
         };
-        BaseInputComponent.prototype.doFocus = function () {
+        BaseInputComponent.prototype.doFocus = function (event) {
+            if (this.disabled) {
+                return;
+            }
+            this._initialModelSet = false;
             this.focused = true;
+            this.canSaveOrCancel = false;
+            if (this._hasOnPushCdStrategy) {
+                this.markForCheck();
+            }
             this.focus.next();
         };
-        BaseInputComponent.prototype.doBlur = function () {
-            this.focused = false;
-            this.blur.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._hasOnPushCdStrategy) {
+                    _this.markForCheck();
+                }
+                if (_this.input) {
+                    _this.input.blur();
+                }
+                _this.blur.next();
+            }, 200);
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -3671,6 +3803,16 @@
                 this.control.updateValueAndValidity();
             }
         };
+        BaseInputComponent.prototype._commitFinished = function () {
+            var _this = this;
+            return new Promise(function (resolve) {
+                _this.commitFinished = true;
+                setTimeout(function () {
+                    _this.committing = false;
+                    resolve();
+                }, 800);
+            });
+        };
         BaseInputComponent.prototype._clearErrorComponent = function () {
             if (this.validationErrorContainer) {
                 this.validationErrorContainer.clear();
@@ -3678,9 +3820,6 @@
                     this._errorValidationComponent.destroy();
                     this._errorValidationComponent = undefined;
                 }
-                if (this.elementRef && this.elementRef.nativeElement) {
-                    this.intersectionObserver.unobserve(this.elementRef.nativeElement);
-                }
             }
         };
         // whether this.ngModel.control has safe access
@@ -3748,8 +3887,8 @@
                 //try to find input element
                 this.input = this._findInputNode(this.elementRef.nativeElement.children);
                 if (this.input) {
-                    this.input.addEventListener('blur', function () { return _this.doBlur(); });
-                    this.input.addEventListener('focus', function () { return _this.doFocus(); });
+                    this.input.addEventListener('blur', function (event) { return _this.doBlur(event); });
+                    this.input.addEventListener('focus', function (event) { return _this.doFocus(event); });
                 }
             }
         };
@@ -3764,10 +3903,80 @@
                 }
             }
         };
-        BaseInputComponent.prototype._handleElementPositionChange = function (entries, observer) {
-            if (this._errorValidationComponent && entries && entries.length > 0) {
-                this._errorValidationComponent.instance.top = entries[0].boundingClientRect.bottom;
-                this._errorValidationComponent.instance.left = entries[0].boundingClientRect.left;
+        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, success;
+                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:
+                            success = _b.sent();
+                            if (success) {
+                                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;
@@ -3788,6 +3997,7 @@
     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 }],
@@ -3836,7 +4046,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()
@@ -3991,6 +4204,7 @@
         function FormComponent(_formMaster) {
             this._formMaster = _formMaster;
             this.onChange = new core.EventEmitter();
+            this.showClass = true;
             this.submitted = false;
             // Emits true after every valid submit.
             this.validSubmit = new core.EventEmitter();
@@ -4075,19 +4289,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();
@@ -4143,7 +4358,8 @@
     FormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-form",
-                    template: "<ng-content></ng-content>"
+                    template: "\n    <ng-content></ng-content>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     FormComponent.ctorParameters = function () { return [
@@ -4153,13 +4369,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) {
@@ -4199,6 +4415,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return DropDownListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: DropDownListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -4273,7 +4492,8 @@
     })(GridLines || (GridLines = {}));
 
     var BaseGridComponent = /** @class */ (function () {
-        function BaseGridComponent() {
+        function BaseGridComponent(element) {
+            this.element = element;
             this.gridLines = GridLines.None;
             this.contextMenuItems = [];
             this.sortingEnabled = false;
@@ -4310,6 +4530,9 @@
     BaseGridComponent.decorators = [
         { type: core.Directive }
     ];
+    BaseGridComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
     BaseGridComponent.propDecorators = {
         grid: [{ type: core.ViewChild, args: ['grid', { static: false },] }],
         data: [{ type: core.Input }],
@@ -4448,6 +4671,10 @@
         function BaseInlineEditGridComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.rowSaved = new core.EventEmitter();
+            _this.beforeRowDelete = new core.EventEmitter(false);
+            _this.rowDeleted = new core.EventEmitter();
+            _this.actionBeginObservable$ = new rxjs.Observable();
+            _this.actionBeginObservableSub = new rxjs.Subscription();
             return _this;
         }
         Object.defineProperty(BaseInlineEditGridComponent.prototype, "inlineEdit", {
@@ -4467,13 +4694,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 = [
@@ -4481,7 +4756,9 @@
     ];
     BaseInlineEditGridComponent.propDecorators = {
         inlineEdit: [{ type: core.Input }],
-        rowSaved: [{ type: core.Output }]
+        rowSaved: [{ type: core.Output }],
+        beforeRowDelete: [{ type: core.Output }],
+        rowDeleted: [{ type: core.Output }]
     };
     __decorate([
         InputBoolean()
@@ -4499,6 +4776,8 @@
             _this.contextMenuItemClick = new core.EventEmitter();
             _this.rowDragStartEvent = new core.EventEmitter();
             _this.rowDropEvent = new core.EventEmitter();
+            _this.beforeRowsDelete = new core.EventEmitter();
+            _this.rowsDeleted = new core.EventEmitter();
             _this.selectionOptions = { type: "Single" };
             return _this;
         }
@@ -4550,6 +4829,12 @@
         BaseSelectionGridComponent.prototype.rowDropClick = function (args) {
             this.rowDropEvent.next(args);
         };
+        BaseSelectionGridComponent.prototype.handleBeforeBatchDelete = function (args) {
+            this.beforeRowsDelete.next(args);
+        };
+        BaseSelectionGridComponent.prototype.handleBatchDelete = function (rows) {
+            this.rowsDeleted.next(rows);
+        };
         return BaseSelectionGridComponent;
     }(BaseInlineEditGridComponent));
     BaseSelectionGridComponent.decorators = [
@@ -4564,7 +4849,9 @@
         detailColumnClick: [{ type: core.Output }],
         contextMenuItemClick: [{ type: core.Output }],
         rowDragStartEvent: [{ type: core.Output }],
-        rowDropEvent: [{ type: core.Output }]
+        rowDropEvent: [{ type: core.Output }],
+        beforeRowsDelete: [{ type: core.Output }],
+        rowsDeleted: [{ type: core.Output }]
     };
     __decorate([
         InputBoolean()
@@ -4589,7 +4876,7 @@
     CoGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-grid',
-                    template: "\n        <ejs-grid #grid id=\"grid\"\n                  [dataSource]=\"data\"\n                  [columns]=\"columns\"\n                  [contextMenuItems]=\"contextMenuItems\"\n                  [pageSettings]=\"pageSettings\"\n                  [toolbar]=\"toolbarOptions\"\n                  [gridLines]=\"gridLines\"\n                  [frozenColumns]=\"frozenColumns\"\n                  [frozenRows]=\"frozenRows\"\n                  [selectionSettings]=\"selectionOptions\"\n                  [editSettings]=\"editSettings\"\n                  [allowPaging]=\"pagingEnabled\"\n                  [allowSorting]=\"sortingEnabled\"\n                  [allowFiltering]=\"filteringEnabled\"\n                  [allowGrouping]=\"groupingEnabled\"\n                  [allowReordering]=\"reorderingEnabled\"\n                  [allowResizing]=\"resizingEnabled\"\n                  [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                  [showColumnMenu]=\"showColumnMenu\"\n                  [showColumnChooser]=\"showColumnChooser\"\n                  [allowExcelExport]=\"exportExcelEnabled\"\n                  [allowPdfExport]=\"exportPdfEnabled\"\n                  (toolbarClick)=\"toolbarClick($event)\"\n                  (rowSelected)=\"handleRowSelected($event)\"\n                  (recordDoubleClick)=\"handleDoubleClick($event)\"\n                  (recordClick)=\"handleRecordClick($event)\"\n                  (actionComplete)=\"handleActionComplete($event)\"\n                  (contextMenuClick)=\"contextMenuClick($event)\"\n                  (rowDragStart)=\"rowDragStartClick($event)\"\n                  (rowDrop)=\"rowDropClick($event)\">\n        </ejs-grid>\n    ",
+                    template: "\n      <ejs-grid #grid id=\"grid\"\n                [dataSource]=\"data\"\n                [columns]=\"columns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [pageSettings]=\"pageSettings\"\n                [toolbar]=\"toolbarOptions\"\n                [gridLines]=\"gridLines\"\n                [frozenColumns]=\"frozenColumns\"\n                [frozenRows]=\"frozenRows\"\n                [selectionSettings]=\"selectionOptions\"\n                [editSettings]=\"editSettings\"\n                [allowPaging]=\"pagingEnabled\"\n                [allowSorting]=\"sortingEnabled\"\n                [allowFiltering]=\"filteringEnabled\"\n                [allowGrouping]=\"groupingEnabled\"\n                [allowReordering]=\"reorderingEnabled\"\n                [allowResizing]=\"resizingEnabled\"\n                [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                [showColumnMenu]=\"showColumnMenu\"\n                [showColumnChooser]=\"showColumnChooser\"\n                [allowExcelExport]=\"exportExcelEnabled\"\n                [allowPdfExport]=\"exportPdfEnabled\"\n                (toolbarClick)=\"toolbarClick($event)\"\n                (rowSelected)=\"handleRowSelected($event)\"\n                (recordDoubleClick)=\"handleDoubleClick($event)\"\n                (recordClick)=\"handleRecordClick($event)\"\n                (actionComplete)=\"handleActionComplete($event)\"\n                (contextMenuClick)=\"contextMenuClick($event)\"\n                (rowDragStart)=\"rowDragStartClick($event)\"\n                (rowDrop)=\"rowDropClick($event)\"\n                (beforeBatchDelete)=\"handleBeforeBatchDelete($event)\"\n                (batchDelete)=\"handleBatchDelete($event)\"\n      >\n      </ejs-grid>\n    ",
                     providers: [
                         ej2AngularGrids.RowDDService
                     ],
@@ -4600,6 +4887,59 @@
         showClass: [{ type: core.HostBinding, args: ['class.co-grid',] }]
     };
 
+    var GridToolbarComponent = /** @class */ (function () {
+        function GridToolbarComponent(iconsService) {
+            this.iconsService = iconsService;
+            this.icons = exports.CoreComponentsIcon;
+            this.editClick = new core.EventEmitter();
+            this.cancelClick = new core.EventEmitter();
+            this.saveClick = new core.EventEmitter();
+            this.addClick = new core.EventEmitter();
+        }
+        GridToolbarComponent.prototype.showClass = function () {
+            return true;
+        };
+        return GridToolbarComponent;
+    }());
+    GridToolbarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-grid-toolbar",
+                    template: "\n    <div class=\"grid-toolbar-wrapper\">\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'save'\" (click)=\"saveClick.emit()\"></co-button>\n      <co-button [iconData]=\"iconsService.getIcon(icons.AddToCartDrop)\" [label]=\"'add'\" (click)=\"addClick.emit()\"></co-button>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    GridToolbarComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    GridToolbarComponent.propDecorators = {
+        editClick: [{ type: core.Output }],
+        cancelClick: [{ type: core.Output }],
+        saveClick: [{ type: core.Output }],
+        addClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar",] }]
+    };
+
+    ej2Base.enableRipple(true);
+    var GridToolbarModule = /** @class */ (function () {
+        function GridToolbarModule() {
+        }
+        return GridToolbarModule;
+    }());
+    GridToolbarModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        IconModule,
+                        ButtonModule
+                    ],
+                    declarations: [
+                        GridToolbarComponent
+                    ],
+                    exports: [
+                        GridToolbarComponent
+                    ]
+                },] }
+    ];
+
     var CoGridModule = /** @class */ (function () {
         function CoGridModule() {
         }
@@ -4610,7 +4950,8 @@
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
-                        ej2AngularGrids.GridModule
+                        ej2AngularGrids.GridModule,
+                        GridToolbarModule
                     ],
                     declarations: [CoGridComponent],
                     exports: [CoGridComponent],
@@ -4668,6 +5009,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputCheckboxComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -4769,6 +5113,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputCheckboxMultiSelectComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -4822,7 +5169,6 @@
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
-            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -4843,6 +5189,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputComboBoxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -4862,8 +5211,7 @@
         selected: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         shopPopup: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }],
-        customHeight: [{ type: core.HostBinding, args: ["class.custom-height",] }]
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
     };
 
     var InputComboBoxModule = /** @class */ (function () {
@@ -4945,6 +5293,9 @@
                     template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputDatePickerComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputDatePickerComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -5287,6 +5638,7 @@
         KeyboardCode.Down,
         KeyboardCode.Up,
         KeyboardCode.Tab,
+        KeyboardCode.Enter,
         KeyboardCode.Home,
         KeyboardCode.End,
         KeyboardCode.Delete,
@@ -5322,73 +5674,22 @@
         KeyboardCode.NumpadNine
     ];
 
-    var InputTextComponent = /** @class */ (function (_super) {
-        __extends(InputTextComponent, _super);
-        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+    // Input values for 'buttonShowMode' of NumberPickerComponent.
+    var InputNumberPickerButtonShowMode;
+    (function (InputNumberPickerButtonShowMode) {
+        InputNumberPickerButtonShowMode["Always"] = "always";
+        InputNumberPickerButtonShowMode["OnFocusOnly"] = "onFocusOnly";
+        InputNumberPickerButtonShowMode["Never"] = "never";
+    })(InputNumberPickerButtonShowMode || (InputNumberPickerButtonShowMode = {}));
+
+    // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
+    var InputNumberPickerComponent = /** @class */ (function (_super) {
+        __extends(InputNumberPickerComponent, _super);
+        function InputNumberPickerComponent(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener) || this;
             _this.formComponent = formComponent;
-            _this.changeDetector = changeDetector;
-            _this.componentFactoryResolver = componentFactoryResolver;
-            _this.formUserChangeListener = formUserChangeListener;
-            _this.ngZoneWrapper = ngZoneWrapper;
-            _this.elementRef = elementRef;
-            _this.Icons = exports.CoreComponentsIcon;
-            _this.placeholder = "";
-            _this.type = "text";
-            _this.showClearButton = undefined;
-            _this.hasOwnLabel = true;
-            _super.prototype._markAsOnPush.call(_this);
-            return _this;
-        }
-        InputTextComponent.prototype.showClass = function () {
-            return true;
-        };
-        return InputTextComponent;
-    }(BaseInputComponent));
-    InputTextComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return InputTextComponent; })
-                        }],
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    InputTextComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
-        { type: FormInputUserModelChangeListenerService },
-        { type: NgZoneWrapperService },
-        { type: core.ElementRef }
-    ]; };
-    InputTextComponent.propDecorators = {
-        placeholder: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        showClearButton: [{ type: core.Input }],
-        keyDownWhiteList: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
-    };
-
-    // Input values for 'buttonShowMode' of NumberPickerComponent.
-    var InputNumberPickerButtonShowMode;
-    (function (InputNumberPickerButtonShowMode) {
-        InputNumberPickerButtonShowMode["Always"] = "always";
-        InputNumberPickerButtonShowMode["OnFocusOnly"] = "onFocusOnly";
-        InputNumberPickerButtonShowMode["Never"] = "never";
-    })(InputNumberPickerButtonShowMode || (InputNumberPickerButtonShowMode = {}));
-
-    // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
-    var InputNumberPickerComponent = /** @class */ (function (_super) {
-        __extends(InputNumberPickerComponent, _super);
-        function InputNumberPickerComponent(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener) || this;
-            _this.formComponent = formComponent;
-            _this.iconCacheService = iconCacheService;
-            _this._ngZone = _ngZone;
+            _this.iconCacheService = iconCacheService;
+            _this._ngZone = _ngZone;
             _this.componentFactoryResolver = componentFactoryResolver;
             _this.minusIcon = exports.CoreComponentsIcon.MinusSimple;
             _this.plusIcon = exports.CoreComponentsIcon.PlusSimple;
@@ -5414,8 +5715,8 @@
             _this._stepFactor = _this._stepFactors[0];
             _this._mayAutoCount = false;
             _this._numberLogicValueChangeSub = _this.numberLogic.valueChange.subscribe(function (value) {
-                _this.inputTextComp.model = "" + value; // faster than this.detectChanges() just for that input
                 if (!_this._mayAutoCount) {
+                    _this.model = value;
                     _this.modelChange.emit(value);
                     // custom form user chagne listener .next because we don't user super.updateModel() which normally does that for us
                     if (_this._markedAsUserTouched) {
@@ -5426,18 +5727,17 @@
             });
             return _this;
         }
-        Object.defineProperty(InputNumberPickerComponent.prototype, "model", {
-            get: function () {
-                return this.numberLogic.value;
-            },
-            // @override
-            set: function (model) {
-                this.numberLogic.value = model;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(InputNumberPickerComponent.prototype, "min", {
+            // @override
+            // @Input()
+            // public set model(model: number) {
+            //   super.model = model;
+            //   this.numberLogic.value = model;
+            // }
+            //
+            // public get model(): number {
+            //   return this.numberLogic.value;
+            // }
             set: function (min) {
                 this.numberLogic.min = min;
             },
@@ -5511,6 +5811,11 @@
             if (this.myKeyDownWhiteList.find(function (k) { return k === event.keyCode; }) === undefined) {
                 return false;
             }
+            _super.prototype.handleKeyDown.call(this, event);
+        };
+        InputNumberPickerComponent.prototype.handleChangeModel = function (value) {
+            console.log(value);
+            this.numberLogic.setValue(value);
         };
         // Note: recursive through setTimeout().
         InputNumberPickerComponent.prototype.doDecrementAuto = function () {
@@ -5585,17 +5890,6 @@
                 }
             }, this._delayBeforeStartAutoCountMs);
         };
-        // Possibly show buttons.
-        InputNumberPickerComponent.prototype.onNumberInputFocus = function () {
-            this._numberInputHasFocus = true;
-            this._updateButtonsShowState();
-        };
-        // Value correction point.
-        InputNumberPickerComponent.prototype.onNumberInputBlur = function () {
-            this._numberInputHasFocus = false;
-            this.numberLogic.setValueByUserInputText(this.inputTextComp.model);
-            this._updateButtonsShowState();
-        };
         // Note: recursive.
         InputNumberPickerComponent.prototype._doIncreaseStepFactor = function () {
             var _this = this;
@@ -5633,9 +5927,12 @@
     InputNumberPickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-number-picker',
-                    template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"numberLogic.valueAsSting\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
+                    template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (ngModelChange)=\"handleChangeModel($event)\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputNumberPickerComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputNumberPickerComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -5650,7 +5947,6 @@
         { type: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
-        model: [{ type: core.Input }],
         min: [{ type: core.Input }],
         step: [{ type: core.Input }],
         max: [{ type: core.Input }],
@@ -5661,7 +5957,6 @@
         noValidation: [{ type: core.Input }],
         decimals: [{ type: core.Input }],
         modelChange: [{ type: core.Output }],
-        inputTextComp: [{ type: core.ViewChild, args: [InputTextComponent, { static: true },] }],
         showButtonsOnFocusOnly: [{ type: core.HostBinding, args: ["class.show-buttons-on-focus-only",] }],
         hasLabel: [{ type: core.HostBinding, args: ["class.has-label",] }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-number-picker',] }]
@@ -5670,6 +5965,60 @@
         InputBoolean()
     ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
+    var InputTextComponent = /** @class */ (function (_super) {
+        __extends(InputTextComponent, _super);
+        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            _this.Icons = exports.CoreComponentsIcon;
+            _this.placeholder = "";
+            _this.type = "text";
+            _this.showClearButton = undefined;
+            _this.hasOwnLabel = true;
+            _super.prototype._markAsOnPush.call(_this);
+            return _this;
+        }
+        InputTextComponent.prototype.showClass = function () {
+            return true;
+        };
+        return InputTextComponent;
+    }(BaseInputComponent));
+    InputTextComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-input-text",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n      [committing]=\"committing\"\n      [commitFinished]=\"commitFinished\"\n      (commitClick)=\"commitClick($event)\"\n      (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    providers: [{
+                            provide: COMPONENT_INTERFACE_NAME,
+                            useExisting: core.forwardRef(function () { return InputTextComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextComponent
+                        }],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    InputTextComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
+    ]; };
+    InputTextComponent.propDecorators = {
+        placeholder: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        showClearButton: [{ type: core.Input }],
+        keyDownWhiteList: [{ type: core.Input }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
+        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
+    };
+
     var ValidationErrorModule = /** @class */ (function () {
         function ValidationErrorModule() {
         }
@@ -5690,6 +6039,115 @@
                 },] }
     ];
 
+    var CommitButtonsComponent = /** @class */ (function () {
+        function CommitButtonsComponent(_renderer) {
+            var _this = this;
+            this._renderer = _renderer;
+            this.cancelClick = new core.EventEmitter();
+            this.commitClick = new core.EventEmitter();
+            this._committing = false;
+            this._commitFinished = false;
+            this._handleAnimationIteration = function (event) {
+                _this._renderer.removeClass(event.currentTarget, 'animate');
+                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
+                // elem.removeEventListener('webkitAnimationIteration', () => this._handleAnimationIteration(elem));
+            };
+        }
+        Object.defineProperty(CommitButtonsComponent.prototype, "content", {
+            set: function (children) {
+                this.animateDivs = children.toArray();
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "committing", {
+            get: function () {
+                return this._committing;
+            },
+            set: function (value) {
+                this._committing = value;
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommitButtonsComponent.prototype, "commitFinished", {
+            get: function () {
+                return this._commitFinished;
+            },
+            set: function (value) {
+                this._commitFinished = value;
+                this._checkAnimationFinished();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommitButtonsComponent.prototype.showClass = function () {
+            return true;
+        };
+        CommitButtonsComponent.prototype._checkAnimation = function () {
+            var _this = this;
+            if (this.committing && this.animateDivs) {
+                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
+            }
+        };
+        CommitButtonsComponent.prototype._checkAnimationFinished = function () {
+            var _this = this;
+            if (this.commitFinished && this.animateDivs) {
+                this.animateDivs.forEach(function (a) {
+                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
+                    // a.nativeElement.addEventListener('webkitAnimationIteration', (event) => this._handleAnimationIteration(event));
+                });
+            }
+        };
+        return CommitButtonsComponent;
+    }());
+    CommitButtonsComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-commit-buttons",
+                    template: "\n    <div class=\"commit-buttons-wrapper\" @showHideSaveCancel>\n      <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n           (click)=\"commitClick.emit($event)\">\n        <div class=\"save-button-spinner\" *ngIf=\"committing || commitFinished\">\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n        </div>\n        <div class=\"spinner-checkmark\" *ngIf=\"!committing || commitFinished\"></div>\n      </div>\n      <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n        <div class=\"cancel-button\"></div>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideSaveCancel', [
+                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
+                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    CommitButtonsComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    CommitButtonsComponent.propDecorators = {
+        content: [{ type: core.ViewChildren, args: ['animatediv', { read: core.ElementRef },] }],
+        committing: [{ type: core.Input }],
+        commitFinished: [{ type: core.Input }],
+        cancelClick: [{ type: core.Output }],
+        commitClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-commit-buttons",] }]
+    };
+
+    var CommitButtonsModule = /** @class */ (function () {
+        function CommitButtonsModule() {
+        }
+        return CommitButtonsModule;
+    }());
+    CommitButtonsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        CommitButtonsComponent
+                    ],
+                    exports: [
+                        CommitButtonsComponent
+                    ]
+                },] }
+    ];
+
     var InputTextModule = /** @class */ (function () {
         function InputTextModule() {
         }
@@ -5705,7 +6163,8 @@
                         AppendPipeModule,
                         ej2AngularInputs.TextBoxAllModule,
                         ej2AngularInputs.NumericTextBoxModule,
-                        ValidationErrorModule
+                        ValidationErrorModule,
+                        CommitButtonsModule
                     ],
                     declarations: [
                         InputTextComponent
@@ -5762,6 +6221,9 @@
                     template: "\n    <ejs-radiobutton\n      [label]=\"label\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [checked]=\"checked\"\n      (change)=\"handleModelChange($event)\"\n    ></ejs-radiobutton>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputRadioButtonComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputRadioButtonComponent
                         }],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
@@ -5830,6 +6292,9 @@
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputTextareaComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -5921,6 +6386,9 @@
                         {
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: MultiSelectListComponent
                         }
                     ],
                     encapsulation: core.ViewEncapsulation.None
@@ -7505,6 +7973,9 @@
                     template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputListboxComponent; })
+                        }, {
+                            provide: BaseInputComponent,
+                            useExisting: InputListboxComponent
                         }],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -7560,6 +8031,10 @@
     var SimpleGridColumnDirective = /** @class */ (function () {
         function SimpleGridColumnDirective() {
             this.resizable = true;
+            this.required = false;
+            this.readonly = false;
+            this.order = 0;
+            this.singleColumn = false;
         }
         Object.defineProperty(SimpleGridColumnDirective.prototype, "template", {
             get: function () {
@@ -7573,6 +8048,38 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(SimpleGridColumnDirective.prototype, "editTemplate", {
+            get: function () {
+                return this._editTemplate;
+            },
+            set: function (template) {
+                if (template) {
+                    this._editTemplate = template;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SimpleGridColumnDirective.prototype.ngOnInit = function () {
+            this._setSingleColumnProps();
+        };
+        SimpleGridColumnDirective.prototype.getFieldValue = function (value) {
+            var _this = this;
+            if (this.collection && this.displayField) {
+                var result = this.collection.find(function (c) { return c[_this.codeField] === value; });
+                if (result) {
+                    return result[this.displayField];
+                }
+            }
+            return value;
+        };
+        SimpleGridColumnDirective.prototype._setSingleColumnProps = function () {
+            if (this.singleColumn) {
+                this.resizable = false;
+                this.readonly = true;
+                this.width = 0;
+            }
+        };
         return SimpleGridColumnDirective;
     }());
     SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
@@ -7582,39 +8089,55 @@
                 },] }
     ];
     SimpleGridColumnDirective.propDecorators = {
-        template: [{ type: core.ContentChild, args: [core.TemplateRef,] }],
+        template: [{ type: core.ContentChild, args: ['template',] }],
+        editTemplate: [{ type: core.ContentChild, args: ['editTemplate',] }],
         headerText: [{ type: core.Input }],
         field: [{ type: core.Input }],
+        codeField: [{ type: core.Input }],
+        displayField: [{ type: core.Input }],
         textAlign: [{ type: core.Input }],
         format: [{ type: core.Input }],
         resizable: [{ type: core.Input }],
-        width: [{ type: core.Input }]
+        required: [{ type: core.Input }],
+        width: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        collection: [{ type: core.Input }],
+        order: [{ type: core.Input }],
+        singleColumn: [{ type: core.Input }]
     };
 
-    var SimpleGridComponent = /** @class */ (function () {
-        function SimpleGridComponent() {
-            this.defaultTextAlign = exports.ColumnAlign.Left;
+    var BaseSimpleGridComponent = /** @class */ (function () {
+        function BaseSimpleGridComponent() {
             this.data = [];
             this.dragDropEnabled = false;
+            this.inlineEdit = false;
+            this.showToolbar = false;
             /**
              * Should component emit drag and drop actions instead of handle
              * (update collection) by itself
              */
             this.emitDragDrop = false;
             this.onDrop = new core.EventEmitter();
+            this.selectRow = new core.EventEmitter();
+            this.dblClickRow = new core.EventEmitter();
+            this.saveRow = new core.EventEmitter();
             this.columns = [];
         }
-        Object.defineProperty(SimpleGridComponent.prototype, "content", {
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "content", {
             set: function (columnComponents) {
-                this.columns = columnComponents.toArray();
+                this._setColumns(columnComponents.toArray());
             },
             enumerable: false,
             configurable: true
         });
-        SimpleGridComponent.prototype.showClass = function () {
-            return true;
-        };
-        SimpleGridComponent.prototype.handleMouseMove = function (event) {
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "extraColumns", {
+            set: function (value) {
+                this._setColumns(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseSimpleGridComponent.prototype.handleMouseMove = function (event) {
             if (event.buttons === 1 && this._columnForResize) {
                 if (!this._columnForResize.width) {
                     var rect = event.target.parentElement.getBoundingClientRect();
@@ -7623,16 +8146,16 @@
                 this._columnForResize.width += event.movementX;
             }
         };
-        SimpleGridComponent.prototype.handleMouseUp = function (event) {
+        BaseSimpleGridComponent.prototype.handleMouseUp = function (event) {
             this._columnForResize = undefined;
         };
-        SimpleGridComponent.prototype.handleSizerMouseDown = function (event, column) {
+        BaseSimpleGridComponent.prototype.handleSizerMouseDown = function (event, column) {
             this._columnForResize = column;
         };
-        SimpleGridComponent.prototype.handleCanDragDrop = function (drag, drop) {
+        BaseSimpleGridComponent.prototype.handleCanDragDrop = function (drag, drop) {
             return true;
         };
-        SimpleGridComponent.prototype.handleDrop = function (event) {
+        BaseSimpleGridComponent.prototype.handleDrop = function (event) {
             try {
                 var from = event.previousIndex;
                 var to = event.currentIndex;
@@ -7650,25 +8173,457 @@
                 console.error(e);
             }
         };
-        return SimpleGridComponent;
+        BaseSimpleGridComponent.prototype._setColumns = function (columns) {
+            var _a;
+            (_a = this.columns).push.apply(_a, __spreadArray([], __read(columns)));
+            this.columns.sort(function (a, b) { return a.order < b.order ? -1 : 1; });
+        };
+        return BaseSimpleGridComponent;
     }());
+    BaseSimpleGridComponent.decorators = [
+        { type: core.Directive }
+    ];
+    BaseSimpleGridComponent.propDecorators = {
+        content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
+        data: [{ type: core.Input }],
+        dragDropEnabled: [{ type: core.Input }],
+        inlineEdit: [{ type: core.Input }],
+        showToolbar: [{ type: core.Input }],
+        emitDragDrop: [{ type: core.Input }],
+        extraColumns: [{ type: core.Input }],
+        onDrop: [{ type: core.Output }],
+        selectRow: [{ type: core.Output }],
+        dblClickRow: [{ type: core.Output }],
+        saveRow: [{ type: core.Output }],
+        handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
+        handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
+    };
+
+    var SimpleGridComponent = /** @class */ (function (_super) {
+        __extends(SimpleGridComponent, _super);
+        function SimpleGridComponent(_changeDetection, _formMaster) {
+            var _this = _super.call(this) || this;
+            _this._changeDetection = _changeDetection;
+            _this._formMaster = _formMaster;
+            _this.defaultTextAlign = exports.ColumnAlign.Left;
+            _this.editting = false;
+            _this.editRowIndex = -1;
+            _this.editCellIndex = -1;
+            _this.selectedRowIndex = -1;
+            _this._doubleClicked = false;
+            _this._newRow = false;
+            return _this;
+        }
+        SimpleGridComponent.prototype.showClass = function () {
+            return true;
+        };
+        SimpleGridComponent.prototype.handleKeyDown = function (event) {
+            var _this = this;
+            if (!this.inlineEdit) {
+                return;
+            }
+            if (event.code === 'Tab') {
+                event.preventDefault();
+                this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
+                    .then(function (index) {
+                    _this.editCellIndex = index;
+                    _this._changeDetection.markForCheck();
+                });
+                this._detectChanges();
+            }
+            if (event.code === 'Escape') {
+                this.cancelEditRow();
+            }
+            if (event.code === 'Enter') {
+                this.validateAndSave();
+            }
+        };
+        SimpleGridComponent.prototype.isSingleColumn = function (column) {
+            return column.singleColumn;
+        };
+        SimpleGridComponent.prototype.rowContainsSingleColumn = function (row, columns) {
+            var _this = this;
+            var singleColumn = columns.find(function (column) { return _this.isSingleColumn(column) && !!row[column.field]; });
+            return !!singleColumn;
+        };
+        SimpleGridComponent.prototype.addRow = function () {
+            var _this = this;
+            var valid = this.validateAndSave();
+            this._detectChanges();
+            if (valid) {
+                this.data.unshift({});
+                this._newRow = true;
+                this.editRowIndex = 0;
+                this._nextAvailableCellToEdit(true).then(function (index) {
+                    _this.editCellIndex = index;
+                });
+                this.editting = true;
+                this.rowToEdit = this.data[0];
+                this._detectChanges();
+            }
+        };
+        SimpleGridComponent.prototype.validateAndSave = function (stopEditting) {
+            if (stopEditting === void 0) { stopEditting = true; }
+            if (!this.editting) {
+                return true;
+            }
+            var valid = this._formMaster.submitSlaves();
+            this._detectChanges();
+            if (valid) {
+                this._saveRow(stopEditting);
+                return true;
+            }
+        };
+        SimpleGridComponent.prototype.cancelEditRow = function () {
+            if (!this.editting) {
+                return;
+            }
+            if (this._newRow) {
+                this.data.shift();
+            }
+            else {
+                this.data[this.editRowIndex] = this.rowToEdit;
+            }
+            this._newRow = false;
+            this.editting = false;
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleClickRow = function (event, index) {
+            var _this = this;
+            setTimeout(function () {
+                if (_this._doubleClicked) {
+                    return;
+                }
+                _this.selectTheRow(index);
+            }, 200);
+        };
+        SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
+            if (emit === void 0) { emit = true; }
+            if (this.selectedRowIndex !== index && ((this.editting && this.validateAndSave()) || !this.editting)) {
+                this.selectedRowIndex = index;
+                if (emit) {
+                    this.selectRow.next(this.data[this.selectedRowIndex]);
+                }
+            }
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleDblClickRow = function (event, index) {
+            this._doubleClicked = true;
+            this.dblClickRow.next(this.data[index]);
+            this.selectTheRow(index, false);
+            if (this.inlineEdit) {
+                this.editRow(event);
+            }
+            this._resetDblClick();
+        };
+        SimpleGridComponent.prototype.editRow = function (event) {
+            var _this = this;
+            this.editRowIndex = this.selectedRowIndex;
+            this.rowToEdit = this.data[this.editRowIndex];
+            this.editting = true;
+            this._nextAvailableCellToEdit(true).then(function (index) {
+                _this.editCellIndex = index;
+            });
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype.handleCellClick = function (index) {
+            this.editCellIndex = index;
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype._resetDblClick = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this._doubleClicked = false;
+            }, 500);
+        };
+        /**
+         *
+         * @param next; Move to next or previous cell
+         * @param start; Start from cellindex
+         * @private
+         */
+        SimpleGridComponent.prototype._nextAvailableCellToEdit = function (next, start) {
+            var _this = this;
+            if (start === void 0) { start = -1; }
+            return new Promise(function (resolve, reject) {
+                var numEditableColumns = _this.columns.filter(function (c) { return !c.readonly; }).length;
+                var wantedIndex = start + (next ? 1 : -1);
+                if (wantedIndex >= numEditableColumns) {
+                    _this._getNextEditRowIndex()
+                        .then(function (index) {
+                        _this.editRowIndex = index;
+                        resolve(_this._getNextEditCellIndex(0));
+                    })
+                        .catch(function (e) {
+                        reject();
+                    });
+                }
+                else if (wantedIndex < 0) {
+                    _this._getPreviousEditRowIndex()
+                        .then(function (index) {
+                        _this.editRowIndex = index;
+                        resolve(_this._getPreviousEditCellIndex(_this.columns.length - 1));
+                    })
+                        .catch(function (e) {
+                        reject();
+                    });
+                }
+                else {
+                    resolve(next ? _this._getNextEditCellIndex(start + 1) : _this._getPreviousEditCellIndex(start - 1));
+                }
+            });
+        };
+        SimpleGridComponent.prototype._getNextEditCellIndex = function (start) {
+            for (var i = start; i < this.columns.length; i++) {
+                if (!this.columns[i].readonly) {
+                    return i;
+                }
+            }
+        };
+        SimpleGridComponent.prototype._getPreviousEditCellIndex = function (start) {
+            for (var i = start; i >= 0; i--) {
+                if (!this.columns[i].readonly) {
+                    return i;
+                }
+            }
+        };
+        SimpleGridComponent.prototype._getNextEditRowIndex = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                var newRowIndex = 0;
+                if (_this.editRowIndex + 1 >= _this.data.length) {
+                    newRowIndex = 0;
+                }
+                else {
+                    newRowIndex = _this.editRowIndex + 1;
+                }
+                if (newRowIndex !== _this.editRowIndex) { // go to different row validate current one first
+                    if (_this.validateAndSave(false)) {
+                        _this.rowToEdit = _this.data[newRowIndex];
+                        resolve(newRowIndex);
+                    }
+                    else {
+                        reject();
+                    }
+                }
+                else {
+                    resolve(newRowIndex);
+                }
+            });
+        };
+        SimpleGridComponent.prototype._getPreviousEditRowIndex = function () {
+            var _this = this;
+            return new Promise(function (resolve, reject) {
+                var newRowIndex = 0;
+                if (_this.editRowIndex - 1 < 0) {
+                    newRowIndex = _this.data.length - 1;
+                }
+                else {
+                    newRowIndex = _this.editRowIndex - 1;
+                }
+                if (newRowIndex !== _this.editRowIndex) { // go to different row validate current one first
+                    if (_this.validateAndSave(false)) {
+                        _this.rowToEdit = _this.data[newRowIndex];
+                        resolve(newRowIndex);
+                    }
+                    else {
+                        reject();
+                    }
+                }
+                else {
+                    resolve(newRowIndex);
+                }
+            });
+        };
+        SimpleGridComponent.prototype._saveRow = function (stopEditting) {
+            if (stopEditting === void 0) { stopEditting = true; }
+            // emit saveEvent
+            if (this.rowToEdit) {
+                this.saveRow.next(this.rowToEdit);
+            }
+            this._newRow = false;
+            if (stopEditting) {
+                this.editRowIndex = -1;
+                this.editCellIndex = -1;
+                this.editting = false;
+                this.rowToEdit = undefined;
+            }
+            this._detectChanges();
+        };
+        SimpleGridComponent.prototype._detectChanges = function () {
+            this._changeDetection.detectChanges();
+        };
+        return SimpleGridComponent;
+    }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid",
-                    template: "\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" *ngFor=\"let row of data\" cdkDrag>\n          <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns\"\n               [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n            <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n              <ng-container *ngIf=\"column.template\">\n                <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n              </ng-container>\n              <div  *ngIf=\"!column.template\" [textContent]=\"row[column.field]\"></div>\n            </div>\n            <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\" [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\"\n             [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n             (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns; let columnIndex = index\"\n                 [style.min-width]=\"isSingleColumn(column) ? 'fit-content' : column.width\" [style.max-width.px]=\"column.width\"\n                 [style.padding-right.px]=\"isSingleColumn(column) ? 0 : 5\" >\n                <co-simple-grid-cell\n                  [column]=\"column\"\n                  [row]=\"row\"\n                  [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex && !isSingleColumn(column) && !rowContainsSingleColumn(row, columns)\"\n                  [fieldEditMode]=\"editCellIndex === columnIndex\"\n                  (cellClick)=\"handleCellClick(columnIndex)\"\n                ></co-simple-grid-cell>\n              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n            </div>\n          </co-form>\n        </div>\n      </div>\n    </div>\n  ",
+                    providers: [
+                        FormMasterService
+                    ],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    SimpleGridComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
+        { type: FormMasterService }
+    ]; };
     SimpleGridComponent.propDecorators = {
-        content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
-        data: [{ type: core.Input }],
-        dragDropEnabled: [{ type: core.Input }],
-        emitDragDrop: [{ type: core.Input }],
-        onDrop: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid",] }],
-        handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
-        handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
+        handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
+    };
+
+    var SimpleGridCellComponent = /** @class */ (function () {
+        function SimpleGridCellComponent(_changeDetector) {
+            this._changeDetector = _changeDetector;
+            this.defaultTextAlign = exports.ColumnAlign.Left;
+            this.editMode = false;
+            this.cellClick = new core.EventEmitter();
+            this._fieldEditMode = false;
+            this._focused = false;
+        }
+        Object.defineProperty(SimpleGridCellComponent.prototype, "editTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._editTemplate = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noEditTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._template = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "noTemplateContent", {
+            set: function (template) {
+                if (template) {
+                    this._inputTemplate = template;
+                    this._setFocusComponent();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SimpleGridCellComponent.prototype, "fieldEditMode", {
+            get: function () {
+                return this._fieldEditMode;
+            },
+            set: function (value) {
+                this._fieldEditMode = value;
+                this._setFocusComponent();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SimpleGridCellComponent.prototype.showClass = function () {
+            return true;
+        };
+        SimpleGridCellComponent.prototype.handleClick = function (event) {
+            if (this.column && !this.column.readonly) {
+                this.cellClick.next();
+            }
+        };
+        SimpleGridCellComponent.prototype._setFocusComponent = function () {
+            if (this.editMode && this.fieldEditMode) {
+                var element = this._getElement();
+                if (element) {
+                    var focusEvent = this._createNewEvent(element, 'focus');
+                    element.focus();
+                    element.dispatchEvent(focusEvent);
+                    this._focused = true;
+                }
+            }
+            else {
+                if (this._focused) {
+                    var element = this._getElement();
+                    if (element) {
+                        var blurEvent = this._createNewEvent(element, 'blur');
+                        element.blur();
+                        element.dispatchEvent(blurEvent);
+                    }
+                    this._focused = false;
+                }
+            }
+            this._detectChanges();
+        };
+        SimpleGridCellComponent.prototype._getFirstFormInput = function (parent) {
+            if (parent) {
+                var collection_1 = Array.from(parent.getElementsByTagName('input'));
+                var otherCollection = Array.from(parent.getElementsByTagName('textarea'));
+                otherCollection.map(function (o) { return collection_1.push(o); });
+                if (collection_1.length > 0) {
+                    return collection_1[0];
+                }
+            }
+        };
+        SimpleGridCellComponent.prototype._createNewEvent = function (element, eventType) {
+            var event;
+            if ("createEvent" in document) {
+                event = document.createEvent("Event");
+                event.initEvent(eventType, true, true);
+            }
+            else if ("Event" in window) {
+                event = new Event(eventType, { bubbles: true, cancelable: true });
+            }
+            return event;
+        };
+        SimpleGridCellComponent.prototype._getElement = function () {
+            var templ;
+            if (this._editTemplate) {
+                templ = this._editTemplate;
+            }
+            else if (this._template) {
+                templ = this._template;
+            }
+            else {
+                templ = this._inputTemplate;
+            }
+            if (templ) {
+                if (templ && templ.elementRef) {
+                    var inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
+                    if (inputElement) {
+                        return inputElement;
+                    }
+                }
+            }
+        };
+        SimpleGridCellComponent.prototype._detectChanges = function () {
+            this._changeDetector.detectChanges();
+        };
+        return SimpleGridCellComponent;
+    }());
+    SimpleGridCellComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-simple-grid-cell",
+                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <div [textContent]=\"column.getFieldValue(row[column.field])\"></div>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None,
+                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                },] }
+    ];
+    SimpleGridCellComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    SimpleGridCellComponent.propDecorators = {
+        editTemplateContent: [{ type: core.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
+        noEditTemplateContent: [{ type: core.ViewChild, args: ["noEditTemplate",] }],
+        noTemplateContent: [{ type: core.ViewChild, args: ["noTemplate",] }],
+        column: [{ type: core.Input }],
+        row: [{ type: core.Input }],
+        editMode: [{ type: core.Input }],
+        fieldEditMode: [{ type: core.Input }],
+        cellClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid-cell",] }],
+        handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
     };
 
     var SimpleGridModule = /** @class */ (function () {
@@ -7680,14 +8635,19 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        dragDrop.DragDropModule
+                        dragDrop.DragDropModule,
+                        GridToolbarModule,
+                        InputTextModule,
+                        FormModule
                     ],
                     declarations: [
                         SimpleGridComponent,
+                        SimpleGridCellComponent,
                         SimpleGridColumnDirective
                     ],
                     exports: [
                         SimpleGridComponent,
+                        SimpleGridCellComponent,
                         SimpleGridColumnDirective
                     ]
                 },] }
@@ -7807,6 +8767,7 @@
                 this._createTiles();
             }
             this._checkNavigationButtons();
+            this._resizeCanvasToDisplaySize();
         };
         Carousel3dComponent.prototype._init = function () {
             var _this = this;
@@ -7950,11 +8911,7 @@
             boundingBox.getSize(size);
             // get the max side of the bounding box (fits to width OR height as needed )
             var maxDim = Math.max(size.x, size.y, size.z);
-            var fov = this._camera.fov * (Math.PI / 180);
-            // let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 200));
-            var cameraZ = Math.abs((maxDim / 2) / Math.tan(fov / 2));
-            // cameraZ *= offset; // zoom out a little so that objects don't fill the screen
-            this._camera.position.z = cameraZ;
+            this._camera.position.z = Math.abs((maxDim / 2) * Math.atan(this._camera.fov / 2));
             this._camera.lookAt(center);
         };
         Carousel3dComponent.prototype._checkNavigationButtons = function () {
@@ -8013,11 +8970,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);
@@ -8085,6 +9048,8 @@
     exports.CoDialogModule = CoDialogModule;
     exports.CoDialogPromptComponent = CoDialogPromptComponent;
     exports.CoDialogPromptModule = CoDialogPromptModule;
+    exports.CoDialogWizardComponent = CoDialogWizardComponent;
+    exports.CoDialogWizardModule = CoDialogWizardModule;
     exports.CoGridComponent = CoGridComponent;
     exports.CoGridModule = CoGridModule;
     exports.CoKanbanComponent = CoKanbanComponent;
@@ -8137,6 +9102,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;
@@ -8146,19 +9113,21 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
+    exports["ɵba"] = BaseSimpleGridComponent;
+    exports["ɵbb"] = SimpleGridCellComponent;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;
     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;
@@ -8167,7 +9136,9 @@
     exports["ɵu"] = AppendPipe;
     exports["ɵv"] = ValidationErrorModule;
     exports["ɵw"] = ValidationErrorComponent;
-    exports["ɵx"] = PopupShowerService;
+    exports["ɵx"] = CommitButtonsModule;
+    exports["ɵy"] = CommitButtonsComponent;
+    exports["ɵz"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });