@colijnit/extendedcomponents 12.0.3 → 12.0.5

package/fesm2015/colijnit-extendedcomponents.js

@@ -1,990 +1,16 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ViewChild, Input, Output, HostBinding, NgModule, ChangeDetectionStrategy, Directive, Injectable, Pipe } from '@angular/core';
+import { Component, ViewEncapsulation, HostBinding, Input, NgModule, Injectable, Pipe } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@syncfusion/ej2-angular-kanban';
-import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
-import * as i1$1 from '@syncfusion/ej2-angular-schedule';
-import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
-import { FormsModule } from '@angular/forms';
-import * as i1$2 from '@syncfusion/ej2-angular-grids';
-import { RowDDService, GridModule, PageService, SortService, FilterService, GroupService, ReorderService, ResizeService, ExcelExportService, PdfExportService, EditService, ToolbarService, ColumnChooserService, ColumnMenuService, ContextMenuService } from '@syncfusion/ej2-angular-grids';
-import { __awaiter } from 'tslib';
-import { Observable, Subscription, fromEvent } from 'rxjs';
-import * as i1$3 from '@syncfusion/ej2-angular-pivotview';
-import { GroupingBarService, GroupingService, ToolbarService as ToolbarService$1, ConditionalFormattingService, FieldListService, NumberFormattingService, PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
-import * as echarts from 'echarts/core';
-import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-
-class CoKanbanComponent {
-    constructor() {
-        this.allowDragAndDrop = true;
-        this.allowKeyboard = true;
-        this.enablePersistence = false;
-        this.enableTooltip = false;
-        this.keyField = "";
-        this.showEmptyColumn = false;
-        this.cardClickEvent = new EventEmitter();
-        this.cardDoubleClickEvent = new EventEmitter();
-        this.dragStartEvent = new EventEmitter();
-        this.dragStopEvent = new EventEmitter();
-    }
-    showClass() {
-        return true;
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-        if (this.columns) {
-            this.kanban.columns = this.columns;
-        }
-    }
-    dialogOpen(args) {
-        args.cancel = true;
-    }
-    handleCardClick(args) {
-        this.cardClickEvent.next(args);
-    }
-    handleCardDoubleClick(args) {
-        this.cardDoubleClickEvent.next(args);
-    }
-    handleDragStart(args) {
-        this.dragStartEvent.next(args);
-    }
-    handleDragStop(args) {
-        this.dragStopEvent.next(args);
-    }
-}
-CoKanbanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoKanbanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoKanbanComponent, selector: "co-kanban", inputs: { allowDragAndDrop: "allowDragAndDrop", allowKeyboard: "allowKeyboard", cardSettings: "cardSettings", enablePersistence: "enablePersistence", enableTooltip: "enableTooltip", keyField: "keyField", showEmptyColumn: "showEmptyColumn", swimlaneSettings: "swimlaneSettings", columns: "columns", data: "data" }, outputs: { cardClickEvent: "cardClickEvent", cardDoubleClickEvent: "cardDoubleClickEvent", dragStartEvent: "dragStartEvent", dragStopEvent: "dragStopEvent" }, host: { properties: { "class.co-kanban": "this.showClass" } }, viewQueries: [{ propertyName: "kanban", first: true, predicate: ["kanban"], descendants: true }], ngImport: i0, template: `
-    <ejs-kanban
-        #kanban
-        id="kanban"
-        [allowDragAndDrop]="allowDragAndDrop"
-        [allowKeyboard]="allowKeyboard"
-        [cardSettings]="cardSettings"
-        [enablePersistence]="enablePersistence"
-        [enableTooltip]="enableTooltip"
-        [keyField]="keyField"
-        [showEmptyColumn]="showEmptyColumn"
-        [swimlaneSettings]="swimlaneSettings"
-        [dataSource]="data"
-        (cardClick)="handleCardClick($event)"
-        (cardDoubleClick)="handleCardDoubleClick($event)"
-        (dialogOpen)="dialogOpen($event)"
-        (dragStart)="handleDragStart($event)"
-        (dragStop)="handleDragStop($event)"
-    >
-    </ejs-kanban>
-  `, isInline: true, components: [{ type: i1.KanbanComponent, selector: "ejs-kanban", inputs: ["allowDragAndDrop", "allowKeyboard", "cardSettings", "columns", "constraintType", "cssClass", "dataSource", "dialogSettings", "enableHtmlSanitizer", "enablePersistence", "enableRtl", "enableTooltip", "externalDropId", "height", "keyField", "locale", "query", "showEmptyColumn", "sortSettings", "stackedHeaders", "swimlaneSettings", "tooltipTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "cardClick", "cardDoubleClick", "cardRendered", "created", "dataBinding", "dataBound", "dataSourceChanged", "dataStateChange", "dialogClose", "dialogOpen", "drag", "dragStart", "dragStop", "queryCellInfo"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'co-kanban',
-                    template: `
-    <ejs-kanban
-        #kanban
-        id="kanban"
-        [allowDragAndDrop]="allowDragAndDrop"
-        [allowKeyboard]="allowKeyboard"
-        [cardSettings]="cardSettings"
-        [enablePersistence]="enablePersistence"
-        [enableTooltip]="enableTooltip"
-        [keyField]="keyField"
-        [showEmptyColumn]="showEmptyColumn"
-        [swimlaneSettings]="swimlaneSettings"
-        [dataSource]="data"
-        (cardClick)="handleCardClick($event)"
-        (cardDoubleClick)="handleCardDoubleClick($event)"
-        (dialogOpen)="dialogOpen($event)"
-        (dragStart)="handleDragStart($event)"
-        (dragStop)="handleDragStop($event)"
-    >
-    </ejs-kanban>
-  `,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { kanban: [{
-                type: ViewChild,
-                args: ['kanban', { static: false }]
-            }], allowDragAndDrop: [{
-                type: Input
-            }], allowKeyboard: [{
-                type: Input
-            }], cardSettings: [{
-                type: Input
-            }], enablePersistence: [{
-                type: Input
-            }], enableTooltip: [{
-                type: Input
-            }], keyField: [{
-                type: Input
-            }], showEmptyColumn: [{
-                type: Input
-            }], swimlaneSettings: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], cardClickEvent: [{
-                type: Output
-            }], cardDoubleClickEvent: [{
-                type: Output
-            }], dragStartEvent: [{
-                type: Output
-            }], dragStopEvent: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ["class.co-kanban"]
-            }] } });
-
-class CoKanbanModule {
-}
-CoKanbanModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoKanbanModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanModule, declarations: [CoKanbanComponent], imports: [CommonModule,
-        KanbanModule], exports: [CoKanbanComponent] });
-CoKanbanModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanModule, imports: [[
-            CommonModule,
-            KanbanModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoKanbanModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        KanbanModule
-                    ],
-                    declarations: [
-                        CoKanbanComponent
-                    ],
-                    exports: [
-                        CoKanbanComponent
-                    ]
-                }]
-        }] });
-
-class CoScheduleComponent {
-    constructor() {
-        this.enablePersistence = false;
-        this.actionBegin = new EventEmitter();
-        this.actionComplete = new EventEmitter();
-        this.actionFailure = new EventEmitter();
-        this.showClass = true;
-    }
-    ngOnInit() {
-    }
-    onActionBegin(args) {
-        this.actionBegin.emit(args);
-    }
-    onActionComplete(args) {
-        this.actionComplete.emit(args);
-    }
-    onActionFailure(args) {
-        this.actionFailure.emit(args);
-    }
-}
-CoScheduleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoScheduleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoScheduleComponent, selector: "co-schedule", inputs: { selectedDate: "selectedDate", currentView: "currentView", eventSettings: "eventSettings", enablePersistence: "enablePersistence" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure" }, host: { properties: { "class.co-schedule": "this.showClass" } }, providers: [
-        DayService,
-        WeekService,
-        WorkWeekService,
-        MonthService,
-        AgendaService,
-        MonthAgendaService,
-        TimelineViewsService,
-        TimelineMonthService
-    ], viewQueries: [{ propertyName: "scheduleObj", first: true, predicate: ["ejsSchedule"], descendants: true, static: true }], ngImport: i0, template: `
-    <ejs-schedule
-        #ejsSchedule
-        [selectedDate]="selectedDate"
-        [currentView]="currentView"
-        [eventSettings]="eventSettings"
-        [enablePersistence]="enablePersistence"
-        (actionBegin)="onActionBegin($event)"
-        (actionComplete)="onActionComplete($event)"
-        (actionFailure)="onActionFailure($event)"
-    ><ng-content></ng-content>
-    </ejs-schedule>
-  `, isInline: true, components: [{ type: i1$1.ScheduleComponent, selector: "ejs-schedule", inputs: ["agendaDaysCount", "allowDragAndDrop", "allowInline", "allowKeyboardInteraction", "allowMultiCellSelection", "allowMultiDrag", "allowMultiRowSelection", "allowResizing", "allowSwiping", "calendarMode", "cellHeaderTemplate", "cellTemplate", "cssClass", "currentView", "dateFormat", "dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "editorTemplate", "enableAdaptiveUI", "enableAllDayScroll", "enableHtmlSanitizer", "enablePersistence", "enableRecurrenceValidation", "enableRtl", "endHour", "eventDragArea", "eventSettings", "firstDayOfWeek", "firstMonthOfYear", "group", "headerIndentTemplate", "headerRows", "height", "hideEmptyAgendaDays", "locale", "maxDate", "minDate", "monthHeaderTemplate", "monthsCount", "quickInfoOnSelectionEnd", "quickInfoTemplates", "readonly", "resourceHeaderTemplate", "resources", "rowAutoHeight", "selectedDate", "showHeaderBar", "showQuickInfo", "showTimeIndicator", "showWeekNumber", "showWeekend", "startHour", "timeFormat", "timeScale", "timezone", "timezoneDataSource", "views", "weekRule", "width", "workDays", "workHours"], outputs: ["actionBegin", "actionComplete", "actionFailure", "cellClick", "cellDoubleClick", "created", "dataBinding", "dataBound", "destroyed", "drag", "dragStart", "dragStop", "eventClick", "eventRendered", "hover", "moreEventsClick", "navigating", "popupClose", "popupOpen", "renderCell", "resizeStart", "resizeStop", "resizing", "select", "currentViewChange", "selectedDateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'co-schedule',
-                    template: `
-    <ejs-schedule
-        #ejsSchedule
-        [selectedDate]="selectedDate"
-        [currentView]="currentView"
-        [eventSettings]="eventSettings"
-        [enablePersistence]="enablePersistence"
-        (actionBegin)="onActionBegin($event)"
-        (actionComplete)="onActionComplete($event)"
-        (actionFailure)="onActionFailure($event)"
-    ><ng-content></ng-content>
-    </ejs-schedule>
-  `,
-                    providers: [
-                        DayService,
-                        WeekService,
-                        WorkWeekService,
-                        MonthService,
-                        AgendaService,
-                        MonthAgendaService,
-                        TimelineViewsService,
-                        TimelineMonthService
-                    ],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { scheduleObj: [{
-                type: ViewChild,
-                args: ['ejsSchedule', { static: true }]
-            }], selectedDate: [{
-                type: Input
-            }], currentView: [{
-                type: Input
-            }], eventSettings: [{
-                type: Input
-            }], enablePersistence: [{
-                type: Input
-            }], actionBegin: [{
-                type: Output
-            }], actionComplete: [{
-                type: Output
-            }], actionFailure: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ['class.co-schedule']
-            }] } });
-
-class CoScheduleModule {
-}
-CoScheduleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoScheduleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleModule, declarations: [CoScheduleComponent], imports: [CommonModule,
-        ScheduleModule], exports: [CoScheduleComponent] });
-CoScheduleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleModule, imports: [[
-            CommonModule,
-            ScheduleModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoScheduleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        CoScheduleComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        ScheduleModule
-                    ],
-                    exports: [
-                        CoScheduleComponent
-                    ]
-                }]
-        }] });
-
-var GridLines;
-(function (GridLines) {
-    GridLines["None"] = "None";
-    GridLines["Horizontal"] = "Horizontal";
-    GridLines["Vertical"] = "Vertical";
-    GridLines["Both"] = "Both";
-    GridLines["Default"] = "Default";
-})(GridLines || (GridLines = {}));
-
-class BaseGridComponent {
-    constructor(element) {
-        this.element = element;
-        this.gridLines = GridLines.None;
-        this.contextMenuItems = [];
-        this.sortingEnabled = false;
-        this.filteringEnabled = false;
-        this.pagingEnabled = false;
-        this.groupingEnabled = false;
-        this.reorderingEnabled = false;
-        this.rowDragAndDropEnabled = false;
-        this.resizingEnabled = false;
-        this.showColumnMenu = false;
-        this.pageSettings = {};
-    }
-    set maxNumberOfRows(value) {
-        if (value) {
-            this.pageSettings.pageSize = value;
-        }
-    }
-    set columns(value) {
-        this._columns = value;
-    }
-    get columns() {
-        return this._columns;
-    }
-}
-BaseGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BaseGridComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseGridComponent, inputs: { data: "data", gridLines: "gridLines", contextMenuItems: "contextMenuItems", frozenColumns: "frozenColumns", frozenRows: "frozenRows", sortingEnabled: "sortingEnabled", filteringEnabled: "filteringEnabled", pagingEnabled: "pagingEnabled", groupingEnabled: "groupingEnabled", reorderingEnabled: "reorderingEnabled", rowDragAndDropEnabled: "rowDragAndDropEnabled", rowDropSettings: "rowDropSettings", resizingEnabled: "resizingEnabled", showColumnMenu: "showColumnMenu", maxNumberOfRows: "maxNumberOfRows", columns: "columns" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseGridComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { grid: [{
-                type: ViewChild,
-                args: ['grid', { static: false }]
-            }], data: [{
-                type: Input
-            }], gridLines: [{
-                type: Input
-            }], contextMenuItems: [{
-                type: Input
-            }], frozenColumns: [{
-                type: Input
-            }], frozenRows: [{
-                type: Input
-            }], sortingEnabled: [{
-                type: Input
-            }], filteringEnabled: [{
-                type: Input
-            }], pagingEnabled: [{
-                type: Input
-            }], groupingEnabled: [{
-                type: Input
-            }], reorderingEnabled: [{
-                type: Input
-            }], rowDragAndDropEnabled: [{
-                type: Input
-            }], rowDropSettings: [{
-                type: Input
-            }], resizingEnabled: [{
-                type: Input
-            }], showColumnMenu: [{
-                type: Input
-            }], maxNumberOfRows: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }] } });
-
-class BaseToolbarGridComponent extends BaseGridComponent {
-    constructor() {
-        super(...arguments);
-        this._exportExcelEnabled = false;
-        this._exportPdfEnabled = false;
-        this._showColumnChooser = false;
-    }
-    set showColumnChooser(value) {
-        this._showColumnChooser = value;
-        this.updateToolbar("ColumnChooser", this._showColumnChooser);
-    }
-    get showColumnChooser() {
-        return this._showColumnChooser;
-    }
-    set exportExcelEnabled(value) {
-        this._exportExcelEnabled = value;
-        this.updateToolbar("ExcelExport", this._exportExcelEnabled);
-    }
-    get exportExcelEnabled() {
-        return this._exportExcelEnabled;
-    }
-    set exportPdfEnabled(value) {
-        this._exportPdfEnabled = value;
-        this.updateToolbar("PdfExport", this._exportPdfEnabled);
-    }
-    get exportPdfEnabled() {
-        return this._exportPdfEnabled;
-    }
-    toolbarClick(args) {
-        if (this.grid) {
-            if (args.item.id === 'grid_excelexport') {
-                this.grid.excelExport();
-            }
-            else if (args.item.id === 'grid_pdfexport') {
-                this.grid.pdfExport();
-            }
-        }
-    }
-    updateToolbar(option, add) {
-        if (add) {
-            if (!this.toolbarOptions) {
-                this.toolbarOptions = [];
-            }
-            this.toolbarOptions.push(option);
-        }
-        else {
-            if (this.toolbarOptions) {
-                let index = this.toolbarOptions.indexOf(option);
-                this.toolbarOptions.splice(index, 1);
-            }
-        }
-        if (this.toolbarOptions && this.toolbarOptions.length > 0) {
-            this.toolbarOptions = this.toolbarOptions.slice();
-        }
-        else {
-            this.toolbarOptions = undefined;
-        }
-    }
-}
-BaseToolbarGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseToolbarGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-BaseToolbarGridComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseToolbarGridComponent, inputs: { showColumnChooser: "showColumnChooser", exportExcelEnabled: "exportExcelEnabled", exportPdfEnabled: "exportPdfEnabled" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseToolbarGridComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { showColumnChooser: [{
-                type: Input
-            }], exportExcelEnabled: [{
-                type: Input
-            }], exportPdfEnabled: [{
-                type: Input
-            }] } });
-
-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) {
-            this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
-        }
-        else {
-            this.editSettings = {};
-        }
-        this.updateToolbar("Add", value);
-        this.updateToolbar("Edit", value);
-        this.updateToolbar("Delete", value);
-        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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseInlineEditGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-BaseInlineEditGridComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseInlineEditGridComponent, inputs: { inlineEdit: "inlineEdit" }, outputs: { rowSaved: "rowSaved", beforeRowDelete: "beforeRowDelete", rowDeleted: "rowDeleted" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseInlineEditGridComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { inlineEdit: [{
-                type: Input
-            }], rowSaved: [{
-                type: Output
-            }], beforeRowDelete: [{
-                type: Output
-            }], rowDeleted: [{
-                type: Output
-            }] } });
-
-const defaultColumn = `<div class="detail-wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><polygon points="34.55 26.18 34.55 37.49 12.44 37.49 12.44 15.38 24.68 15.38 25.59 14.48 24.05 12.94 10 12.94 10 39.94 36.99 39.94 36.99 25.88 35.92 24.81 34.55 26.18" fill="#484f60"/><polygon points="40 10.4 27.92 10.4 32 14.48 22.24 26.23 24.16 28.15 35.92 18.4 40 22.48 40 10.4" fill="#484f60"/></svg></div>`;
-class BaseSelectionGridComponent extends BaseInlineEditGridComponent {
-    constructor() {
-        super(...arguments);
-        this.includeDetailColumn = false;
-        this.rowsSelected = new EventEmitter();
-        this.rowDoubleClick = new EventEmitter();
-        this.detailColumnClick = new EventEmitter();
-        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) {
-        this.selectionOptions = { type: value ? "Multiple" : "Single" };
-    }
-    ngOnInit() {
-        if (this.includeDetailColumn) {
-            this.columns.unshift({
-                field: "", headerText: "", lockColumn: true, maxWidth: 30, width: 30,
-                allowFiltering: false, allowResizing: false, allowReordering: false, allowEditing: false, allowSearching: false,
-                showColumnMenu: false, showInColumnChooser: false,
-                template: this.detailColumnTemplate ? this.detailColumnTemplate : defaultColumn,
-                headerTemplate: this.detailColumnTemplate ? this.detailColumnTemplate : defaultColumn
-            });
-        }
-    }
-    handleRowSelected(rowData) {
-        if (this.grid) {
-            const rows = this.grid.getSelectedRecords();
-            this.rowsSelected.next(rows);
-        }
-    }
-    handleDoubleClick(clickData) {
-        this.rowDoubleClick.next(clickData.rowData);
-    }
-    handleRecordClick(clickData) {
-        if (clickData && this.includeDetailColumn && clickData.cellIndex === 0) {
-            this.detailColumnClick.next(clickData.rowData);
-        }
-    }
-    selectRow(index) {
-        if (this.grid) {
-            const rowIndexes = [];
-            rowIndexes.push(index);
-            this.grid.selectionModule.selectRows(rowIndexes);
-        }
-    }
-    contextMenuClick(args) {
-        this.contextMenuItemClick.next(args);
-    }
-    rowDragStartClick(args) {
-        this.rowDragStartEvent.next(args);
-    }
-    rowDropClick(args) {
-        this.rowDropEvent.next(args);
-    }
-    handleBeforeBatchDelete(args) {
-        this.beforeRowsDelete.next(args);
-    }
-    handleBatchDelete(rows) {
-        this.rowsDeleted.next(rows);
-    }
-}
-BaseSelectionGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseSelectionGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-BaseSelectionGridComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseSelectionGridComponent, inputs: { multipleSelect: "multipleSelect", includeDetailColumn: "includeDetailColumn", detailColumnTemplate: "detailColumnTemplate" }, outputs: { rowsSelected: "rowsSelected", rowDoubleClick: "rowDoubleClick", detailColumnClick: "detailColumnClick", contextMenuItemClick: "contextMenuItemClick", rowDragStartEvent: "rowDragStartEvent", rowDropEvent: "rowDropEvent", beforeRowsDelete: "beforeRowsDelete", rowsDeleted: "rowsDeleted" }, host: { properties: { "class.detail-column": "this.includeDetailColumn" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BaseSelectionGridComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { multipleSelect: [{
-                type: Input
-            }], includeDetailColumn: [{
-                type: HostBinding,
-                args: ["class.detail-column"]
-            }, {
-                type: Input
-            }], detailColumnTemplate: [{
-                type: Input
-            }], rowsSelected: [{
-                type: Output
-            }], rowDoubleClick: [{
-                type: Output
-            }], detailColumnClick: [{
-                type: Output
-            }], contextMenuItemClick: [{
-                type: Output
-            }], rowDragStartEvent: [{
-                type: Output
-            }], rowDropEvent: [{
-                type: Output
-            }], beforeRowsDelete: [{
-                type: Output
-            }], rowsDeleted: [{
-                type: Output
-            }] } });
-
-class CoGridComponent extends BaseSelectionGridComponent {
-    showClass() {
-        return true;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-CoGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CoGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoGridComponent, selector: "co-grid", host: { properties: { "class.co-grid": "this.showClass" } }, providers: [
-        RowDDService
-    ], usesInheritance: true, ngImport: i0, 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)"
-                (beforeBatchDelete)="handleBeforeBatchDelete($event)"
-                (batchDelete)="handleBatchDelete($event)"
-      >
-      </ejs-grid>
-    `, isInline: true, components: [{ type: i1$2.GridComponent, selector: "ejs-grid", inputs: ["aggregates", "allowExcelExport", "allowFiltering", "allowGrouping", "allowKeyboard", "allowMultiSorting", "allowPaging", "allowPdfExport", "allowReordering", "allowResizing", "allowRowDragAndDrop", "allowSelection", "allowSorting", "allowTextWrap", "autoFit", "childGrid", "clipMode", "columnChooserSettings", "columnMenuItems", "columnQueryMode", "columns", "contextMenuItems", "cssClass", "currencyCode", "currentAction", "currentViewData", "dataSource", "detailTemplate", "editSettings", "ej2StatePersistenceVersion", "enableAdaptiveUI", "enableAltRow", "enableAutoFill", "enableColumnVirtualization", "enableHeaderFocus", "enableHover", "enableHtmlSanitizer", "enableImmutableMode", "enableInfiniteScrolling", "enablePersistence", "enableRtl", "enableStickyHeader", "enableVirtualMaskRow", "enableVirtualization", "filterSettings", "frozenColumns", "frozenRows", "gridLines", "groupSettings", "height", "hierarchyPrintMode", "infiniteScrollSettings", "loadingIndicator", "locale", "pageSettings", "pagerTemplate", "parentDetails", "printMode", "query", "queryString", "resizeSettings", "rowDropSettings", "rowHeight", "rowRenderingMode", "rowTemplate", "searchSettings", "selectedRowIndex", "selectionSettings", "showColumnChooser", "showColumnMenu", "showHider", "sortSettings", "textWrapSettings", "toolbar", "toolbarTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "batchAdd", "batchCancel", "batchDelete", "beforeAutoFill", "beforeBatchAdd", "beforeBatchDelete", "beforeBatchSave", "beforeCopy", "beforeDataBound", "beforeExcelExport", "beforeOpenAdaptiveDialog", "beforeOpenColumnChooser", "beforePaste", "beforePdfExport", "beforePrint", "beginEdit", "cellDeselected", "cellDeselecting", "cellEdit", "cellSave", "cellSaved", "cellSelected", "cellSelecting", "checkBoxChange", "columnDataStateChange", "columnDeselected", "columnDeselecting", "columnDrag", "columnDragStart", "columnDrop", "columnMenuClick", "columnMenuOpen", "columnSelected", "columnSelecting", "commandClick", "contextMenuClick", "contextMenuOpen", "created", "dataBound", "dataSourceChanged", "dataStateChange", "destroyed", "detailDataBound", "excelAggregateQueryCellInfo", "excelExportComplete", "excelHeaderQueryCellInfo", "excelQueryCellInfo", "exportDetailDataBound", "exportGroupCaption", "headerCellInfo", "keyPressed", "lazyLoadGroupCollapse", "lazyLoadGroupExpand", "load", "pdfAggregateQueryCellInfo", "pdfExportComplete", "pdfHeaderQueryCellInfo", "pdfQueryCellInfo", "printComplete", "queryCellInfo", "recordClick", "recordDoubleClick", "resizeStart", "resizeStop", "resizing", "rowDataBound", "rowDeselected", "rowDeselecting", "rowDrag", "rowDragStart", "rowDragStartHelper", "rowDrop", "rowSelected", "rowSelecting", "toolbarClick", "dataSourceChange"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: 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)"
-                (beforeBatchDelete)="handleBeforeBatchDelete($event)"
-                (batchDelete)="handleBatchDelete($event)"
-      >
-      </ejs-grid>
-    `,
-                    providers: [
-                        RowDDService
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], propDecorators: { showClass: [{
-                type: HostBinding,
-                args: ['class.co-grid']
-            }] } });
-
-class CoGridModule {
-}
-CoGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoGridModule, declarations: [CoGridComponent], imports: [CommonModule,
-        FormsModule,
-        GridModule], exports: [CoGridComponent] });
-CoGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoGridModule, providers: [
-        PageService,
-        SortService,
-        FilterService,
-        GroupService,
-        ReorderService,
-        ResizeService,
-        ExcelExportService,
-        PdfExportService,
-        EditService,
-        ToolbarService,
-        ColumnChooserService,
-        ColumnMenuService,
-        ContextMenuService
-    ], imports: [[
-            CommonModule,
-            FormsModule,
-            GridModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        GridModule
-                    ],
-                    declarations: [CoGridComponent],
-                    exports: [CoGridComponent],
-                    providers: [
-                        PageService,
-                        SortService,
-                        FilterService,
-                        GroupService,
-                        ReorderService,
-                        ResizeService,
-                        ExcelExportService,
-                        PdfExportService,
-                        EditService,
-                        ToolbarService,
-                        ColumnChooserService,
-                        ColumnMenuService,
-                        ContextMenuService
-                    ]
-                }]
-        }] });
-
-class CoPivotComponent {
-    constructor() {
-        this.showGroupingBar = false;
-        this.allowGrouping = false;
-        this.enablePersistence = false;
-        this.showFieldList = false;
-        this.showToolbar = false;
-        this.allowExcelExport = false;
-        this.allowPdfExport = false;
-        this.allowConditionalFormatting = true;
-        this.allowNumberFormatting = true;
-        this.allowCalculatedField = false;
-        this.height = "100%";
-        this.saveReportClick = new EventEmitter();
-        this.loadReportClick = new EventEmitter();
-        this.fetchReportClick = new EventEmitter();
-        this.renameReportClick = new EventEmitter();
-        this.removeReportClick = new EventEmitter();
-        this.newReportClick = new EventEmitter();
-        this.beforeToolbarRenderClick = new EventEmitter();
-        this.enginePopulated = new EventEmitter();
-    }
-    showClass() {
-        return true;
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.pivot.refresh();
-            this.pivot.refreshData();
-            this.pivot.layoutRefresh();
-        }, 3000);
-    }
-    saveReport(args) {
-        if (args) {
-            this.saveReportClick.next(args);
-        }
-    }
-    loadReport(args) {
-        if (args) {
-            this.loadReportClick.next(args);
-        }
-    }
-    fetchReport(args) {
-        if (args) {
-            this.fetchReportClick.next(args);
-        }
-    }
-    renameReport(args) {
-        if (args) {
-            this.renameReportClick.next(args);
-        }
-    }
-    removeReport(args) {
-        if (args) {
-            this.removeReportClick.next(args);
-        }
-    }
-    newReport() {
-        this.newReportClick.next();
-    }
-    beforeToolbarRender(args) {
-        if (args) {
-            this.beforeToolbarRenderClick.next(args);
-        }
-    }
-    hanldeEnginePopulated(args) {
-        if (args) {
-            this.enginePopulated.next(args);
-        }
-    }
-}
-CoPivotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoPivotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CoPivotComponent, selector: "co-pivot", inputs: { dataSourceSettings: "dataSourceSettings", gridSettings: "gridSettings", toolbarOptions: "toolbarOptions", showGroupingBar: "showGroupingBar", allowGrouping: "allowGrouping", enablePersistence: "enablePersistence", showFieldList: "showFieldList", showToolbar: "showToolbar", allowExcelExport: "allowExcelExport", allowPdfExport: "allowPdfExport", allowConditionalFormatting: "allowConditionalFormatting", allowNumberFormatting: "allowNumberFormatting", allowCalculatedField: "allowCalculatedField", height: "height" }, outputs: { saveReportClick: "saveReportClick", loadReportClick: "loadReportClick", fetchReportClick: "fetchReportClick", renameReportClick: "renameReportClick", removeReportClick: "removeReportClick", newReportClick: "newReportClick", beforeToolbarRenderClick: "beforeToolbarRenderClick", enginePopulated: "enginePopulated" }, host: { properties: { "class.co-pivot": "this.showClass" } }, providers: [GroupingBarService, GroupingService, ToolbarService$1, ConditionalFormattingService, FieldListService, NumberFormattingService], viewQueries: [{ propertyName: "pivot", first: true, predicate: ["pivot"], descendants: true }], ngImport: i0, template: `
-    <ejs-pivotview
-        #pivot
-        id="Pivot"
-        [dataSourceSettings]="dataSourceSettings"
-        [gridSettings]="gridSettings"
-        [showGroupingBar]="showGroupingBar"
-        [allowGrouping]="allowGrouping"
-        [enablePersistence]="enablePersistence"
-        [showFieldList]="showFieldList"
-        [showToolbar]="showToolbar"
-        [toolbar]="toolbarOptions"
-        [allowExcelExport]="allowExcelExport"
-        [allowConditionalFormatting]="allowConditionalFormatting"
-        [allowNumberFormatting]="allowNumberFormatting"
-        [allowPdfExport]="allowPdfExport"
-        [allowCalculatedField]="allowCalculatedField"
-        [height]="height"
-        (saveReport)="saveReport($event)"
-        (loadReport)="loadReport($event)"
-        (fetchReport)="fetchReport($event)"
-        (renameReport)="renameReport($event)"
-        (removeReport)="removeReport($event)"
-        (newReport)="newReport()"
-        (toolbarRender)="beforeToolbarRender($event)"
-        (enginePopulated)="hanldeEnginePopulated($event)"
-    >
-    </ejs-pivotview>
-  `, isInline: true, components: [{ type: i1$3.PivotViewComponent, selector: "ejs-pivotview", inputs: ["aggregateTypes", "allowCalculatedField", "allowConditionalFormatting", "allowDataCompression", "allowDeferLayoutUpdate", "allowDrillThrough", "allowExcelExport", "allowGrouping", "allowNumberFormatting", "allowPdfExport", "cellTemplate", "chartSettings", "chartTypes", "cssClass", "dataSourceSettings", "displayOption", "editSettings", "enableFieldSearching", "enableHtmlSanitizer", "enablePaging", "enablePersistence", "enableRtl", "enableValueSorting", "enableVirtualization", "exportAllPages", "gridSettings", "groupingBarSettings", "height", "hyperlinkSettings", "loadOnDemandInMemberEditor", "locale", "maxNodeLimitInMemberEditor", "maxRowsInDrillThrough", "pageSettings", "pagerSettings", "pivotValues", "showFieldList", "showGroupingBar", "showToolbar", "showTooltip", "showValuesButton", "spinnerTemplate", "toolbar", "toolbarTemplate", "tooltipTemplate", "width"], outputs: ["actionBegin", "actionComplete", "actionFailure", "aggregateCellInfo", "aggregateMenuOpen", "beforeExport", "beforeServiceInvoke", "beginDrillThrough", "calculatedFieldCreate", "cellClick", "cellSelected", "cellSelecting", "chartSeriesCreated", "conditionalFormatting", "created", "dataBound", "destroyed", "drill", "drillThrough", "editCompleted", "enginePopulated", "enginePopulating", "exportComplete", "fetchReport", "fieldDragStart", "fieldDrop", "fieldListRefreshed", "fieldRemove", "hyperlinkCellClick", "load", "loadReport", "memberEditorOpen", "memberFiltering", "newReport", "numberFormatting", "onFieldDropped", "onHeadersSort", "onPdfCellRender", "removeReport", "renameReport", "saveReport", "toolbarClick", "toolbarRender"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'co-pivot',
-                    template: `
-    <ejs-pivotview
-        #pivot
-        id="Pivot"
-        [dataSourceSettings]="dataSourceSettings"
-        [gridSettings]="gridSettings"
-        [showGroupingBar]="showGroupingBar"
-        [allowGrouping]="allowGrouping"
-        [enablePersistence]="enablePersistence"
-        [showFieldList]="showFieldList"
-        [showToolbar]="showToolbar"
-        [toolbar]="toolbarOptions"
-        [allowExcelExport]="allowExcelExport"
-        [allowConditionalFormatting]="allowConditionalFormatting"
-        [allowNumberFormatting]="allowNumberFormatting"
-        [allowPdfExport]="allowPdfExport"
-        [allowCalculatedField]="allowCalculatedField"
-        [height]="height"
-        (saveReport)="saveReport($event)"
-        (loadReport)="loadReport($event)"
-        (fetchReport)="fetchReport($event)"
-        (renameReport)="renameReport($event)"
-        (removeReport)="removeReport($event)"
-        (newReport)="newReport()"
-        (toolbarRender)="beforeToolbarRender($event)"
-        (enginePopulated)="hanldeEnginePopulated($event)"
-    >
-    </ejs-pivotview>
-  `,
-                    providers: [GroupingBarService, GroupingService, ToolbarService$1, ConditionalFormattingService, FieldListService, NumberFormattingService],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { pivot: [{
-                type: ViewChild,
-                args: ['pivot', { static: false }]
-            }], dataSourceSettings: [{
-                type: Input
-            }], gridSettings: [{
-                type: Input
-            }], toolbarOptions: [{
-                type: Input
-            }], showGroupingBar: [{
-                type: Input
-            }], allowGrouping: [{
-                type: Input
-            }], enablePersistence: [{
-                type: Input
-            }], showFieldList: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], allowExcelExport: [{
-                type: Input
-            }], allowPdfExport: [{
-                type: Input
-            }], allowConditionalFormatting: [{
-                type: Input
-            }], allowNumberFormatting: [{
-                type: Input
-            }], allowCalculatedField: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], saveReportClick: [{
-                type: Output
-            }], loadReportClick: [{
-                type: Output
-            }], fetchReportClick: [{
-                type: Output
-            }], renameReportClick: [{
-                type: Output
-            }], removeReportClick: [{
-                type: Output
-            }], newReportClick: [{
-                type: Output
-            }], beforeToolbarRenderClick: [{
-                type: Output
-            }], enginePopulated: [{
-                type: Output
-            }], showClass: [{
-                type: HostBinding,
-                args: ["class.co-pivot"]
-            }] } });
-
-class CoPivotModule {
-}
-CoPivotModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CoPivotModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotModule, declarations: [CoPivotComponent], imports: [CommonModule,
-        PivotViewModule], exports: [CoPivotComponent] });
-CoPivotModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotModule, imports: [[
-            CommonModule,
-            PivotViewModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CoPivotModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        PivotViewModule
-                    ],
-                    declarations: [
-                        CoPivotComponent
-                    ],
-                    exports: [
-                        CoPivotComponent
-                    ]
-                }]
-        }] });
+import * as i1 from 'ngx-echarts';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 class StackedLineChartComponent {
     constructor() {
         this.chartData = [];
         this.chartLegend = [];
         this.chartXAxis = [];
-        this.chartHeight = 600;
+        this.chartHeight = "auto";
+        this.chartWidth = "auto";
         this.chartOptions = {
             title: {},
             tooltip: {
@@ -1013,21 +39,6 @@ class StackedLineChartComponent {
         return true;
     }
     ngOnInit() {
-        echarts.use([
-            TitleComponent,
-            ToolboxComponent,
-            TooltipComponent,
-            GridComponent,
-            LegendComponent,
-            LineChart,
-            CanvasRenderer,
-            UniversalTransition
-        ]);
-        let chartDom = document.getElementById('chart-container');
-        let myChart = echarts.init(chartDom, undefined, {
-            width: this.chartWidth,
-            height: this.chartHeight
-        });
         this.chartOptions.title['text'] = this.chartName;
         this.chartOptions.series = this.chartData;
         this.chartOptions.xAxis = {
@@ -1036,26 +47,27 @@ class StackedLineChartComponent {
             data: this.chartXAxis
         };
         this.chartOptions.legend['data'] = this.chartLegend;
-        this.chartOptions && myChart.setOption(this.chartOptions);
     }
 }
 StackedLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 StackedLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StackedLineChartComponent, selector: "co-stacked-line-chart", inputs: { chartName: "chartName", chartData: "chartData", chartLegend: "chartLegend", chartXAxis: "chartXAxis", chartHeight: "chartHeight", chartWidth: "chartWidth", chartOptions: "chartOptions" }, host: { properties: { "class.co-co-stacked-line-chart": "this.showClass" } }, ngImport: i0, template: `
 
-    <div id="chart-container" class="component-wrapper">
-    </div>
+      <div echarts [options]="chartOptions" [initOpts]="{
+        width: chartWidth,
+        height: chartHeight}" class="chart"></div>
 
-    `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, directives: [{ type: i1.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["autoResize", "loadingType", "options", "theme", "loading", "initOpts", "merge", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "co-stacked-line-chart",
                     template: `
 
-    <div id="chart-container" class="component-wrapper">
-    </div>
+      <div echarts [options]="chartOptions" [initOpts]="{
+        width: chartWidth,
+        height: chartHeight}" class="chart"></div>
 
-    `,
+  `,
                     encapsulation: ViewEncapsulation.None
                 }]
         }], propDecorators: { showClass: [{
@@ -1080,15 +92,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 class StackedLineChartModule {
 }
 StackedLineChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StackedLineChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartModule, declarations: [StackedLineChartComponent], imports: [CommonModule], exports: [StackedLineChartComponent] });
+StackedLineChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartModule, declarations: [StackedLineChartComponent], imports: [CommonModule, i1.NgxEchartsModule], exports: [StackedLineChartComponent] });
 StackedLineChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartModule, imports: [[
-            CommonModule
+            CommonModule,
+            NgxEchartsModule.forRoot({
+                echarts: () => import('echarts')
+            })
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StackedLineChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        NgxEchartsModule.forRoot({
+                            echarts: () => import('echarts')
+                        })
                     ],
                     declarations: [
                         StackedLineChartComponent
@@ -1207,5 +225,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, ExtendedComponentsTranslationModule, ExtendedComponentsTranslationService, StackedLineChartComponent, StackedLineChartModule };
+export { ExtendedComponentsTranslationModule, ExtendedComponentsTranslationService, StackedLineChartComponent, StackedLineChartModule };
 //# sourceMappingURL=colijnit-extendedcomponents.js.map