@colijnit/corecomponents_v12 12.0.21 → 12.0.24

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1,8 +1,8 @@
-import { Injectable, Component, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, Pipe, ViewChild, ChangeDetectorRef, ComponentFactoryResolver, ViewContainerRef, forwardRef, NO_ERRORS_SCHEMA, Injector, ApplicationRef, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
+import { Injectable, Component, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, Pipe, ViewChild, ChangeDetectorRef, ComponentFactoryResolver, ViewContainerRef, forwardRef, NO_ERRORS_SCHEMA, Renderer2, ViewChildren, Injector, ApplicationRef, ContentChild, ContentChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Subject, merge, fromEvent } from 'rxjs';
+import { Subject, merge, fromEvent, Observable, Subscription } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 import { __decorate, __awaiter } from 'tslib';
 import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
@@ -2313,6 +2313,67 @@ CoDialogPromptModule.decorators = [
             },] }
 ];
 
+class CoDialogWizardComponent {
+    constructor() {
+        this.icons = CoreComponentsIcon;
+        this.showCloseIcon = true;
+        this.animation = true;
+        this.closeClick = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+CoDialogWizardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'co-dialog-wizard',
+                template: `
+    <div class="co-dialog-wizard-wrapper" [@showHideDialog]="animation">
+      <div class="dialog-header">
+        <ng-content select="[header]"></ng-content>
+        <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="closeClick.emit($event)">
+          <co-icon [icon]="icons.Cancel"></co-icon>
+        </div>
+      </div>
+
+      <hr class="co-dialog-wizard-divider">
+
+      <div class="dialog-content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+                animations: [
+                    trigger('showHideDialog', [
+                        state('*', style({ opacity: 1 })),
+                        state('void', style({ opacity: 0 })),
+                        transition('void => *', animate('200ms 200ms')),
+                        transition('* => void', animate(200))
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoDialogWizardComponent.propDecorators = {
+    showCloseIcon: [{ type: Input }],
+    animation: [{ type: Input }],
+    closeClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-dialog-wizard",] }]
+};
+
+class CoDialogWizardModule {
+}
+CoDialogWizardModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule
+                ],
+                declarations: [CoDialogWizardComponent],
+                exports: [CoDialogWizardComponent]
+            },] }
+];
+
 class CoKanbanComponent {
     constructor() {
         this.allowDragAndDrop = true;
@@ -2845,6 +2906,8 @@ class BaseInputComponent {
         this.noFormGroupControl = false;
         this.keepFocus = false;
         this.canSaveOrCancel = false;
+        this.committing = false;
+        this.commitFinished = true;
         this._markedAsUserTouched = false;
         this._destroyed = false;
         this._hasOnPushCdStrategy = false;
@@ -3107,9 +3170,15 @@ class BaseInputComponent {
     commitClick(event) {
         return __awaiter(this, void 0, void 0, function* () {
             this.keepFocus = true;
-            yield this.commit(this.model);
+            this.commitFinished = false;
+            this.committing = true;
+            const success = yield this.commit(this.model);
             this.keepFocus = false;
-            this.doBlur(event);
+            yield this._commitFinished();
+            if (success) {
+                this.doBlur(event);
+            }
+            return success;
         });
     }
     cancelClick(event) {
@@ -3127,6 +3196,9 @@ class BaseInputComponent {
             const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
             this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
             this._errorValidationComponent.instance.error = error;
+            if (this._hasOnPushCdStrategy) {
+                this.changeDetector.markForCheck();
+            }
             this._positionValidationError();
         }
     }
@@ -3149,6 +3221,9 @@ class BaseInputComponent {
         if (this.canChange && this.input) {
             this.input.focus();
             this.focused = true;
+            if (this._hasOnPushCdStrategy) {
+                this.markForCheck();
+            }
         }
     }
     doFocus(event) {
@@ -3158,6 +3233,9 @@ class BaseInputComponent {
         this._initialModelSet = false;
         this.focused = true;
         this.canSaveOrCancel = false;
+        if (this._hasOnPushCdStrategy) {
+            this.markForCheck();
+        }
         this.focus.next();
     }
     doBlur(event) {
@@ -3169,7 +3247,12 @@ class BaseInputComponent {
                 return false;
             }
             this.focused = false;
-            this.input.blur();
+            if (this._hasOnPushCdStrategy) {
+                this.markForCheck();
+            }
+            if (this.input) {
+                this.input.blur();
+            }
             this.blur.next();
         }, 200);
     }
@@ -3280,6 +3363,15 @@ class BaseInputComponent {
             this.control.updateValueAndValidity();
         }
     }
+    _commitFinished() {
+        return new Promise((resolve) => {
+            this.commitFinished = true;
+            setTimeout(() => {
+                this.committing = false;
+                resolve();
+            }, 800);
+        });
+    }
     _clearErrorComponent() {
         if (this.validationErrorContainer) {
             this.validationErrorContainer.clear();
@@ -3386,12 +3478,14 @@ class BaseInputComponent {
                 case 'Tab':
                     const nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
                     event.preventDefault();
-                    yield this.commitClick();
-                    if (nextSiblingToFocus) {
-                        try {
-                            this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
-                        }
-                        catch (e) {
+                    const success = yield this.commitClick();
+                    if (success) {
+                        if (nextSiblingToFocus) {
+                            try {
+                                this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                            }
+                            catch (e) {
+                            }
                         }
                     }
                     return false;
@@ -3648,6 +3742,7 @@ class FormComponent {
     constructor(_formMaster) {
         this._formMaster = _formMaster;
         this.onChange = new EventEmitter();
+        this.showClass = true;
         this.submitted = false;
         // Emits true after every valid submit.
         this.validSubmit = new EventEmitter();
@@ -3794,7 +3889,10 @@ class FormComponent {
 FormComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-form",
-                template: `<ng-content></ng-content>`
+                template: `
+    <ng-content></ng-content>
+  `,
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
 FormComponent.ctorParameters = () => [
@@ -3804,6 +3902,7 @@ FormComponent.propDecorators = {
     readonly: [{ type: Input }],
     keepInView: [{ type: Input }],
     onChange: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-form",] }],
     submitted: [{ type: HostBinding, args: ["class.submitted",] }],
     validSubmit: [{ type: Output }],
     anySubmit: [{ type: Output }],
@@ -3865,6 +3964,9 @@ DropDownListComponent.decorators = [
                     {
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => DropDownListComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: DropDownListComponent
                     }
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -3933,7 +4035,8 @@ var GridLines;
 })(GridLines || (GridLines = {}));
 
 class BaseGridComponent {
-    constructor() {
+    constructor(element) {
+        this.element = element;
         this.gridLines = GridLines.None;
         this.contextMenuItems = [];
         this.sortingEnabled = false;
@@ -3961,6 +4064,9 @@ class BaseGridComponent {
 BaseGridComponent.decorators = [
     { type: Directive }
 ];
+BaseGridComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 BaseGridComponent.propDecorators = {
     grid: [{ type: ViewChild, args: ['grid', { static: false },] }],
     data: [{ type: Input }],
@@ -4083,6 +4189,10 @@ class BaseInlineEditGridComponent extends BaseToolbarGridComponent {
     constructor() {
         super(...arguments);
         this.rowSaved = new EventEmitter();
+        this.beforeRowDelete = new EventEmitter(false);
+        this.rowDeleted = new EventEmitter();
+        this.actionBeginObservable$ = new Observable();
+        this.actionBeginObservableSub = new Subscription();
     }
     set inlineEdit(value) {
         if (value) {
@@ -4097,20 +4207,59 @@ class BaseInlineEditGridComponent extends BaseToolbarGridComponent {
         this.updateToolbar("Update", value);
         this.updateToolbar("Cancel", value);
     }
+    ngAfterViewInit() {
+        if (this.grid) {
+            this.actionBeginObservable$ = fromEvent(this.grid, 'actionBegin');
+            this.actionBeginObservableSub = this.actionBeginObservable$.subscribe((action) => {
+                this.handleActionBegin(action);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.actionBeginObservableSub.unsubscribe();
+    }
+    handleActionBegin(action) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (action) {
+                if (action.requestType === "delete") {
+                    yield this.waitForBeforeDelete(action);
+                }
+                if (action.requestType === "save") {
+                    this.rowSaved.next(action.data);
+                }
+            }
+        });
+    }
     handleActionComplete(action) {
         if (action) {
+            if (action.requestType === "delete") {
+                this.rowDeleted.next(action.data);
+            }
             if (action.requestType === "save") {
                 this.rowSaved.next(action.data);
             }
         }
     }
+    waitForBeforeDelete(action) {
+        // @ts-ignore
+        const beforeRowDelete$ = fromEvent(this.element, 'beforeRowDelete');
+        return new Promise((resolve) => {
+            beforeRowDelete$.subscribe((result) => {
+                action = result;
+                return resolve(action);
+            }).unsubscribe();
+            this.beforeRowDelete.next(action);
+        });
+    }
 }
 BaseInlineEditGridComponent.decorators = [
     { type: Directive }
 ];
 BaseInlineEditGridComponent.propDecorators = {
     inlineEdit: [{ type: Input }],
-    rowSaved: [{ type: Output }]
+    rowSaved: [{ type: Output }],
+    beforeRowDelete: [{ type: Output }],
+    rowDeleted: [{ type: Output }]
 };
 __decorate([
     InputBoolean()
@@ -4127,6 +4276,8 @@ class BaseSelectionGridComponent extends BaseInlineEditGridComponent {
         this.contextMenuItemClick = new EventEmitter();
         this.rowDragStartEvent = new EventEmitter();
         this.rowDropEvent = new EventEmitter();
+        this.beforeRowsDelete = new EventEmitter();
+        this.rowsDeleted = new EventEmitter();
         this.selectionOptions = { type: "Single" };
     }
     set multipleSelect(value) {
@@ -4173,6 +4324,12 @@ class BaseSelectionGridComponent extends BaseInlineEditGridComponent {
     rowDropClick(args) {
         this.rowDropEvent.next(args);
     }
+    handleBeforeBatchDelete(args) {
+        this.beforeRowsDelete.next(args);
+    }
+    handleBatchDelete(rows) {
+        this.rowsDeleted.next(rows);
+    }
 }
 BaseSelectionGridComponent.decorators = [
     { type: Directive }
@@ -4186,7 +4343,9 @@ BaseSelectionGridComponent.propDecorators = {
     detailColumnClick: [{ type: Output }],
     contextMenuItemClick: [{ type: Output }],
     rowDragStartEvent: [{ type: Output }],
-    rowDropEvent: [{ type: Output }]
+    rowDropEvent: [{ type: Output }],
+    beforeRowsDelete: [{ type: Output }],
+    rowsDeleted: [{ type: Output }]
 };
 __decorate([
     InputBoolean()
@@ -4207,37 +4366,40 @@ CoGridComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-grid',
                 template: `
-        <ejs-grid #grid id="grid"
-                  [dataSource]="data"
-                  [columns]="columns"
-                  [contextMenuItems]="contextMenuItems"
-                  [pageSettings]="pageSettings"
-                  [toolbar]="toolbarOptions"
-                  [gridLines]="gridLines"
-                  [frozenColumns]="frozenColumns"
-                  [frozenRows]="frozenRows"
-                  [selectionSettings]="selectionOptions"
-                  [editSettings]="editSettings"
-                  [allowPaging]="pagingEnabled"
-                  [allowSorting]="sortingEnabled"
-                  [allowFiltering]="filteringEnabled"
-                  [allowGrouping]="groupingEnabled"
-                  [allowReordering]="reorderingEnabled"
-                  [allowResizing]="resizingEnabled"
-                  [allowRowDragAndDrop]="rowDragAndDropEnabled"
-                  [showColumnMenu]="showColumnMenu"
-                  [showColumnChooser]="showColumnChooser"
-                  [allowExcelExport]="exportExcelEnabled"
-                  [allowPdfExport]="exportPdfEnabled"
-                  (toolbarClick)="toolbarClick($event)"
-                  (rowSelected)="handleRowSelected($event)"
-                  (recordDoubleClick)="handleDoubleClick($event)"
-                  (recordClick)="handleRecordClick($event)"
-                  (actionComplete)="handleActionComplete($event)"
-                  (contextMenuClick)="contextMenuClick($event)"
-                  (rowDragStart)="rowDragStartClick($event)"
-                  (rowDrop)="rowDropClick($event)">
-        </ejs-grid>
+      <ejs-grid #grid id="grid"
+                [dataSource]="data"
+                [columns]="columns"
+                [contextMenuItems]="contextMenuItems"
+                [pageSettings]="pageSettings"
+                [toolbar]="toolbarOptions"
+                [gridLines]="gridLines"
+                [frozenColumns]="frozenColumns"
+                [frozenRows]="frozenRows"
+                [selectionSettings]="selectionOptions"
+                [editSettings]="editSettings"
+                [allowPaging]="pagingEnabled"
+                [allowSorting]="sortingEnabled"
+                [allowFiltering]="filteringEnabled"
+                [allowGrouping]="groupingEnabled"
+                [allowReordering]="reorderingEnabled"
+                [allowResizing]="resizingEnabled"
+                [allowRowDragAndDrop]="rowDragAndDropEnabled"
+                [showColumnMenu]="showColumnMenu"
+                [showColumnChooser]="showColumnChooser"
+                [allowExcelExport]="exportExcelEnabled"
+                [allowPdfExport]="exportPdfEnabled"
+                (toolbarClick)="toolbarClick($event)"
+                (rowSelected)="handleRowSelected($event)"
+                (recordDoubleClick)="handleDoubleClick($event)"
+                (recordClick)="handleRecordClick($event)"
+                (actionComplete)="handleActionComplete($event)"
+                (contextMenuClick)="contextMenuClick($event)"
+                (rowDragStart)="rowDragStartClick($event)"
+                (rowDrop)="rowDropClick($event)"
+                (beforeBatchDelete)="handleBeforeBatchDelete($event)"
+                (batchDelete)="handleBatchDelete($event)"
+      >
+      </ejs-grid>
     `,
                 providers: [
                     RowDDService
@@ -4249,6 +4411,62 @@ CoGridComponent.propDecorators = {
     showClass: [{ type: HostBinding, args: ['class.co-grid',] }]
 };
 
+class GridToolbarComponent {
+    constructor(iconsService) {
+        this.iconsService = iconsService;
+        this.icons = CoreComponentsIcon;
+        this.editClick = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+        this.saveClick = new EventEmitter();
+        this.addClick = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+GridToolbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-grid-toolbar",
+                template: `
+    <div class="grid-toolbar-wrapper">
+      <co-button [iconData]="iconsService.getIcon(icons.AddToCartDrop)" [label]="'edit'" (click)="editClick.emit($event)"></co-button>
+      <co-button [iconData]="iconsService.getIcon(icons.AddToCartDrop)" [label]="'cancel'" (click)="cancelClick.emit()"></co-button>
+      <co-button [iconData]="iconsService.getIcon(icons.AddToCartDrop)" [label]="'save'" (click)="saveClick.emit()"></co-button>
+      <co-button [iconData]="iconsService.getIcon(icons.AddToCartDrop)" [label]="'add'" (click)="addClick.emit()"></co-button>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+GridToolbarComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+GridToolbarComponent.propDecorators = {
+    editClick: [{ type: Output }],
+    cancelClick: [{ type: Output }],
+    saveClick: [{ type: Output }],
+    addClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-grid-toolbar",] }]
+};
+
+enableRipple(true);
+class GridToolbarModule {
+}
+GridToolbarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    IconModule,
+                    ButtonModule
+                ],
+                declarations: [
+                    GridToolbarComponent
+                ],
+                exports: [
+                    GridToolbarComponent
+                ]
+            },] }
+];
+
 class CoGridModule {
 }
 CoGridModule.decorators = [
@@ -4256,7 +4474,8 @@ CoGridModule.decorators = [
                 imports: [
                     CommonModule,
                     FormsModule,
-                    GridModule
+                    GridModule,
+                    GridToolbarModule
                 ],
                 declarations: [CoGridComponent],
                 exports: [CoGridComponent],
@@ -4318,6 +4537,9 @@ InputCheckboxComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputCheckboxComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -4417,6 +4639,9 @@ InputCheckboxMultiSelectComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxMultiSelectComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputCheckboxMultiSelectComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -4466,7 +4691,6 @@ class InputComboBoxComponent extends BaseInputComponent {
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
         this.shopPopup = true;
-        this.customHeight = true;
         super._markAsOnPush();
     }
     showClass() {
@@ -4499,6 +4723,9 @@ InputComboBoxComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputComboBoxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputComboBoxComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -4518,8 +4745,7 @@ InputComboBoxComponent.propDecorators = {
     selected: [{ type: Input }],
     placeholder: [{ type: Input }],
     shopPopup: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-combo-box",] }],
-    customHeight: [{ type: HostBinding, args: ["class.custom-height",] }]
+    showClass: [{ type: HostBinding, args: ["class.co-input-combo-box",] }]
 };
 
 class InputComboBoxModule {
@@ -4605,6 +4831,9 @@ InputDatePickerComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputDatePickerComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputDatePickerComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -4902,6 +5131,7 @@ const NUMBER_INPUTS_KEY_DOWN_WHITE_LIST = [
     KeyboardCode.Down,
     KeyboardCode.Up,
     KeyboardCode.Tab,
+    KeyboardCode.Enter,
     KeyboardCode.Home,
     KeyboardCode.End,
     KeyboardCode.Delete,
@@ -4937,76 +5167,6 @@ const NUMBER_INPUTS_KEY_DOWN_WHITE_LIST = [
     KeyboardCode.NumpadNine
 ];
 
-class InputTextComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
-        this.formComponent = formComponent;
-        this.changeDetector = changeDetector;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.formUserChangeListener = formUserChangeListener;
-        this.ngZoneWrapper = ngZoneWrapper;
-        this.elementRef = elementRef;
-        this.Icons = CoreComponentsIcon;
-        this.placeholder = "";
-        this.type = "text";
-        this.showClearButton = undefined;
-        this.hasOwnLabel = true;
-        super._markAsOnPush();
-    }
-    showClass() {
-        return true;
-    }
-}
-InputTextComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-input-text",
-                template: `
-    <label [textContent]="placeholder"></label>
-    <input #input
-           [type]="type"
-           [ngModel]="model"
-           [readonly]="readonly"
-           [required]="required"
-           (ngModelChange)="modelChange.emit($event)"
-    >
-    <div *ngIf="showSaveCancel && focused && canSaveOrCancel" class="input-save-cancel-button-wrapper" @showHideSaveCancel>
-      <div class="input-save-cancel-button save" (click)="commitClick($event)"></div>
-      <div class="input-save-cancel-button cancel" (click)="cancelClick($event)"></div>
-    </div>
-    <div class="required-indicator"></div>
-    <ng-template #validationError></ng-template>
-  `,
-                providers: [{
-                        provide: COMPONENT_INTERFACE_NAME,
-                        useExisting: forwardRef(() => InputTextComponent)
-                    }],
-                animations: [
-                    trigger('showHideSaveCancel', [
-                        state('*', style({ transform: 'scaleY(1)', opacity: 1 })),
-                        state('void', style({ transform: 'scaleY(0)', opacity: 0 })),
-                        transition('void <=> *', animate(200))
-                    ]),
-                ],
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-InputTextComponent.ctorParameters = () => [
-    { type: FormComponent, decorators: [{ type: Optional }] },
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: FormInputUserModelChangeListenerService },
-    { type: NgZoneWrapperService },
-    { type: ElementRef }
-];
-InputTextComponent.propDecorators = {
-    placeholder: [{ type: Input }],
-    type: [{ type: Input }],
-    showClearButton: [{ type: Input }],
-    keyDownWhiteList: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
-    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
-};
-
 // Input values for 'buttonShowMode' of NumberPickerComponent.
 var InputNumberPickerButtonShowMode;
 (function (InputNumberPickerButtonShowMode) {
@@ -5047,8 +5207,8 @@ class InputNumberPickerComponent extends BaseInputComponent {
         this._stepFactor = this._stepFactors[0];
         this._mayAutoCount = false;
         this._numberLogicValueChangeSub = this.numberLogic.valueChange.subscribe((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) {
@@ -5059,12 +5219,15 @@ class InputNumberPickerComponent extends BaseInputComponent {
         });
     }
     // @override
-    set model(model) {
-        this.numberLogic.value = model;
-    }
-    get model() {
-        return this.numberLogic.value;
-    }
+    // @Input()
+    // public set model(model: number) {
+    //   super.model = model;
+    //   this.numberLogic.value = model;
+    // }
+    //
+    // public get model(): number {
+    //   return this.numberLogic.value;
+    // }
     set min(min) {
         this.numberLogic.min = min;
     }
@@ -5114,6 +5277,11 @@ class InputNumberPickerComponent extends BaseInputComponent {
         if (this.myKeyDownWhiteList.find((k) => k === event.keyCode) === undefined) {
             return false;
         }
+        super.handleKeyDown(event);
+    }
+    handleChangeModel(value) {
+        console.log(value);
+        this.numberLogic.setValue(value);
     }
     // Note: recursive through setTimeout().
     doDecrementAuto() {
@@ -5182,17 +5350,6 @@ class InputNumberPickerComponent extends BaseInputComponent {
             }
         }, this._delayBeforeStartAutoCountMs);
     }
-    // Possibly show buttons.
-    onNumberInputFocus() {
-        this._numberInputHasFocus = true;
-        this._updateButtonsShowState();
-    }
-    // Value correction point.
-    onNumberInputBlur() {
-        this._numberInputHasFocus = false;
-        this.numberLogic.setValueByUserInputText(this.inputTextComp.model);
-        this._updateButtonsShowState();
-    }
     // Note: recursive.
     _doIncreaseStepFactor() {
         this._stepIncrementTimeout = window.setTimeout(() => {
@@ -5237,10 +5394,11 @@ InputNumberPickerComponent.decorators = [
                  (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
     </div>
     <input type="text"
-           [ngModel]="numberLogic.valueAsSting"
+           [ngModel]="model"
            [readonly]="readonly"
            [disabled]="disabled"
            [required]="required"
+           (ngModelChange)="handleChangeModel($event)"
            (keydown)="handleKeyDown($event)"/>
     <div class="button-wrapper">
       <co-button *ngIf="showButtons" class="plus-operator circle"  [class.select]="plusSelected"
@@ -5252,6 +5410,9 @@ InputNumberPickerComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputNumberPickerComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputNumberPickerComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -5266,7 +5427,6 @@ InputNumberPickerComponent.ctorParameters = () => [
     { type: FormInputUserModelChangeListenerService }
 ];
 InputNumberPickerComponent.propDecorators = {
-    model: [{ type: Input }],
     min: [{ type: Input }],
     step: [{ type: Input }],
     max: [{ type: Input }],
@@ -5277,7 +5437,6 @@ InputNumberPickerComponent.propDecorators = {
     noValidation: [{ type: Input }],
     decimals: [{ type: Input }],
     modelChange: [{ type: Output }],
-    inputTextComp: [{ type: ViewChild, args: [InputTextComponent, { static: true },] }],
     showButtonsOnFocusOnly: [{ type: HostBinding, args: ["class.show-buttons-on-focus-only",] }],
     hasLabel: [{ type: HostBinding, args: ["class.has-label",] }],
     showClass: [{ type: HostBinding, args: ['class.co-input-number-picker',] }]
@@ -5286,39 +5445,215 @@ __decorate([
     InputBoolean()
 ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
-class ValidationErrorModule {
-}
-ValidationErrorModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    IconModule
-                ],
-                declarations: [
-                    ValidationErrorComponent
-                ],
-                exports: [
-                    ValidationErrorComponent
-                ]
-            },] }
-];
-
-class InputTextModule {
+class InputTextComponent extends BaseInputComponent {
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+        this.formComponent = formComponent;
+        this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
+        this.Icons = CoreComponentsIcon;
+        this.placeholder = "";
+        this.type = "text";
+        this.showClearButton = undefined;
+        this.hasOwnLabel = true;
+        super._markAsOnPush();
+    }
+    showClass() {
+        return true;
+    }
 }
-InputTextModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    BaseModule,
-                    CommonModule,
-                    FormsModule,
-                    IconModule,
-                    AppendPipeModule,
-                    TextBoxAllModule,
-                    NumericTextBoxModule,
-                    ValidationErrorModule
-                ],
-                declarations: [
-                    InputTextComponent
+InputTextComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-input-text",
+                template: `
+    <label [textContent]="placeholder"></label>
+    <input #input
+           [type]="type"
+           [ngModel]="model"
+           [readonly]="readonly"
+           [required]="required"
+           (ngModelChange)="modelChange.emit($event)"
+    >
+    <co-commit-buttons *ngIf="showSaveCancel && focused && canSaveOrCancel"
+      [committing]="committing"
+      [commitFinished]="commitFinished"
+      (commitClick)="commitClick($event)"
+      (cancelClick)="cancelClick($event)"
+    >
+    </co-commit-buttons>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
+  `,
+                providers: [{
+                        provide: COMPONENT_INTERFACE_NAME,
+                        useExisting: forwardRef(() => InputTextComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputTextComponent
+                    }],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+InputTextComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
+InputTextComponent.propDecorators = {
+    placeholder: [{ type: Input }],
+    type: [{ type: Input }],
+    showClearButton: [{ type: Input }],
+    keyDownWhiteList: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-input-text",] }],
+    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
+};
+
+class ValidationErrorModule {
+}
+ValidationErrorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule
+                ],
+                declarations: [
+                    ValidationErrorComponent
+                ],
+                exports: [
+                    ValidationErrorComponent
+                ]
+            },] }
+];
+
+class CommitButtonsComponent {
+    constructor(_renderer) {
+        this._renderer = _renderer;
+        this.cancelClick = new EventEmitter();
+        this.commitClick = new EventEmitter();
+        this._committing = false;
+        this._commitFinished = false;
+        this._handleAnimationIteration = (event) => {
+            this._renderer.removeClass(event.currentTarget, 'animate');
+            event.currentTarget.removeEventListener('animationiteration', this._handleAnimationIteration);
+            // elem.removeEventListener('webkitAnimationIteration', () => this._handleAnimationIteration(elem));
+        };
+    }
+    set content(children) {
+        this.animateDivs = children.toArray();
+        this._checkAnimation();
+    }
+    set committing(value) {
+        this._committing = value;
+        this._checkAnimation();
+    }
+    get committing() {
+        return this._committing;
+    }
+    set commitFinished(value) {
+        this._commitFinished = value;
+        this._checkAnimationFinished();
+    }
+    get commitFinished() {
+        return this._commitFinished;
+    }
+    showClass() {
+        return true;
+    }
+    _checkAnimation() {
+        if (this.committing && this.animateDivs) {
+            this.animateDivs.forEach(a => this._renderer.addClass(a.nativeElement, 'animate'));
+        }
+    }
+    _checkAnimationFinished() {
+        if (this.commitFinished && this.animateDivs) {
+            this.animateDivs.forEach(a => {
+                a.nativeElement.addEventListener('animationiteration', this._handleAnimationIteration);
+                // a.nativeElement.addEventListener('webkitAnimationIteration', (event) => this._handleAnimationIteration(event));
+            });
+        }
+    }
+}
+CommitButtonsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-commit-buttons",
+                template: `
+    <div class="commit-buttons-wrapper" @showHideSaveCancel>
+      <div class="commit-buttons-button save" [class.finished]="commitFinished"
+           (click)="commitClick.emit($event)">
+        <div class="save-button-spinner" *ngIf="committing || commitFinished">
+          <div #animatediv></div>
+          <div #animatediv></div>
+          <div #animatediv></div>
+          <div #animatediv></div>
+        </div>
+        <div class="spinner-checkmark" *ngIf="!committing || commitFinished"></div>
+      </div>
+      <div class="commit-buttons-button cancel" (click)="cancelClick.emit($event)">
+        <div class="cancel-button"></div>
+      </div>
+    </div>
+  `,
+                animations: [
+                    trigger('showHideSaveCancel', [
+                        state('*', style({ transform: 'scaleY(1)', opacity: 1 })),
+                        state('void', style({ transform: 'scaleY(0)', opacity: 0 })),
+                        transition('void <=> *', animate(200))
+                    ]),
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CommitButtonsComponent.ctorParameters = () => [
+    { type: Renderer2 }
+];
+CommitButtonsComponent.propDecorators = {
+    content: [{ type: ViewChildren, args: ['animatediv', { read: ElementRef },] }],
+    committing: [{ type: Input }],
+    commitFinished: [{ type: Input }],
+    cancelClick: [{ type: Output }],
+    commitClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-commit-buttons",] }]
+};
+
+class CommitButtonsModule {
+}
+CommitButtonsModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    CommitButtonsComponent
+                ],
+                exports: [
+                    CommitButtonsComponent
+                ]
+            },] }
+];
+
+class InputTextModule {
+}
+InputTextModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    BaseModule,
+                    CommonModule,
+                    FormsModule,
+                    IconModule,
+                    AppendPipeModule,
+                    TextBoxAllModule,
+                    NumericTextBoxModule,
+                    ValidationErrorModule,
+                    CommitButtonsModule
+                ],
+                declarations: [
+                    InputTextComponent
                 ],
                 exports: [
                     InputTextComponent
@@ -5374,6 +5709,9 @@ InputRadioButtonComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputRadioButtonComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputRadioButtonComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -5448,6 +5786,9 @@ InputTextareaComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextareaComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputTextareaComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -5549,6 +5890,9 @@ MultiSelectListComponent.decorators = [
                     {
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => MultiSelectListComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: MultiSelectListComponent
                     }
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -7057,6 +7401,9 @@ InputListboxComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputListboxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputListboxComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7109,6 +7456,10 @@ var ColumnAlign;
 class SimpleGridColumnDirective {
     constructor() {
         this.resizable = true;
+        this.required = false;
+        this.readonly = false;
+        this.order = 0;
+        this.singleColumn = false;
     }
     set template(template) {
         if (template) {
@@ -7118,6 +7469,33 @@ class SimpleGridColumnDirective {
     get template() {
         return this._template;
     }
+    set editTemplate(template) {
+        if (template) {
+            this._editTemplate = template;
+        }
+    }
+    get editTemplate() {
+        return this._editTemplate;
+    }
+    ngOnInit() {
+        this._setSingleColumnProps();
+    }
+    getFieldValue(value) {
+        if (this.collection && this.displayField) {
+            const result = this.collection.find(c => c[this.codeField] === value);
+            if (result) {
+                return result[this.displayField];
+            }
+        }
+        return value;
+    }
+    _setSingleColumnProps() {
+        if (this.singleColumn) {
+            this.resizable = false;
+            this.readonly = true;
+            this.width = 0;
+        }
+    }
 }
 SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
 SimpleGridColumnDirective.decorators = [
@@ -7126,33 +7504,45 @@ SimpleGridColumnDirective.decorators = [
             },] }
 ];
 SimpleGridColumnDirective.propDecorators = {
-    template: [{ type: ContentChild, args: [TemplateRef,] }],
+    template: [{ type: ContentChild, args: ['template',] }],
+    editTemplate: [{ type: ContentChild, args: ['editTemplate',] }],
     headerText: [{ type: Input }],
     field: [{ type: Input }],
+    codeField: [{ type: Input }],
+    displayField: [{ type: Input }],
     textAlign: [{ type: Input }],
     format: [{ type: Input }],
     resizable: [{ type: Input }],
-    width: [{ type: Input }]
+    required: [{ type: Input }],
+    width: [{ type: Input }],
+    readonly: [{ type: Input }],
+    collection: [{ type: Input }],
+    order: [{ type: Input }],
+    singleColumn: [{ type: Input }]
 };
 
-class SimpleGridComponent {
+class BaseSimpleGridComponent {
     constructor() {
-        this.defaultTextAlign = ColumnAlign.Left;
         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 EventEmitter();
+        this.selectRow = new EventEmitter();
+        this.dblClickRow = new EventEmitter();
+        this.saveRow = new EventEmitter();
         this.columns = [];
     }
     set content(columnComponents) {
-        this.columns = columnComponents.toArray();
+        this._setColumns(columnComponents.toArray());
     }
-    showClass() {
-        return true;
+    set extraColumns(value) {
+        this._setColumns(value);
     }
     handleMouseMove(event) {
         if (event.buttons === 1 && this._columnForResize) {
@@ -7190,14 +7580,283 @@ class SimpleGridComponent {
             console.error(e);
         }
     }
+    _setColumns(columns) {
+        this.columns.push(...columns);
+        this.columns.sort((a, b) => a.order < b.order ? -1 : 1);
+    }
+}
+BaseSimpleGridComponent.decorators = [
+    { type: Directive }
+];
+BaseSimpleGridComponent.propDecorators = {
+    content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
+    data: [{ type: Input }],
+    dragDropEnabled: [{ type: Input }],
+    inlineEdit: [{ type: Input }],
+    showToolbar: [{ type: Input }],
+    emitDragDrop: [{ type: Input }],
+    extraColumns: [{ type: Input }],
+    onDrop: [{ type: Output }],
+    selectRow: [{ type: Output }],
+    dblClickRow: [{ type: Output }],
+    saveRow: [{ type: Output }],
+    handleMouseMove: [{ type: HostListener, args: ['document:mousemove', ['$event'],] }],
+    handleMouseUp: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
+};
+
+class SimpleGridComponent extends BaseSimpleGridComponent {
+    constructor(_changeDetection, _formMaster) {
+        super();
+        this._changeDetection = _changeDetection;
+        this._formMaster = _formMaster;
+        this.defaultTextAlign = ColumnAlign.Left;
+        this.editting = false;
+        this.editRowIndex = -1;
+        this.editCellIndex = -1;
+        this.selectedRowIndex = -1;
+        this._doubleClicked = false;
+        this._newRow = false;
+    }
+    showClass() {
+        return true;
+    }
+    handleKeyDown(event) {
+        if (!this.inlineEdit) {
+            return;
+        }
+        if (event.code === 'Tab') {
+            event.preventDefault();
+            this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
+                .then((index) => {
+                this.editCellIndex = index;
+                this._changeDetection.markForCheck();
+            });
+            this._detectChanges();
+        }
+        if (event.code === 'Escape') {
+            this.cancelEditRow();
+        }
+        if (event.code === 'Enter') {
+            this.validateAndSave();
+        }
+    }
+    isSingleColumn(column) {
+        return column.singleColumn;
+    }
+    rowContainsSingleColumn(row, columns) {
+        const singleColumn = columns.find(column => this.isSingleColumn(column) && !!row[column.field]);
+        return !!singleColumn;
+    }
+    addRow() {
+        const valid = this.validateAndSave();
+        this._detectChanges();
+        if (valid) {
+            this.data.unshift({});
+            this._newRow = true;
+            this.editRowIndex = 0;
+            this._nextAvailableCellToEdit(true).then((index) => {
+                this.editCellIndex = index;
+            });
+            this.editting = true;
+            this.rowToEdit = this.data[0];
+            this._detectChanges();
+        }
+    }
+    validateAndSave(stopEditting = true) {
+        if (!this.editting) {
+            return true;
+        }
+        const valid = this._formMaster.submitSlaves();
+        this._detectChanges();
+        if (valid) {
+            this._saveRow(stopEditting);
+            return true;
+        }
+    }
+    cancelEditRow() {
+        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();
+    }
+    handleClickRow(event, index) {
+        setTimeout(() => {
+            if (this._doubleClicked) {
+                return;
+            }
+            this.selectTheRow(index);
+        }, 200);
+    }
+    selectTheRow(index, 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();
+    }
+    handleDblClickRow(event, index) {
+        this._doubleClicked = true;
+        this.dblClickRow.next(this.data[index]);
+        this.selectTheRow(index, false);
+        if (this.inlineEdit) {
+            this.editRow(event);
+        }
+        this._resetDblClick();
+    }
+    editRow(event) {
+        this.editRowIndex = this.selectedRowIndex;
+        this.rowToEdit = this.data[this.editRowIndex];
+        this.editting = true;
+        this._nextAvailableCellToEdit(true).then((index) => {
+            this.editCellIndex = index;
+        });
+        this._detectChanges();
+    }
+    handleCellClick(index) {
+        this.editCellIndex = index;
+        this._detectChanges();
+    }
+    _resetDblClick() {
+        setTimeout(() => {
+            this._doubleClicked = false;
+        }, 500);
+    }
+    /**
+     *
+     * @param next; Move to next or previous cell
+     * @param start; Start from cellindex
+     * @private
+     */
+    _nextAvailableCellToEdit(next, start = -1) {
+        return new Promise((resolve, reject) => {
+            const numEditableColumns = this.columns.filter(c => !c.readonly).length;
+            const wantedIndex = start + (next ? 1 : -1);
+            if (wantedIndex >= numEditableColumns) {
+                this._getNextEditRowIndex()
+                    .then((index) => {
+                    this.editRowIndex = index;
+                    resolve(this._getNextEditCellIndex(0));
+                })
+                    .catch((e) => {
+                    reject();
+                });
+            }
+            else if (wantedIndex < 0) {
+                this._getPreviousEditRowIndex()
+                    .then((index) => {
+                    this.editRowIndex = index;
+                    resolve(this._getPreviousEditCellIndex(this.columns.length - 1));
+                })
+                    .catch((e) => {
+                    reject();
+                });
+            }
+            else {
+                resolve(next ? this._getNextEditCellIndex(start + 1) : this._getPreviousEditCellIndex(start - 1));
+            }
+        });
+    }
+    _getNextEditCellIndex(start) {
+        for (let i = start; i < this.columns.length; i++) {
+            if (!this.columns[i].readonly) {
+                return i;
+            }
+        }
+    }
+    _getPreviousEditCellIndex(start) {
+        for (let i = start; i >= 0; i--) {
+            if (!this.columns[i].readonly) {
+                return i;
+            }
+        }
+    }
+    _getNextEditRowIndex() {
+        return new Promise((resolve, reject) => {
+            let 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);
+            }
+        });
+    }
+    _getPreviousEditRowIndex() {
+        return new Promise((resolve, reject) => {
+            let 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);
+            }
+        });
+    }
+    _saveRow(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();
+    }
+    _detectChanges() {
+        this._changeDetection.detectChanges();
+    }
 }
 SimpleGridComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-simple-grid",
                 template: `
+    <co-grid-toolbar *ngIf="inlineEdit && showToolbar"
+                     (addClick)="addRow()"
+                     (editClick)="editRow($event)"
+                     (saveClick)="validateAndSave()"
+                     (cancelClick)="cancelEditRow()"
+    ></co-grid-toolbar>
     <div class="simple-grid-column-header-wrapper">
       <div class="simple-grid-column-header" *ngFor="let column of columns; let index = index"
-           [style.min-width.px]="column.width" [style.max-width.px]="column.width">
+           [style.min-width.px]="column.width" [style.max-width.px]="column.width" [style.padding-right.px]="isSingleColumn(column) ? 0 : 5">
         <div class="simple-grid-column-header-label" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign"
              [textContent]="column.headerText"
         ></div>
@@ -7214,34 +7873,201 @@ SimpleGridComponent.decorators = [
            [cdkDropListEnterPredicate]="handleCanDragDrop"
            (cdkDropListDropped)="handleDrop($event)"
       >
-        <div class="simple-grid-row" *ngFor="let row of data" cdkDrag>
-          <div class="simple-grid-column-cell" *ngFor="let column of columns"
-               [style.min-width.px]="column.width" [style.max-width.px]="column.width">
-            <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
-              <ng-container *ngIf="column.template">
-                <ng-container [ngTemplateOutlet]="column.template" [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
-              </ng-container>
-              <div  *ngIf="!column.template" [textContent]="row[column.field]"></div>
+        <div class="simple-grid-row" [class.selected]="rowIndex === selectedRowIndex"
+             [class.editting]="rowIndex === editRowIndex" *ngFor="let row of data; let rowIndex = index" cdkDrag
+             (click)="handleClickRow($event, rowIndex)" (dblclick)="handleDblClickRow($event, rowIndex)">
+          <co-form class="simple-grid-row-form">
+            <div class="simple-grid-column-cell" *ngFor="let column of columns; let columnIndex = index"
+                 [style.min-width]="isSingleColumn(column) ? 'fit-content' : column.width" [style.max-width.px]="column.width"
+                 [style.padding-right.px]="isSingleColumn(column) ? 0 : 5" >
+                <co-simple-grid-cell
+                  [column]="column"
+                  [row]="row"
+                  [editMode]="inlineEdit && editting && rowIndex === editRowIndex && !isSingleColumn(column) && !rowContainsSingleColumn(row, columns)"
+                  [fieldEditMode]="editCellIndex === columnIndex"
+                  (cellClick)="handleCellClick(columnIndex)"
+                ></co-simple-grid-cell>
+              <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
             </div>
-            <div *ngIf="column.resizable" class="simple-grid-column-sizer-placeholder"></div>
-          </div>
+          </co-form>
         </div>
       </div>
     </div>
   `,
+                providers: [
+                    FormMasterService
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+SimpleGridComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: FormMasterService }
+];
 SimpleGridComponent.propDecorators = {
-    content: [{ type: ContentChildren, args: [SimpleGridColumnDirective,] }],
-    data: [{ type: Input }],
-    dragDropEnabled: [{ type: Input }],
-    emitDragDrop: [{ type: Input }],
-    onDrop: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-simple-grid",] }],
-    handleMouseMove: [{ type: HostListener, args: ['document:mousemove', ['$event'],] }],
-    handleMouseUp: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
+    handleKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
+};
+
+class SimpleGridCellComponent {
+    constructor(_changeDetector) {
+        this._changeDetector = _changeDetector;
+        this.defaultTextAlign = ColumnAlign.Left;
+        this.editMode = false;
+        this.cellClick = new EventEmitter();
+        this._fieldEditMode = false;
+        this._focused = false;
+    }
+    set editTemplateContent(template) {
+        if (template) {
+            this._editTemplate = template;
+            this._setFocusComponent();
+        }
+    }
+    set noEditTemplateContent(template) {
+        if (template) {
+            this._template = template;
+            this._setFocusComponent();
+        }
+    }
+    set noTemplateContent(template) {
+        if (template) {
+            this._inputTemplate = template;
+            this._setFocusComponent();
+        }
+    }
+    set fieldEditMode(value) {
+        this._fieldEditMode = value;
+        this._setFocusComponent();
+    }
+    get fieldEditMode() {
+        return this._fieldEditMode;
+    }
+    showClass() {
+        return true;
+    }
+    handleClick(event) {
+        if (this.column && !this.column.readonly) {
+            this.cellClick.next();
+        }
+    }
+    _setFocusComponent() {
+        if (this.editMode && this.fieldEditMode) {
+            const element = this._getElement();
+            if (element) {
+                const focusEvent = this._createNewEvent(element, 'focus');
+                element.focus();
+                element.dispatchEvent(focusEvent);
+                this._focused = true;
+            }
+        }
+        else {
+            if (this._focused) {
+                const element = this._getElement();
+                if (element) {
+                    const blurEvent = this._createNewEvent(element, 'blur');
+                    element.blur();
+                    element.dispatchEvent(blurEvent);
+                }
+                this._focused = false;
+            }
+        }
+        this._detectChanges();
+    }
+    _getFirstFormInput(parent) {
+        if (parent) {
+            const collection = Array.from(parent.getElementsByTagName('input'));
+            const otherCollection = Array.from(parent.getElementsByTagName('textarea'));
+            otherCollection.map(o => collection.push(o));
+            if (collection.length > 0) {
+                return collection[0];
+            }
+        }
+    }
+    _createNewEvent(element, eventType) {
+        let 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;
+    }
+    _getElement() {
+        let templ;
+        if (this._editTemplate) {
+            templ = this._editTemplate;
+        }
+        else if (this._template) {
+            templ = this._template;
+        }
+        else {
+            templ = this._inputTemplate;
+        }
+        if (templ) {
+            if (templ && templ.elementRef) {
+                const inputElement = this._getFirstFormInput(templ.elementRef.nativeElement.parentElement);
+                if (inputElement) {
+                    return inputElement;
+                }
+            }
+        }
+    }
+    _detectChanges() {
+        this._changeDetector.detectChanges();
+    }
+}
+SimpleGridCellComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-simple-grid-cell",
+                template: `
+    <div class="simple-grid-column-cell-value" [ngClass]="column.textAlign ? column.textAlign : defaultTextAlign">
+      <ng-container *ngIf="editMode; else noInlineEdit">
+        <ng-container #editTemplate *ngIf="column.editTemplate; else noEditTemplate"
+                      [ngTemplateOutlet]="column.editTemplate"
+                      [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+        <ng-template #noEditTemplate>
+          <ng-container *ngIf="column.template; else noTemplate">
+            <ng-container [ngTemplateOutlet]="column.template"
+                          [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+          </ng-container>
+          <ng-template #noTemplate>
+            <co-input-text [(model)]="row[column.field]" [required]="column.required"></co-input-text>
+          </ng-template>
+        </ng-template>
+      </ng-container>
+      <ng-template #noInlineEdit>
+        <ng-container *ngIf="column.template; else noTemplate">
+          <ng-container [ngTemplateOutlet]="column.template"
+                        [ngTemplateOutletContext]="{value: row[column.field], row: row}"></ng-container>
+        </ng-container>
+        <ng-template #noTemplate>
+          <div [textContent]="column.getFieldValue(row[column.field])"></div>
+        </ng-template>
+      </ng-template>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+SimpleGridCellComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+SimpleGridCellComponent.propDecorators = {
+    editTemplateContent: [{ type: ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
+    noEditTemplateContent: [{ type: ViewChild, args: ["noEditTemplate",] }],
+    noTemplateContent: [{ type: ViewChild, args: ["noTemplate",] }],
+    column: [{ type: Input }],
+    row: [{ type: Input }],
+    editMode: [{ type: Input }],
+    fieldEditMode: [{ type: Input }],
+    cellClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-simple-grid-cell",] }],
+    handleClick: [{ type: HostListener, args: ['click', ['$event'],] }]
 };
 
 class SimpleGridModule {
@@ -7250,14 +8076,19 @@ SimpleGridModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    DragDropModule
+                    DragDropModule,
+                    GridToolbarModule,
+                    InputTextModule,
+                    FormModule
                 ],
                 declarations: [
                     SimpleGridComponent,
+                    SimpleGridCellComponent,
                     SimpleGridColumnDirective
                 ],
                 exports: [
                     SimpleGridComponent,
+                    SimpleGridCellComponent,
                     SimpleGridColumnDirective
                 ]
             },] }
@@ -7511,11 +8342,7 @@ class Carousel3dComponent {
         boundingBox.getSize(size);
         // get the max side of the bounding box (fits to width OR height as needed )
         const maxDim = Math.max(size.x, size.y, size.z);
-        const fov = this._camera.fov * (Math.PI / 180);
-        // let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 200));
-        let 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);
     }
     _checkNavigationButtons() {
@@ -7653,5 +8480,5 @@ Carousel3dModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, Carousel3dComponent, Carousel3dModule, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormMasterService, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, ValidationErrorModule as ɵt, ValidationErrorComponent as ɵu, PopupShowerService as ɵv };
+export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, Carousel3dComponent, Carousel3dModule, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoDialogWizardComponent, CoDialogWizardModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormMasterService, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, SimpleGridCellComponent as ɵbb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, GridToolbarModule as ɵn, GridToolbarComponent as ɵo, BaseSelectionGridComponent as ɵp, BaseInlineEditGridComponent as ɵq, BaseToolbarGridComponent as ɵr, BaseGridComponent as ɵs, AppendPipeModule as ɵt, AppendPipe as ɵu, ValidationErrorModule as ɵv, ValidationErrorComponent as ɵw, CommitButtonsModule as ɵx, CommitButtonsComponent as ɵy, PopupShowerService as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map