@colijnit/corecomponents_v12 12.0.22 → 12.0.23

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3224,6 +3224,8 @@
             this.noFormGroupControl = false;
             this.keepFocus = false;
             this.canSaveOrCancel = false;
+            this.committing = false;
+            this.commitFinished = true;
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
@@ -3594,16 +3596,24 @@
         };
         BaseInputComponent.prototype.commitClick = function (event) {
             return __awaiter(this, void 0, void 0, function () {
+                var success;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
                             this.keepFocus = true;
+                            this.commitFinished = false;
+                            this.committing = true;
                             return [4 /*yield*/, this.commit(this.model)];
                         case 1:
-                            _a.sent();
+                            success = _a.sent();
                             this.keepFocus = false;
-                            this.doBlur(event);
-                            return [2 /*return*/];
+                            return [4 /*yield*/, this._commitFinished()];
+                        case 2:
+                            _a.sent();
+                            if (success) {
+                                this.doBlur(event);
+                            }
+                            return [2 /*return*/, success];
                     }
                 });
             });
@@ -3623,6 +3633,9 @@
                 var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
                 this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
                 this._errorValidationComponent.instance.error = error;
+                if (this._hasOnPushCdStrategy) {
+                    this.changeDetector.markForCheck();
+                }
                 this._positionValidationError();
             }
         };
@@ -3645,6 +3658,9 @@
             if (this.canChange && this.input) {
                 this.input.focus();
                 this.focused = true;
+                if (this._hasOnPushCdStrategy) {
+                    this.markForCheck();
+                }
             }
         };
         BaseInputComponent.prototype.doFocus = function (event) {
@@ -3654,6 +3670,9 @@
             this._initialModelSet = false;
             this.focused = true;
             this.canSaveOrCancel = false;
+            if (this._hasOnPushCdStrategy) {
+                this.markForCheck();
+            }
             this.focus.next();
         };
         BaseInputComponent.prototype.doBlur = function (event) {
@@ -3666,6 +3685,9 @@
                     return false;
                 }
                 _this.focused = false;
+                if (_this._hasOnPushCdStrategy) {
+                    _this.markForCheck();
+                }
                 if (_this.input) {
                     _this.input.blur();
                 }
@@ -3781,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();
@@ -3880,7 +3912,7 @@
         };
         BaseInputComponent.prototype._handleKeyDown = function (event) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, nextSiblingToFocus;
+                var _a, nextSiblingToFocus, success;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -3902,12 +3934,14 @@
                             event.preventDefault();
                             return [4 /*yield*/, this.commitClick()];
                         case 4:
-                            _b.sent();
-                            if (nextSiblingToFocus) {
-                                try {
-                                    this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
-                                }
-                                catch (e) {
+                            success = _b.sent();
+                            if (success) {
+                                if (nextSiblingToFocus) {
+                                    try {
+                                        this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                                    }
+                                    catch (e) {
+                                    }
                                 }
                             }
                             return [2 /*return*/, false];
@@ -4842,7 +4876,7 @@
     CoGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-grid',
-                    template: "\n      <co-grid-toolbar></co-grid-toolbar>\n      <ejs-grid #grid id=\"grid\"\n                [dataSource]=\"data\"\n                [columns]=\"columns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [pageSettings]=\"pageSettings\"\n                [toolbar]=\"toolbarOptions\"\n                [gridLines]=\"gridLines\"\n                [frozenColumns]=\"frozenColumns\"\n                [frozenRows]=\"frozenRows\"\n                [selectionSettings]=\"selectionOptions\"\n                [editSettings]=\"editSettings\"\n                [allowPaging]=\"pagingEnabled\"\n                [allowSorting]=\"sortingEnabled\"\n                [allowFiltering]=\"filteringEnabled\"\n                [allowGrouping]=\"groupingEnabled\"\n                [allowReordering]=\"reorderingEnabled\"\n                [allowResizing]=\"resizingEnabled\"\n                [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                [showColumnMenu]=\"showColumnMenu\"\n                [showColumnChooser]=\"showColumnChooser\"\n                [allowExcelExport]=\"exportExcelEnabled\"\n                [allowPdfExport]=\"exportPdfEnabled\"\n                (toolbarClick)=\"toolbarClick($event)\"\n                (rowSelected)=\"handleRowSelected($event)\"\n                (recordDoubleClick)=\"handleDoubleClick($event)\"\n                (recordClick)=\"handleRecordClick($event)\"\n                (actionComplete)=\"handleActionComplete($event)\"\n                (contextMenuClick)=\"contextMenuClick($event)\"\n                (rowDragStart)=\"rowDragStartClick($event)\"\n                (rowDrop)=\"rowDropClick($event)\"\n                (beforeBatchDelete)=\"handleBeforeBatchDelete($event)\"\n                (batchDelete)=\"handleBatchDelete($event)\"\n      >\n      </ejs-grid>\n    ",
+                    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
                     ],
@@ -5604,6 +5638,7 @@
         KeyboardCode.Down,
         KeyboardCode.Up,
         KeyboardCode.Tab,
+        KeyboardCode.Enter,
         KeyboardCode.Home,
         KeyboardCode.End,
         KeyboardCode.Delete,
@@ -5639,67 +5674,6 @@
         KeyboardCode.NumpadNine
     ];
 
