@syncfusion/ej2-angular-spreadsheet 31.2.18-ngcc → 32.1.19-ngcc

package/dist/ej2-angular-spreadsheet.umd.js

@@ -1,969 +1,960 @@
-/*!
-*  filename: ej2-angular-spreadsheet.umd.js
-*  version : 31.2.18
-*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
-*  Use of this code is subject to the terms of our license.
-*  A copy of the current license can be obtained at any time by e-mailing
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@syncfusion/ej2-angular-base'), require('@syncfusion/ej2-spreadsheet'), require('@angular/common')) :
 	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@syncfusion/ej2-angular-base', '@syncfusion/ej2-spreadsheet', '@angular/common'], factory) :
 	(factory((global['ej2-angular-spreadsheet'] = {}),global.ng.core,global.ej2.angular.base,global.ej2.spreadsheet,global.ng.common));
 }(this, (function (exports,core,ej2AngularBase,ej2Spreadsheet,common) { 'use strict';
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var input = ['height', 'id', 'left', 'src', 'top', 'width'];
-var outputs = [];
-var ImageDirective = /** @class */ (function (_super) {
-    __extends(ImageDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ImageDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs);
-        _this.directivePropList = input;
-        return _this;
-    }
-    return ImageDirective;
-}(ej2AngularBase.ComplexBase));
-ImageDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-images>e-image',
-                inputs: input,
-                outputs: outputs,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ImageDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Image Array Directive
- */
-var ImagesDirective = /** @class */ (function (_super) {
-    __extends(ImagesDirective, _super);
-    function ImagesDirective() {
-        return _super.call(this, 'image') || this;
-    }
-    return ImagesDirective;
-}(ej2AngularBase.ArrayBase));
-ImagesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-cell>e-images',
-                queries: {
-                    children: new core.ContentChildren(ImageDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ImagesDirective.ctorParameters = function () { return []; };
-var input$1 = ['dataLabelSettings', 'height', 'id', 'isSeriesInRows', 'legendSettings', 'markerSettings', 'primaryXAxis', 'primaryYAxis', 'range', 'theme', 'title', 'type', 'width'];
-var outputs$1 = [];
-var ChartDirective = /** @class */ (function (_super) {
-    __extends(ChartDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ChartDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$1);
-        _this.directivePropList = input$1;
-        return _this;
-    }
-    return ChartDirective;
-}(ej2AngularBase.ComplexBase));
-ChartDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-charts>e-chart',
-                inputs: input$1,
-                outputs: outputs$1,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ChartDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Chart Array Directive
- */
-var ChartsDirective = /** @class */ (function (_super) {
-    __extends(ChartsDirective, _super);
-    function ChartsDirective() {
-        return _super.call(this, 'chart') || this;
-    }
-    return ChartsDirective;
-}(ej2AngularBase.ArrayBase));
-ChartsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-cell>e-charts',
-                queries: {
-                    children: new core.ContentChildren(ChartDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ChartsDirective.ctorParameters = function () { return []; };
-var input$2 = ['chart', 'colSpan', 'format', 'formula', 'hyperlink', 'image', 'index', 'isLocked', 'isReadOnly', 'notes', 'rowSpan', 'style', 'validation', 'value', 'wrap'];
-var outputs$2 = [];
-/**
- * `e-cell` directive represent a cell of the Angular Spreadsheet.
- * It must be contained in a `e-row` directive.
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet>
- *    <e-rows>
- *    <e-row>
- *    <e-cells>
- *    <e-cell value='A1'></e-cell>
- *    </e-cells>
- *    </e-row>
- *    </e-rows>
- *    </e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var CellDirective = /** @class */ (function (_super) {
-    __extends(CellDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function CellDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['image', 'chart'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$2);
-        _this.directivePropList = input$2;
-        return _this;
-    }
-    return CellDirective;
-}(ej2AngularBase.ComplexBase));
-CellDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-cells>e-cell',
-                inputs: input$2,
-                outputs: outputs$2,
-                queries: {
-                    childImage: new core.ContentChild(ImagesDirective),
-                    childChart: new core.ContentChild(ChartsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-CellDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Cell Array Directive
- */
-var CellsDirective = /** @class */ (function (_super) {
-    __extends(CellsDirective, _super);
-    function CellsDirective() {
-        return _super.call(this, 'cells') || this;
-    }
-    return CellsDirective;
-}(ej2AngularBase.ArrayBase));
-CellsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-row>e-cells',
-                queries: {
-                    children: new core.ContentChildren(CellDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-CellsDirective.ctorParameters = function () { return []; };
-var input$3 = ['cells', 'customHeight', 'format', 'height', 'hidden', 'index', 'isReadOnly'];
-var outputs$3 = [];
-/**
- * `e-row` directive represent a row of the Angular Spreadsheet.
- * It must be contained in a `e-sheet` directive.
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet>
- *    <e-rows>
- *    <e-row></e-row>
- *    </e-rows>
- *    </e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var RowDirective = /** @class */ (function (_super) {
-    __extends(RowDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function RowDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['cells'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$3);
-        _this.directivePropList = input$3;
-        return _this;
-    }
-    return RowDirective;
-}(ej2AngularBase.ComplexBase));
-RowDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-rows>e-row',
-                inputs: input$3,
-                outputs: outputs$3,
-                queries: {
-                    childCells: new core.ContentChild(CellsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-RowDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Row Array Directive
- */
-var RowsDirective = /** @class */ (function (_super) {
-    __extends(RowsDirective, _super);
-    function RowsDirective() {
-        return _super.call(this, 'rows') || this;
-    }
-    return RowsDirective;
-}(ej2AngularBase.ArrayBase));
-RowsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-sheet>e-rows',
-                queries: {
-                    children: new core.ContentChildren(RowDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-RowsDirective.ctorParameters = function () { return []; };
-var input$4 = ['customWidth', 'format', 'hidden', 'index', 'isLocked', 'isReadOnly', 'validation', 'width'];
-var outputs$4 = [];
-/**
- * `e-column` directive represent a column of the Angular Spreadsheet.
- * It must be contained in a `e-sheet` directive.
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet>
- *    <e-columns>
- *    <e-column width='100'></e-column>
- *    </e-columns>
- *    </e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var ColumnDirective = /** @class */ (function (_super) {
-    __extends(ColumnDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ColumnDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$4);
-        _this.directivePropList = input$4;
-        return _this;
-    }
-    return ColumnDirective;
-}(ej2AngularBase.ComplexBase));
-ColumnDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-columns>e-column',
-                inputs: input$4,
-                outputs: outputs$4,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ColumnDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Column Array Directive
- */
-var ColumnsDirective = /** @class */ (function (_super) {
-    __extends(ColumnsDirective, _super);
-    function ColumnsDirective() {
-        return _super.call(this, 'columns') || this;
-    }
-    return ColumnsDirective;
-}(ej2AngularBase.ArrayBase));
-ColumnsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-sheet>e-columns',
-                queries: {
-                    children: new core.ContentChildren(ColumnDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ColumnsDirective.ctorParameters = function () { return []; };
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var input$5 = ['address', 'dataSource', 'fieldsOrder', 'query', 'showFieldAsHeader', 'startCell', 'template'];
-var outputs$5 = [];
-/**
- * `e-range` directive represent a range of the Angular Spreadsheet.
- * It must be contained in a `e-sheet` directive.
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet>
- *    <e-ranges>
- *    <e-range [dataSource]='data'></e-range>
- *    </e-ranges>
- *    </e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var RangeDirective = /** @class */ (function (_super) {
-    __extends(RangeDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function RangeDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$5);
-        _this.directivePropList = input$5;
-        return _this;
-    }
-    return RangeDirective;
-}(ej2AngularBase.ComplexBase));
-RangeDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-ranges>e-range',
-                inputs: input$5,
-                outputs: outputs$5,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-RangeDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-RangeDirective.propDecorators = {
-    'template': [{ type: core.ContentChild, args: ['template',] },],
-};
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], RangeDirective.prototype, "template", void 0);
-/**
- * Range Array Directive
- */
-var RangesDirective = /** @class */ (function (_super) {
-    __extends(RangesDirective, _super);
-    function RangesDirective() {
-        return _super.call(this, 'ranges') || this;
-    }
-    return RangesDirective;
-}(ej2AngularBase.ArrayBase));
-RangesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-sheet>e-ranges',
-                queries: {
-                    children: new core.ContentChildren(RangeDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-RangesDirective.ctorParameters = function () { return []; };
-var input$6 = ['cFColor', 'format', 'range', 'type', 'value'];
-var outputs$6 = [];
-/**
- * `e-conditionalformat` directive represent a conditionalformat of the Angular Spreadsheet.
- * It must be contained in a `e-sheet` directive.
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet>
- *    <e-conditionalformats>
- *    <e-conditionalformat></e-conditionalformat>
- *    </e-conditionalformats>
- *    </e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var ConditionalFormatDirective = /** @class */ (function (_super) {
-    __extends(ConditionalFormatDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ConditionalFormatDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$6);
-        _this.directivePropList = input$6;
-        return _this;
-    }
-    return ConditionalFormatDirective;
-}(ej2AngularBase.ComplexBase));
-ConditionalFormatDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-conditionalformats>e-conditionalformat',
-                inputs: input$6,
-                outputs: outputs$6,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ConditionalFormatDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * ConditionalFormat Array Directive
- */
-var ConditionalFormatsDirective = /** @class */ (function (_super) {
-    __extends(ConditionalFormatsDirective, _super);
-    function ConditionalFormatsDirective() {
-        return _super.call(this, 'conditionalformats') || this;
-    }
-    return ConditionalFormatsDirective;
-}(ej2AngularBase.ArrayBase));
-ConditionalFormatsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-sheet>e-conditionalformats',
-                queries: {
-                    children: new core.ContentChildren(ConditionalFormatDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ConditionalFormatsDirective.ctorParameters = function () { return []; };
-var input$7 = ['activeCell', 'colCount', 'columns', 'conditionalFormats', 'frozenColumns', 'frozenRows', 'index', 'isProtected', 'name', 'paneTopLeftCell', 'password', 'protectSettings', 'ranges', 'rowCount', 'rows', 'selectedRange', 'showGridLines', 'showHeaders', 'standardHeight', 'state', 'topLeftCell', 'usedRange'];
-var outputs$7 = [];
-/**
- * `e-sheet` directive represent a sheet of the Angular Spreadsheet.
- * It must be contained in a Spreadsheet component(`ejs-spreadsheet`).
- * ```html
- * <ejs-spreadsheet>
- *   <e-sheets>
- *    <e-sheet></e-sheet>
- *    <e-sheet></e-sheet>
- *   </e-sheets>
- * </ejs-spreadsheet>
- * ```
- */
-var SheetDirective = /** @class */ (function (_super) {
-    __extends(SheetDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function SheetDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['rows', 'columns', 'ranges', 'conditionalFormats'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$7);
-        _this.directivePropList = input$7;
-        return _this;
-    }
-    return SheetDirective;
-}(ej2AngularBase.ComplexBase));
-SheetDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-sheets>e-sheet',
-                inputs: input$7,
-                outputs: outputs$7,
-                queries: {
-                    childRows: new core.ContentChild(RowsDirective),
-                    childColumns: new core.ContentChild(ColumnsDirective),
-                    childRanges: new core.ContentChild(RangesDirective),
-                    childConditionalFormats: new core.ContentChild(ConditionalFormatsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-SheetDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Sheet Array Directive
- */
-var SheetsDirective = /** @class */ (function (_super) {
-    __extends(SheetsDirective, _super);
-    function SheetsDirective() {
-        return _super.call(this, 'sheets') || this;
-    }
-    return SheetsDirective;
-}(ej2AngularBase.ArrayBase));
-SheetsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-spreadsheet>e-sheets',
-                queries: {
-                    children: new core.ContentChildren(SheetDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-SheetsDirective.ctorParameters = function () { return []; };
-var input$8 = ['comment', 'name', 'refersTo', 'scope'];
-var outputs$8 = [];
-/**
- * `e-definedname` directive represent a defined name of the Angular Spreadsheet.
- * It must be contained in a Spreadsheet component(`ejs-spreadsheet`).
- * ```html
- * <ejs-spreadsheet>
- *   <e-definednames>
- *    <e-definedname></e-definedname>
- *    <e-definedname></e-definedname>
- *   </e-definednames>
- * </ejs-spreadsheet>
- * ```
- */
-var DefinedNameDirective = /** @class */ (function (_super) {
-    __extends(DefinedNameDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function DefinedNameDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$8);
-        _this.directivePropList = input$8;
-        return _this;
-    }
-    return DefinedNameDirective;
-}(ej2AngularBase.ComplexBase));
-DefinedNameDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-definednames>e-definedname',
-                inputs: input$8,
-                outputs: outputs$8,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-DefinedNameDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * DefinedName Array Directive
- */
-var DefinedNamesDirective = /** @class */ (function (_super) {
-    __extends(DefinedNamesDirective, _super);
-    function DefinedNamesDirective() {
-        return _super.call(this, 'definednames') || this;
-    }
-    return DefinedNamesDirective;
-}(ej2AngularBase.ArrayBase));
-DefinedNamesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-spreadsheet>e-definednames',
-                queries: {
-                    children: new core.ContentChildren(DefinedNameDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-DefinedNamesDirective.ctorParameters = function () { return []; };
-var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$1 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var inputs = ['activeSheetIndex', 'allowAutoFill', 'allowCellFormatting', 'allowChart', 'allowConditionalFormat', 'allowDataValidation', 'allowDelete', 'allowEditing', 'allowFiltering', 'allowFindAndReplace', 'allowFreezePane', 'allowHyperlink', 'allowImage', 'allowInsert', 'allowMerge', 'allowNumberFormatting', 'allowOpen', 'allowPrint', 'allowResizing', 'allowSave', 'allowScrolling', 'allowSorting', 'allowUndoRedo', 'allowWrap', 'autoFillSettings', 'calculationMode', 'cellStyle', 'cssClass', 'currencyCode', 'definedNames', 'enableClipboard', 'enableContextMenu', 'enableKeyboardNavigation', 'enableKeyboardShortcut', 'enableNotes', 'enablePersistence', 'enableRtl', 'height', 'isProtected', 'listSeparator', 'locale', 'openSettings', 'openUrl', 'password', 'saveUrl', 'scrollSettings', 'selectionSettings', 'sheets', 'showAggregate', 'showFormulaBar', 'showRibbon', 'showSheetTabs', 'width'];
-var outputs$9 = ['actionBegin', 'actionComplete', 'afterHyperlinkClick', 'afterHyperlinkCreate', 'beforeCellFormat', 'beforeCellRender', 'beforeCellSave', 'beforeCellUpdate', 'beforeConditionalFormat', 'beforeDataBound', 'beforeHyperlinkClick', 'beforeHyperlinkCreate', 'beforeOpen', 'beforeSave', 'beforeSelect', 'beforeSort', 'cellEdit', 'cellEdited', 'cellEditing', 'cellSave', 'contextMenuBeforeClose', 'contextMenuBeforeOpen', 'contextMenuItemSelect', 'created', 'dataBound', 'dataSourceChanged', 'dialogBeforeOpen', 'fileMenuBeforeClose', 'fileMenuBeforeOpen', 'fileMenuItemSelect', 'openComplete', 'openFailure', 'queryCellInfo', 'saveComplete', 'select', 'sortComplete'];
-var twoWays = [''];
-/**
- * `ejs-spreadsheet` represents the Angular Spreadsheet Component.
- * ```html
- * <ejs-spreadsheet></ejs-spreadsheet>
- * ```
- */
-exports.SpreadsheetComponent = /** @class */ (function (_super) {
-    __extends(SpreadsheetComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function SpreadsheetComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.tags = ['sheets', 'definedNames'];
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        try {
-            var mod = _this.injector.get('SpreadsheetClipboard');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_a) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetEdit');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_b) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetKeyboardNavigation');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_c) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetKeyboardShortcut');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_d) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetSelection');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_e) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetContextMenu');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_f) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetFormulaBar');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_g) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetRibbon');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_h) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetSave');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_j) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetOpen');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_k) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetSheetTabs');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_l) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetDataBind');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_m) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetCellFormat');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_o) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetNumberFormat');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_p) { }
-        try {
-            var mod = _this.injector.get('SpreadsheetFormula');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_q) { }
-        _this.registerEvents(outputs$9);
-        _this.addTwoWay.call(_this, twoWays);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    SpreadsheetComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    SpreadsheetComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    SpreadsheetComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    SpreadsheetComponent.prototype.ngAfterContentChecked = function () {
-        this.tagObjects[0].instance = this.childSheets;
-        if (this.childDefinedNames) {
-            this.tagObjects[1].instance = /** @type {?} */ (this.childDefinedNames);
-        }
-        this.context.ngAfterContentChecked(this);
-    };
-    return SpreadsheetComponent;
-}(ej2Spreadsheet.Spreadsheet));
-exports.SpreadsheetComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-spreadsheet',
-                inputs: inputs,
-                outputs: outputs$9,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {
-                    childSheets: new core.ContentChild(SheetsDirective),
-                    childDefinedNames: new core.ContentChild(DefinedNamesDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.SpreadsheetComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.SpreadsheetComponent.propDecorators = {
-    'template': [{ type: core.ContentChild, args: ['template',] },],
-};
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], exports.SpreadsheetComponent.prototype, "template", void 0);
-exports.SpreadsheetComponent = __decorate$1([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$1("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.SpreadsheetComponent);
-/**
- * NgModule definition for the Spreadsheet component.
- */
-var SpreadsheetModule = /** @class */ (function () {
-    function SpreadsheetModule() {
-    }
-    return SpreadsheetModule;
-}());
-SpreadsheetModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.SpreadsheetComponent,
-                    ImageDirective,
-                    ImagesDirective,
-                    ChartDirective,
-                    ChartsDirective,
-                    CellDirective,
-                    CellsDirective,
-                    RowDirective,
-                    RowsDirective,
-                    ColumnDirective,
-                    ColumnsDirective,
-                    RangeDirective,
-                    RangesDirective,
-                    ConditionalFormatDirective,
-                    ConditionalFormatsDirective,
-                    SheetDirective,
-                    SheetsDirective,
-                    DefinedNameDirective,
-                    DefinedNamesDirective
-                ],
-                exports: [
-                    exports.SpreadsheetComponent,
-                    ImageDirective,
-                    ImagesDirective,
-                    ChartDirective,
-                    ChartsDirective,
-                    CellDirective,
-                    CellsDirective,
-                    RowDirective,
-                    RowsDirective,
-                    ColumnDirective,
-                    ColumnsDirective,
-                    RangeDirective,
-                    RangesDirective,
-                    ConditionalFormatDirective,
-                    ConditionalFormatsDirective,
-                    SheetDirective,
-                    SheetsDirective,
-                    DefinedNameDirective,
-                    DefinedNamesDirective
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-SpreadsheetModule.ctorParameters = function () { return []; };
-var ClipboardService = { provide: 'SpreadsheetClipboard', useValue: ej2Spreadsheet.Clipboard };
-var EditService = { provide: 'SpreadsheetEdit', useValue: ej2Spreadsheet.Edit };
-var KeyboardNavigationService = { provide: 'SpreadsheetKeyboardNavigation', useValue: ej2Spreadsheet.KeyboardNavigation };
-var KeyboardShortcutService = { provide: 'SpreadsheetKeyboardShortcut', useValue: ej2Spreadsheet.KeyboardShortcut };
-var SelectionService = { provide: 'SpreadsheetSelection', useValue: ej2Spreadsheet.Selection };
-var ContextMenuService = { provide: 'SpreadsheetContextMenu', useValue: ej2Spreadsheet.ContextMenu };
-var FormulaBarService = { provide: 'SpreadsheetFormulaBar', useValue: ej2Spreadsheet.FormulaBar };
-var RibbonService = { provide: 'SpreadsheetRibbon', useValue: ej2Spreadsheet.Ribbon };
-var SaveService = { provide: 'SpreadsheetSave', useValue: ej2Spreadsheet.Save };
-var OpenService = { provide: 'SpreadsheetOpen', useValue: ej2Spreadsheet.Open };
-var SheetTabsService = { provide: 'SpreadsheetSheetTabs', useValue: ej2Spreadsheet.SheetTabs };
-var DataBindService = { provide: 'SpreadsheetDataBind', useValue: ej2Spreadsheet.DataBind };
-var CellFormatService = { provide: 'SpreadsheetCellFormat', useValue: ej2Spreadsheet.CellFormat };
-var NumberFormatService = { provide: 'SpreadsheetNumberFormat', useValue: ej2Spreadsheet.NumberFormat };
-var FormulaService = { provide: 'SpreadsheetFormula', useValue: ej2Spreadsheet.Formula };
-/**
- * NgModule definition for the Spreadsheet component with providers.
- */
-var SpreadsheetAllModule = /** @class */ (function () {
-    function SpreadsheetAllModule() {
-    }
-    return SpreadsheetAllModule;
-}());
-SpreadsheetAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, SpreadsheetModule],
-                exports: [
-                    SpreadsheetModule
-                ],
-                providers: [
-                    ClipboardService,
-                    EditService,
-                    KeyboardNavigationService,
-                    KeyboardShortcutService,
-                    SelectionService,
-                    ContextMenuService,
-                    FormulaBarService,
-                    RibbonService,
-                    SaveService,
-                    OpenService,
-                    SheetTabsService,
-                    DataBindService,
-                    CellFormatService,
-                    NumberFormatService,
-                    FormulaService
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var input = ['height', 'id', 'left', 'src', 'top', 'width'];
+var outputs = [];
+var ImageDirective = /** @class */ (function (_super) {
+    __extends(ImageDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ImageDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs);
+        _this.directivePropList = input;
+        return _this;
+    }
+    return ImageDirective;
+}(ej2AngularBase.ComplexBase));
+ImageDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-images>e-image',
+                inputs: input,
+                outputs: outputs,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ImageDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Image Array Directive
+ */
+var ImagesDirective = /** @class */ (function (_super) {
+    __extends(ImagesDirective, _super);
+    function ImagesDirective() {
+        return _super.call(this, 'image') || this;
+    }
+    return ImagesDirective;
+}(ej2AngularBase.ArrayBase));
+ImagesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-cell>e-images',
+                queries: {
+                    children: new core.ContentChildren(ImageDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ImagesDirective.ctorParameters = function () { return []; };
+var input$1 = ['dataLabelSettings', 'height', 'id', 'isSeriesInRows', 'legendSettings', 'markerSettings', 'primaryXAxis', 'primaryYAxis', 'range', 'theme', 'title', 'type', 'width'];
+var outputs$1 = [];
+var ChartDirective = /** @class */ (function (_super) {
+    __extends(ChartDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ChartDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$1);
+        _this.directivePropList = input$1;
+        return _this;
+    }
+    return ChartDirective;
+}(ej2AngularBase.ComplexBase));
+ChartDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-charts>e-chart',
+                inputs: input$1,
+                outputs: outputs$1,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ChartDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Chart Array Directive
+ */
+var ChartsDirective = /** @class */ (function (_super) {
+    __extends(ChartsDirective, _super);
+    function ChartsDirective() {
+        return _super.call(this, 'chart') || this;
+    }
+    return ChartsDirective;
+}(ej2AngularBase.ArrayBase));
+ChartsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-cell>e-charts',
+                queries: {
+                    children: new core.ContentChildren(ChartDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ChartsDirective.ctorParameters = function () { return []; };
+var input$2 = ['chart', 'colSpan', 'format', 'formula', 'hyperlink', 'image', 'index', 'isLocked', 'isReadOnly', 'notes', 'rowSpan', 'style', 'validation', 'value', 'wrap'];
+var outputs$2 = [];
+/**
+ * `e-cell` directive represent a cell of the Angular Spreadsheet.
+ * It must be contained in a `e-row` directive.
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet>
+ *    <e-rows>
+ *    <e-row>
+ *    <e-cells>
+ *    <e-cell value='A1'></e-cell>
+ *    </e-cells>
+ *    </e-row>
+ *    </e-rows>
+ *    </e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var CellDirective = /** @class */ (function (_super) {
+    __extends(CellDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function CellDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['image', 'chart'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$2);
+        _this.directivePropList = input$2;
+        return _this;
+    }
+    return CellDirective;
+}(ej2AngularBase.ComplexBase));
+CellDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-cells>e-cell',
+                inputs: input$2,
+                outputs: outputs$2,
+                queries: {
+                    childImage: new core.ContentChild(ImagesDirective),
+                    childChart: new core.ContentChild(ChartsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CellDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Cell Array Directive
+ */
+var CellsDirective = /** @class */ (function (_super) {
+    __extends(CellsDirective, _super);
+    function CellsDirective() {
+        return _super.call(this, 'cells') || this;
+    }
+    return CellsDirective;
+}(ej2AngularBase.ArrayBase));
+CellsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-row>e-cells',
+                queries: {
+                    children: new core.ContentChildren(CellDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CellsDirective.ctorParameters = function () { return []; };
+var input$3 = ['cells', 'customHeight', 'format', 'height', 'hidden', 'index', 'isReadOnly'];
+var outputs$3 = [];
+/**
+ * `e-row` directive represent a row of the Angular Spreadsheet.
+ * It must be contained in a `e-sheet` directive.
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet>
+ *    <e-rows>
+ *    <e-row></e-row>
+ *    </e-rows>
+ *    </e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var RowDirective = /** @class */ (function (_super) {
+    __extends(RowDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function RowDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['cells'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$3);
+        _this.directivePropList = input$3;
+        return _this;
+    }
+    return RowDirective;
+}(ej2AngularBase.ComplexBase));
+RowDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-rows>e-row',
+                inputs: input$3,
+                outputs: outputs$3,
+                queries: {
+                    childCells: new core.ContentChild(CellsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RowDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Row Array Directive
+ */
+var RowsDirective = /** @class */ (function (_super) {
+    __extends(RowsDirective, _super);
+    function RowsDirective() {
+        return _super.call(this, 'rows') || this;
+    }
+    return RowsDirective;
+}(ej2AngularBase.ArrayBase));
+RowsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-sheet>e-rows',
+                queries: {
+                    children: new core.ContentChildren(RowDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RowsDirective.ctorParameters = function () { return []; };
+var input$4 = ['customWidth', 'format', 'hidden', 'index', 'isLocked', 'isReadOnly', 'validation', 'width'];
+var outputs$4 = [];
+/**
+ * `e-column` directive represent a column of the Angular Spreadsheet.
+ * It must be contained in a `e-sheet` directive.
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet>
+ *    <e-columns>
+ *    <e-column width='100'></e-column>
+ *    </e-columns>
+ *    </e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var ColumnDirective = /** @class */ (function (_super) {
+    __extends(ColumnDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ColumnDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$4);
+        _this.directivePropList = input$4;
+        return _this;
+    }
+    return ColumnDirective;
+}(ej2AngularBase.ComplexBase));
+ColumnDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-columns>e-column',
+                inputs: input$4,
+                outputs: outputs$4,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ColumnDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Column Array Directive
+ */
+var ColumnsDirective = /** @class */ (function (_super) {
+    __extends(ColumnsDirective, _super);
+    function ColumnsDirective() {
+        return _super.call(this, 'columns') || this;
+    }
+    return ColumnsDirective;
+}(ej2AngularBase.ArrayBase));
+ColumnsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-sheet>e-columns',
+                queries: {
+                    children: new core.ContentChildren(ColumnDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ColumnsDirective.ctorParameters = function () { return []; };
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input$5 = ['address', 'dataSource', 'fieldsOrder', 'query', 'showFieldAsHeader', 'startCell', 'template'];
+var outputs$5 = [];
+/**
+ * `e-range` directive represent a range of the Angular Spreadsheet.
+ * It must be contained in a `e-sheet` directive.
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet>
+ *    <e-ranges>
+ *    <e-range [dataSource]='data'></e-range>
+ *    </e-ranges>
+ *    </e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var RangeDirective = /** @class */ (function (_super) {
+    __extends(RangeDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function RangeDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$5);
+        _this.directivePropList = input$5;
+        return _this;
+    }
+    return RangeDirective;
+}(ej2AngularBase.ComplexBase));
+RangeDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-ranges>e-range',
+                inputs: input$5,
+                outputs: outputs$5,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RangeDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+RangeDirective.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+};
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], RangeDirective.prototype, "template", void 0);
+/**
+ * Range Array Directive
+ */
+var RangesDirective = /** @class */ (function (_super) {
+    __extends(RangesDirective, _super);
+    function RangesDirective() {
+        return _super.call(this, 'ranges') || this;
+    }
+    return RangesDirective;
+}(ej2AngularBase.ArrayBase));
+RangesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-sheet>e-ranges',
+                queries: {
+                    children: new core.ContentChildren(RangeDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RangesDirective.ctorParameters = function () { return []; };
+var input$6 = ['cFColor', 'format', 'range', 'type', 'value'];
+var outputs$6 = [];
+/**
+ * `e-conditionalformat` directive represent a conditionalformat of the Angular Spreadsheet.
+ * It must be contained in a `e-sheet` directive.
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet>
+ *    <e-conditionalformats>
+ *    <e-conditionalformat></e-conditionalformat>
+ *    </e-conditionalformats>
+ *    </e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var ConditionalFormatDirective = /** @class */ (function (_super) {
+    __extends(ConditionalFormatDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ConditionalFormatDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$6);
+        _this.directivePropList = input$6;
+        return _this;
+    }
+    return ConditionalFormatDirective;
+}(ej2AngularBase.ComplexBase));
+ConditionalFormatDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-conditionalformats>e-conditionalformat',
+                inputs: input$6,
+                outputs: outputs$6,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConditionalFormatDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * ConditionalFormat Array Directive
+ */
+var ConditionalFormatsDirective = /** @class */ (function (_super) {
+    __extends(ConditionalFormatsDirective, _super);
+    function ConditionalFormatsDirective() {
+        return _super.call(this, 'conditionalformats') || this;
+    }
+    return ConditionalFormatsDirective;
+}(ej2AngularBase.ArrayBase));
+ConditionalFormatsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-sheet>e-conditionalformats',
+                queries: {
+                    children: new core.ContentChildren(ConditionalFormatDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConditionalFormatsDirective.ctorParameters = function () { return []; };
+var input$7 = ['activeCell', 'colCount', 'columns', 'conditionalFormats', 'frozenColumns', 'frozenRows', 'index', 'isProtected', 'name', 'paneTopLeftCell', 'password', 'protectSettings', 'ranges', 'rowCount', 'rows', 'selectedRange', 'showGridLines', 'showHeaders', 'standardHeight', 'state', 'topLeftCell', 'usedRange'];
+var outputs$7 = [];
+/**
+ * `e-sheet` directive represent a sheet of the Angular Spreadsheet.
+ * It must be contained in a Spreadsheet component(`ejs-spreadsheet`).
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-sheets>
+ *    <e-sheet></e-sheet>
+ *    <e-sheet></e-sheet>
+ *   </e-sheets>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var SheetDirective = /** @class */ (function (_super) {
+    __extends(SheetDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function SheetDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['rows', 'columns', 'ranges', 'conditionalFormats'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$7);
+        _this.directivePropList = input$7;
+        return _this;
+    }
+    return SheetDirective;
+}(ej2AngularBase.ComplexBase));
+SheetDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-sheets>e-sheet',
+                inputs: input$7,
+                outputs: outputs$7,
+                queries: {
+                    childRows: new core.ContentChild(RowsDirective),
+                    childColumns: new core.ContentChild(ColumnsDirective),
+                    childRanges: new core.ContentChild(RangesDirective),
+                    childConditionalFormats: new core.ContentChild(ConditionalFormatsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+SheetDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Sheet Array Directive
+ */
+var SheetsDirective = /** @class */ (function (_super) {
+    __extends(SheetsDirective, _super);
+    function SheetsDirective() {
+        return _super.call(this, 'sheets') || this;
+    }
+    return SheetsDirective;
+}(ej2AngularBase.ArrayBase));
+SheetsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-spreadsheet>e-sheets',
+                queries: {
+                    children: new core.ContentChildren(SheetDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+SheetsDirective.ctorParameters = function () { return []; };
+var input$8 = ['comment', 'name', 'refersTo', 'scope'];
+var outputs$8 = [];
+/**
+ * `e-definedname` directive represent a defined name of the Angular Spreadsheet.
+ * It must be contained in a Spreadsheet component(`ejs-spreadsheet`).
+ * ```html
+ * <ejs-spreadsheet>
+ *   <e-definednames>
+ *    <e-definedname></e-definedname>
+ *    <e-definedname></e-definedname>
+ *   </e-definednames>
+ * </ejs-spreadsheet>
+ * ```
+ */
+var DefinedNameDirective = /** @class */ (function (_super) {
+    __extends(DefinedNameDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function DefinedNameDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$8);
+        _this.directivePropList = input$8;
+        return _this;
+    }
+    return DefinedNameDirective;
+}(ej2AngularBase.ComplexBase));
+DefinedNameDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-definednames>e-definedname',
+                inputs: input$8,
+                outputs: outputs$8,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DefinedNameDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * DefinedName Array Directive
+ */
+var DefinedNamesDirective = /** @class */ (function (_super) {
+    __extends(DefinedNamesDirective, _super);
+    function DefinedNamesDirective() {
+        return _super.call(this, 'definednames') || this;
+    }
+    return DefinedNamesDirective;
+}(ej2AngularBase.ArrayBase));
+DefinedNamesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-spreadsheet>e-definednames',
+                queries: {
+                    children: new core.ContentChildren(DefinedNameDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DefinedNamesDirective.ctorParameters = function () { return []; };
+var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var inputs = ['activeSheetIndex', 'allowAutoFill', 'allowCellFormatting', 'allowChart', 'allowConditionalFormat', 'allowDataValidation', 'allowDelete', 'allowEditing', 'allowFiltering', 'allowFindAndReplace', 'allowFreezePane', 'allowHyperlink', 'allowImage', 'allowInsert', 'allowMerge', 'allowNumberFormatting', 'allowOpen', 'allowPrint', 'allowResizing', 'allowSave', 'allowScrolling', 'allowSorting', 'allowUndoRedo', 'allowWrap', 'autoFillSettings', 'calculationMode', 'cellStyle', 'cssClass', 'currencyCode', 'definedNames', 'enableClipboard', 'enableContextMenu', 'enableKeyboardNavigation', 'enableKeyboardShortcut', 'enableNotes', 'enablePersistence', 'enableRtl', 'height', 'isProtected', 'listSeparator', 'locale', 'openSettings', 'openUrl', 'password', 'saveUrl', 'scrollSettings', 'selectionSettings', 'sheets', 'showAggregate', 'showFormulaBar', 'showRibbon', 'showSheetTabs', 'width'];
+var outputs$9 = ['actionBegin', 'actionComplete', 'afterHyperlinkClick', 'afterHyperlinkCreate', 'beforeCellFormat', 'beforeCellRender', 'beforeCellSave', 'beforeCellUpdate', 'beforeConditionalFormat', 'beforeDataBound', 'beforeHyperlinkClick', 'beforeHyperlinkCreate', 'beforeOpen', 'beforeSave', 'beforeSelect', 'beforeSort', 'cellEdit', 'cellEdited', 'cellEditing', 'cellSave', 'contextMenuBeforeClose', 'contextMenuBeforeOpen', 'contextMenuItemSelect', 'created', 'dataBound', 'dataSourceChanged', 'dialogBeforeOpen', 'fileMenuBeforeClose', 'fileMenuBeforeOpen', 'fileMenuItemSelect', 'openComplete', 'openFailure', 'queryCellInfo', 'saveComplete', 'select', 'sortComplete'];
+var twoWays = [''];
+/**
+ * `ejs-spreadsheet` represents the Angular Spreadsheet Component.
+ * ```html
+ * <ejs-spreadsheet></ejs-spreadsheet>
+ * ```
+ */
+exports.SpreadsheetComponent = /** @class */ (function (_super) {
+    __extends(SpreadsheetComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function SpreadsheetComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = ['sheets', 'definedNames'];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        try {
+            var mod = _this.injector.get('SpreadsheetClipboard');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_a) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetEdit');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_b) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetKeyboardNavigation');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_c) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetKeyboardShortcut');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_d) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetSelection');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_e) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetContextMenu');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_f) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetFormulaBar');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_g) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetRibbon');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_h) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetSave');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_j) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetOpen');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_k) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetSheetTabs');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_l) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetDataBind');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_m) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetCellFormat');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_o) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetNumberFormat');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_p) { }
+        try {
+            var mod = _this.injector.get('SpreadsheetFormula');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_q) { }
+        _this.registerEvents(outputs$9);
+        _this.addTwoWay.call(_this, twoWays);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    SpreadsheetComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    SpreadsheetComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    SpreadsheetComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    SpreadsheetComponent.prototype.ngAfterContentChecked = function () {
+        this.tagObjects[0].instance = this.childSheets;
+        if (this.childDefinedNames) {
+            this.tagObjects[1].instance = /** @type {?} */ (this.childDefinedNames);
+        }
+        this.context.ngAfterContentChecked(this);
+    };
+    return SpreadsheetComponent;
+}(ej2Spreadsheet.Spreadsheet));
+exports.SpreadsheetComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-spreadsheet',
+                inputs: inputs,
+                outputs: outputs$9,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {
+                    childSheets: new core.ContentChild(SheetsDirective),
+                    childDefinedNames: new core.ContentChild(DefinedNamesDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.SpreadsheetComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.SpreadsheetComponent.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+};
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], exports.SpreadsheetComponent.prototype, "template", void 0);
+exports.SpreadsheetComponent = __decorate$1([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$1("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.SpreadsheetComponent);
+/**
+ * NgModule definition for the Spreadsheet component.
+ */
+var SpreadsheetModule = /** @class */ (function () {
+    function SpreadsheetModule() {
+    }
+    return SpreadsheetModule;
+}());
+SpreadsheetModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.SpreadsheetComponent,
+                    ImageDirective,
+                    ImagesDirective,
+                    ChartDirective,
+                    ChartsDirective,
+                    CellDirective,
+                    CellsDirective,
+                    RowDirective,
+                    RowsDirective,
+                    ColumnDirective,
+                    ColumnsDirective,
+                    RangeDirective,
+                    RangesDirective,
+                    ConditionalFormatDirective,
+                    ConditionalFormatsDirective,
+                    SheetDirective,
+                    SheetsDirective,
+                    DefinedNameDirective,
+                    DefinedNamesDirective
+                ],
+                exports: [
+                    exports.SpreadsheetComponent,
+                    ImageDirective,
+                    ImagesDirective,
+                    ChartDirective,
+                    ChartsDirective,
+                    CellDirective,
+                    CellsDirective,
+                    RowDirective,
+                    RowsDirective,
+                    ColumnDirective,
+                    ColumnsDirective,
+                    RangeDirective,
+                    RangesDirective,
+                    ConditionalFormatDirective,
+                    ConditionalFormatsDirective,
+                    SheetDirective,
+                    SheetsDirective,
+                    DefinedNameDirective,
+                    DefinedNamesDirective
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+SpreadsheetModule.ctorParameters = function () { return []; };
+var ClipboardService = { provide: 'SpreadsheetClipboard', useValue: ej2Spreadsheet.Clipboard };
+var EditService = { provide: 'SpreadsheetEdit', useValue: ej2Spreadsheet.Edit };
+var KeyboardNavigationService = { provide: 'SpreadsheetKeyboardNavigation', useValue: ej2Spreadsheet.KeyboardNavigation };
+var KeyboardShortcutService = { provide: 'SpreadsheetKeyboardShortcut', useValue: ej2Spreadsheet.KeyboardShortcut };
+var SelectionService = { provide: 'SpreadsheetSelection', useValue: ej2Spreadsheet.Selection };
+var ContextMenuService = { provide: 'SpreadsheetContextMenu', useValue: ej2Spreadsheet.ContextMenu };
+var FormulaBarService = { provide: 'SpreadsheetFormulaBar', useValue: ej2Spreadsheet.FormulaBar };
+var RibbonService = { provide: 'SpreadsheetRibbon', useValue: ej2Spreadsheet.Ribbon };
+var SaveService = { provide: 'SpreadsheetSave', useValue: ej2Spreadsheet.Save };
+var OpenService = { provide: 'SpreadsheetOpen', useValue: ej2Spreadsheet.Open };
+var SheetTabsService = { provide: 'SpreadsheetSheetTabs', useValue: ej2Spreadsheet.SheetTabs };
+var DataBindService = { provide: 'SpreadsheetDataBind', useValue: ej2Spreadsheet.DataBind };
+var CellFormatService = { provide: 'SpreadsheetCellFormat', useValue: ej2Spreadsheet.CellFormat };
+var NumberFormatService = { provide: 'SpreadsheetNumberFormat', useValue: ej2Spreadsheet.NumberFormat };
+var FormulaService = { provide: 'SpreadsheetFormula', useValue: ej2Spreadsheet.Formula };
+/**
+ * NgModule definition for the Spreadsheet component with providers.
+ */
+var SpreadsheetAllModule = /** @class */ (function () {
+    function SpreadsheetAllModule() {
+    }
+    return SpreadsheetAllModule;
+}());
+SpreadsheetAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, SpreadsheetModule],
+                exports: [
+                    SpreadsheetModule
+                ],
+                providers: [
+                    ClipboardService,
+                    EditService,
+                    KeyboardNavigationService,
+                    KeyboardShortcutService,
+                    SelectionService,
+                    ContextMenuService,
+                    FormulaBarService,
+                    RibbonService,
+                    SaveService,
+                    OpenService,
+                    SheetTabsService,
+                    DataBindService,
+                    CellFormatService,
+                    NumberFormatService,
+                    FormulaService
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
 SpreadsheetAllModule.ctorParameters = function () { return []; };
 
 exports.ImageDirective = ImageDirective;
@@ -1013,6 +1004,7 @@ exports.getSheetNameFromAddress = ej2Spreadsheet.getSheetNameFromAddress;
 exports.getSheetIndexByName = ej2Spreadsheet.getSheetIndexByName;
 exports.updateSelectedRange = ej2Spreadsheet.updateSelectedRange;
 exports.getSelectedRange = ej2Spreadsheet.getSelectedRange;
+exports.getSingleSelectedRange = ej2Spreadsheet.getSingleSelectedRange;
 exports.getSheet = ej2Spreadsheet.getSheet;
 exports.getSheetNameCount = ej2Spreadsheet.getSheetNameCount;
 exports.getMaxSheetId = ej2Spreadsheet.getMaxSheetId;