@colijnit/corecomponents_v12 12.0.21 → 12.0.22

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, 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';
@@ -15,6 +15,7 @@ import { SwitchModule, CheckBoxModule, RadioButtonModule } from '@syncfusion/ej2
 import { FormsModule, NgModel, FormGroup } from '@angular/forms';
 import { CheckBoxSelectionService, DropDownListModule, MultiSelectModule, MultiSelectAllModule, ComboBoxAllModule, ListBoxComponent, CheckBoxSelection, ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';
 import { RowDDService, GridModule, PageService, SortService, FilterService, GroupService, ReorderService, ResizeService, ExcelExportService, PdfExportService, EditService, ToolbarService, ColumnChooserService, ColumnMenuService, ContextMenuService } from '@syncfusion/ej2-angular-grids';
+import { fromEvent as fromEvent$1 } from 'rxjs/internal/observable/fromEvent';
 import { enableRipple } from '@syncfusion/ej2-base';
 import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
 import { TextBoxAllModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
@@ -2313,6 +2314,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;
@@ -3169,7 +3231,9 @@ class BaseInputComponent {
                 return false;
             }
             this.focused = false;
-            this.input.blur();
+            if (this.input) {
+                this.input.blur();
+            }
             this.blur.next();
         }, 200);
     }
@@ -3648,6 +3712,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 +3859,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 +3872,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 +3934,9 @@ DropDownListComponent.decorators = [
                     {
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => DropDownListComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: DropDownListComponent
                     }
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -3933,7 +4005,8 @@ var GridLines;
 })(GridLines || (GridLines = {}));
 
 class BaseGridComponent {
-    constructor() {
+    constructor(element) {
+        this.element = element;
         this.gridLines = GridLines.None;
         this.contextMenuItems = [];
         this.sortingEnabled = false;
@@ -3961,6 +4034,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 +4159,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 +4177,59 @@ class BaseInlineEditGridComponent extends BaseToolbarGridComponent {
         this.updateToolbar("Update", value);
         this.updateToolbar("Cancel", value);
     }
+    ngAfterViewInit() {
+        if (this.grid) {
+            this.actionBeginObservable$ = fromEvent$1(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$1(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 +4246,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 +4294,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 +4313,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 +4336,41 @@ 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>
+      <co-grid-toolbar></co-grid-toolbar>
+      <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 +4382,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 +4445,8 @@ CoGridModule.decorators = [
                 imports: [
                     CommonModule,
                     FormsModule,
-                    GridModule
+                    GridModule,
+                    GridToolbarModule
                 ],
                 declarations: [CoGridComponent],
                 exports: [CoGridComponent],
@@ -4318,6 +4508,9 @@ InputCheckboxComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputCheckboxComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -4417,6 +4610,9 @@ InputCheckboxMultiSelectComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputCheckboxMultiSelectComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputCheckboxMultiSelectComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -4466,7 +4662,6 @@ class InputComboBoxComponent extends BaseInputComponent {
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
         this.shopPopup = true;
-        this.customHeight = true;
         super._markAsOnPush();
     }
     showClass() {
@@ -4499,6 +4694,9 @@ InputComboBoxComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputComboBoxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputComboBoxComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -4518,8 +4716,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 +4802,9 @@ InputDatePickerComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputDatePickerComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputDatePickerComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -4979,6 +5179,9 @@ InputTextComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputTextComponent
                     }],
                 animations: [
                     trigger('showHideSaveCancel', [
@@ -5252,6 +5455,9 @@ InputNumberPickerComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputNumberPickerComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputNumberPickerComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -5374,6 +5580,9 @@ InputRadioButtonComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputRadioButtonComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputRadioButtonComponent
                     }],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
@@ -5448,6 +5657,9 @@ InputTextareaComponent.decorators = [
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextareaComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputTextareaComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -5549,6 +5761,9 @@ MultiSelectListComponent.decorators = [
                     {
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => MultiSelectListComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: MultiSelectListComponent
                     }
                 ],
                 encapsulation: ViewEncapsulation.None
@@ -7057,6 +7272,9 @@ InputListboxComponent.decorators = [
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputListboxComponent)
+                    }, {
+                        provide: BaseInputComponent,
+                        useExisting: InputListboxComponent
                     }],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -7109,6 +7327,8 @@ var ColumnAlign;
 class SimpleGridColumnDirective {
     constructor() {
         this.resizable = true;
+        this.required = false;
+        this.readonly = false;
     }
     set template(template) {
         if (template) {
@@ -7118,6 +7338,23 @@ class SimpleGridColumnDirective {
     get template() {
         return this._template;
     }
+    set editTemplate(template) {
+        if (template) {
+            this._editTemplate = template;
+        }
+    }
+    get editTemplate() {
+        return this._editTemplate;
+    }
+    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;
+    }
 }
 SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
 SimpleGridColumnDirective.decorators = [
@@ -7126,34 +7363,41 @@ 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 }]
 };
 
-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();
     }
-    showClass() {
-        return true;
-    }
     handleMouseMove(event) {
         if (event.buttons === 1 && this._columnForResize) {
             if (!this._columnForResize.width) {
@@ -7191,10 +7435,271 @@ class SimpleGridComponent {
         }
     }
 }
+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 }],
+    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._detectChanges();
+        }
+        if (event.code === 'Escape') {
+            this.cancelEditRow();
+        }
+        if (event.code === 'Enter') {
+            this.validateAndSave();
+        }
+    }
+    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() {
+        // setTimeout(() => {
+        // this._changeDetection.markForCheck();
+        // this._changeDetection.reattach();
+        this._changeDetection.detectChanges();
+        // this._changeDetection.detach();
+        // });
+    }
+}
 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">
@@ -7214,34 +7719,198 @@ 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.px]="column.width" [style.max-width.px]="column.width">
+              <co-simple-grid-cell
+                [column]="column"
+                [row]="row"
+                [editMode]="inlineEdit && editting && rowIndex === editRowIndex"
+                [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>
   `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
+                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() {
+        // setTimeout(() => {
+        this._changeDetector.markForCheck();
+        // 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 +7919,19 @@ SimpleGridModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    DragDropModule
+                    DragDropModule,
+                    GridToolbarModule,
+                    InputTextModule,
+                    FormModule
                 ],
                 declarations: [
                     SimpleGridComponent,
+                    SimpleGridCellComponent,
                     SimpleGridColumnDirective
                 ],
                 exports: [
                     SimpleGridComponent,
+                    SimpleGridCellComponent,
                     SimpleGridColumnDirective
                 ]
             },] }
@@ -7511,11 +8185,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 +8323,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, 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, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, SimpleGridCellComponent as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map