-    var InputTextComponent = /** @class */ (function (_super) {
-        __extends(InputTextComponent, _super);
-        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
-            _this.formComponent = formComponent;
-            _this.changeDetector = changeDetector;
-            _this.componentFactoryResolver = componentFactoryResolver;
-            _this.formUserChangeListener = formUserChangeListener;
-            _this.ngZoneWrapper = ngZoneWrapper;
-            _this.elementRef = elementRef;
-            _this.Icons = exports.CoreComponentsIcon;
-            _this.placeholder = "";
-            _this.type = "text";
-            _this.showClearButton = undefined;
-            _this.hasOwnLabel = true;
-            _super.prototype._markAsOnPush.call(_this);
-            return _this;
-        }
-        InputTextComponent.prototype.showClass = function () {
-            return true;
-        };
-        return InputTextComponent;
-    }(BaseInputComponent));
-    InputTextComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div *ngIf=\"showSaveCancel && focused && canSaveOrCancel\" class=\"input-save-cancel-button-wrapper\" @showHideSaveCancel>\n      <div class=\"input-save-cancel-button save\" (click)=\"commitClick($event)\"></div>\n      <div class=\"input-save-cancel-button cancel\" (click)=\"cancelClick($event)\"></div>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
-                    providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return InputTextComponent; })
-                        }, {
-                            provide: BaseInputComponent,
-                            useExisting: InputTextComponent
-                        }],
-                    animations: [
-                        animations.trigger('showHideSaveCancel', [
-                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
-                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
-                            animations.transition('void <=> *', animations.animate(200))
-                        ]),
-                    ],
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    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) {
@@ -5741,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) {
@@ -5753,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;
             },
@@ -5838,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 () {
@@ -5912,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;
@@ -5960,7 +5927,7 @@
     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; })
                         }, {
@@ -5980,7 +5947,6 @@
         { type: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
-        model: [{ type: core.Input }],
         min: [{ type: core.Input }],
         step: [{ type: core.Input }],
         max: [{ type: core.Input }],
@@ -5991,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',] }]
@@ -6000,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() {
         }
@@ -6020,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() {
         }
@@ -6035,7 +6163,8 @@
                         AppendPipeModule,
                         ej2AngularInputs.TextBoxAllModule,
                         ej2AngularInputs.NumericTextBoxModule,
-                        ValidationErrorModule
+                        ValidationErrorModule,
+                        CommitButtonsModule
                     ],
                     declarations: [
                         InputTextComponent
@@ -7904,6 +8033,8 @@
             this.resizable = true;
             this.required = false;
             this.readonly = false;
+            this.order = 0;
+            this.singleColumn = false;
         }
         Object.defineProperty(SimpleGridColumnDirective.prototype, "template", {
             get: function () {
@@ -7929,6 +8060,9 @@
             enumerable: false,
             configurable: true
         });
+        SimpleGridColumnDirective.prototype.ngOnInit = function () {
+            this._setSingleColumnProps();
+        };
         SimpleGridColumnDirective.prototype.getFieldValue = function (value) {
             var _this = this;
             if (this.collection && this.displayField) {
@@ -7939,6 +8073,13 @@
             }
             return value;
         };
+        SimpleGridColumnDirective.prototype._setSingleColumnProps = function () {
+            if (this.singleColumn) {
+                this.resizable = false;
+                this.readonly = true;
+                this.width = 0;
+            }
+        };
         return SimpleGridColumnDirective;
     }());
     SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
@@ -7960,7 +8101,9 @@
         required: [{ type: core.Input }],
         width: [{ type: core.Input }],
         readonly: [{ type: core.Input }],
-        collection: [{ type: core.Input }]
+        collection: [{ type: core.Input }],
+        order: [{ type: core.Input }],
+        singleColumn: [{ type: core.Input }]
     };
 
     var BaseSimpleGridComponent = /** @class */ (function () {
@@ -7982,7 +8125,14 @@
         }
         Object.defineProperty(BaseSimpleGridComponent.prototype, "content", {
             set: function (columnComponents) {
-                this.columns = columnComponents.toArray();
+                this._setColumns(columnComponents.toArray());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseSimpleGridComponent.prototype, "extraColumns", {
+            set: function (value) {
+                this._setColumns(value);
             },
             enumerable: false,
             configurable: true
@@ -8023,6 +8173,11 @@
                 console.error(e);
             }
         };
+        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 = [
@@ -8035,6 +8190,7 @@
         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 }],
@@ -8071,6 +8227,7 @@
                 this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
                     .then(function (index) {
                     _this.editCellIndex = index;
+                    _this._changeDetection.markForCheck();
                 });
                 this._detectChanges();
             }
@@ -8081,6 +8238,14 @@
                 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();
@@ -8286,23 +8451,18 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype._detectChanges = function () {
-            // setTimeout(() => {
-            // this._changeDetection.markForCheck();
-            // this._changeDetection.reattach();
             this._changeDetection.detectChanges();
-            // this._changeDetection.detach();
-            // });
         };
         return SimpleGridComponent;
     }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid",
-                    template: "\n    <co-grid-toolbar *ngIf=\"inlineEdit && showToolbar\"\n                     (addClick)=\"addRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n    ></co-grid-toolbar>\n    <div class=\"simple-grid-column-header-wrapper\">\n      <div class=\"simple-grid-column-header\" *ngFor=\"let column of columns; let index = index\"\n           [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n        <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n             [textContent]=\"column.headerText\"\n        ></div>\n        <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer\"\n             (mousedown)=\"handleSizerMouseDown($event, column)\"\n        ></div>\n      </div>\n    </div>\n    <div cdkDropListGroup class=\"drop-list-group\">\n      <div #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n           class=\"simple-grid-drag-drop-list\"\n           [cdkDropListDisabled]=\"!dragDropEnabled\"\n           [cdkDropListData]=\"data\"\n           [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n           (cdkDropListDropped)=\"handleDrop($event)\"\n      >\n        <div class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex\" [class.editting]=\"rowIndex === editRowIndex\" *ngFor=\"let row of data; let rowIndex = index\" cdkDrag\n             (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\">\n          <co-form class=\"simple-grid-row-form\">\n            <div class=\"simple-grid-column-cell\" *ngFor=\"let column of columns; let columnIndex = index\"\n                 [style.min-width.px]=\"column.width\" [style.max-width.px]=\"column.width\">\n              <co-simple-grid-cell\n                [column]=\"column\"\n                [row]=\"row\"\n                [editMode]=\"inlineEdit && editting && rowIndex === editRowIndex\"\n                [fieldEditMode]=\"editCellIndex === columnIndex\"\n                (cellClick)=\"handleCellClick(columnIndex)\"\n              ></co-simple-grid-cell>\n              <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n            </div>\n          </co-form>\n        </div>\n      </div>\n    </div>\n  ",
+                    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: ChangeDetectionStrategy.OnPush,
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -8438,19 +8598,16 @@
             }
         };
         SimpleGridCellComponent.prototype._detectChanges = function () {
-            // setTimeout(() => {
-            this._changeDetector.markForCheck();
-            // this._changeDetector.detectChanges();
-            // });
+            this._changeDetector.detectChanges();
         };
         return SimpleGridCellComponent;
     }());
     SimpleGridCellComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-simple-grid-cell",
-                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\" [ngTemplateOutlet]=\"column.editTemplate\" [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n            <div [textContent]=\"column.getFieldValue(row[column.field])\"></div>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None //,
-                    // changeDetection: ChangeDetectionStrategy.OnPush
+                    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 [
@@ -8956,6 +9113,8 @@
     exports.TileModule = TileModule;
     exports["ɵa"] = RippleModule;
     exports["ɵb"] = MD_RIPPLE_GLOBAL_OPTIONS;
+    exports["ɵba"] = BaseSimpleGridComponent;
+    exports["ɵbb"] = SimpleGridCellComponent;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;
@@ -8977,9 +9136,9 @@
     exports["ɵu"] = AppendPipe;
     exports["ɵv"] = ValidationErrorModule;
     exports["ɵw"] = ValidationErrorComponent;
-    exports["ɵx"] = PopupShowerService;
-    exports["ɵy"] = BaseSimpleGridComponent;
-    exports["ɵz"] = SimpleGridCellComponent;
+    exports["ɵx"] = CommitButtonsModule;
+    exports["ɵy"] = CommitButtonsComponent;
+    exports["ɵz"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });