@syncfusion/ej2-angular-diagrams 29.2.8-ngcc → 30.1.37-ngcc

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

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-diagrams.umd.js
-*  version : 29.2.8
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. 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
@@ -13,1337 +13,1337 @@
 	(factory((global['ej2-angular-diagrams'] = {}),global.ng.core,global.ej2.angular.base,global.ej2.diagrams,global.ng.common));
 }(this, (function (exports,core,ej2AngularBase,ej2Diagrams,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 = ['addInfo', 'id', 'lock', 'objects', 'visible', 'zIndex'];
-var outputs = [];
-/**
- * Layers Directive
- * ```html
- * <e-layers>
- * <e-layer></e-layer>
- * </e-layers>
- * ```
- */
-var LayerDirective = /** @class */ (function (_super) {
-    __extends(LayerDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function LayerDirective(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 LayerDirective;
-}(ej2AngularBase.ComplexBase));
-LayerDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-layers>e-layer',
-                inputs: input,
-                outputs: outputs,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-LayerDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Layer Array Directive
- */
-var LayersDirective = /** @class */ (function (_super) {
-    __extends(LayersDirective, _super);
-    function LayersDirective() {
-        return _super.call(this, 'layers') || this;
-    }
-    return LayersDirective;
-}(ej2AngularBase.ArrayBase));
-LayersDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ej-diagram>e-layers',
-                queries: {
-                    children: new core.ContentChildren(LayerDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-LayersDirective.ctorParameters = function () { return []; };
-var input$1 = ['action', 'cursor'];
-var outputs$1 = [];
-/**
- * Cursor Maps Directive
- * ```html
- * <e-cusrsormaps>
- * <e-cursormap></e-cursormap>
- * </e-cursormaps>
- * ```
- */
-var CustomCursorDirective = /** @class */ (function (_super) {
-    __extends(CustomCursorDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function CustomCursorDirective(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 CustomCursorDirective;
-}(ej2AngularBase.ComplexBase));
-CustomCursorDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-cursormaps>e-cursormap',
-                inputs: input$1,
-                outputs: outputs$1,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-CustomCursorDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * CustomCursor Array Directive
- */
-var CustomCursorsDirective = /** @class */ (function (_super) {
-    __extends(CustomCursorsDirective, _super);
-    function CustomCursorsDirective() {
-        return _super.call(this, 'customcursor') || this;
-    }
-    return CustomCursorsDirective;
-}(ej2AngularBase.ArrayBase));
-CustomCursorsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ej-diagram>e-cursormaps',
-                queries: {
-                    children: new core.ContentChildren(CustomCursorDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-CustomCursorsDirective.ctorParameters = function () { return []; };
-var input$2 = ['alignment', 'cornerRadius', 'displacement', 'fill', 'handleStrokeColor', 'handleStrokeWidth', 'height', 'iconStrokeColor', 'iconStrokeWidth', 'id', 'offset', 'padding', 'pathData', 'tooltip', 'visibility', 'width'];
-var outputs$2 = [];
-/**
- * Connectors Directive
- * ```html
- * <e-connectors>
- * <e-connector>
- * <e-connector-fixeduserhandles>
- * <e-connector-fixeduserhandle>
- * </e-connector-fixeduserhandle>
- * </e-connector-fixeduserhandles>
- * </e-connector>
- * </e-connectors>
- * ```
- */
-var ConnectorFixedUserHandleDirective = /** @class */ (function (_super) {
-    __extends(ConnectorFixedUserHandleDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ConnectorFixedUserHandleDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$2);
-        _this.directivePropList = input$2;
-        return _this;
-    }
-    return ConnectorFixedUserHandleDirective;
-}(ej2AngularBase.ComplexBase));
-ConnectorFixedUserHandleDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-connector>e-connector-fixeduserhandles>e-connector-fixeduserhandle',
-                inputs: input$2,
-                outputs: outputs$2,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorFixedUserHandleDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * ConnectorFixedUserHandle Array Directive
- */
-var ConnectorFixedUserHandlesDirective = /** @class */ (function (_super) {
-    __extends(ConnectorFixedUserHandlesDirective, _super);
-    function ConnectorFixedUserHandlesDirective() {
-        return _super.call(this, 'fixeduserhandles') || this;
-    }
-    return ConnectorFixedUserHandlesDirective;
-}(ej2AngularBase.ArrayBase));
-ConnectorFixedUserHandlesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-connector>e-connector-fixeduserhandles',
-                queries: {
-                    children: new core.ContentChildren(ConnectorFixedUserHandleDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorFixedUserHandlesDirective.ctorParameters = function () { return []; };
-var input$3 = ['addInfo', 'alignment', 'annotationType', 'constraints', 'content', 'displacement', 'dragLimit', 'height', 'horizontalAlignment', 'hyperlink', 'id', 'margin', 'offset', 'rotateAngle', 'rotationReference', 'segmentAngle', 'style', 'template', 'tooltip', 'type', 'verticalAlignment', 'visibility', 'width'];
-var outputs$3 = [];
-/**
- * Connectors Directive
- * ```html
- * <e-connectors>
- * <e-connector>
- * <e-connector-annotations>
- * <e-connector-annotation>
- * </e-connector-annotation>
- * </e-connector-annotations>
- * </e-connector>
- * </e-connectors>
- * ```
- */
-var ConnectorAnnotationDirective = /** @class */ (function (_super) {
-    __extends(ConnectorAnnotationDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ConnectorAnnotationDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$3);
-        _this.directivePropList = input$3;
-        return _this;
-    }
-    return ConnectorAnnotationDirective;
-}(ej2AngularBase.ComplexBase));
-ConnectorAnnotationDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-connector>e-connector-annotations>e-connector-annotation',
-                inputs: input$3,
-                outputs: outputs$3,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorAnnotationDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * ConnectorAnnotation Array Directive
- */
-var ConnectorAnnotationsDirective = /** @class */ (function (_super) {
-    __extends(ConnectorAnnotationsDirective, _super);
-    function ConnectorAnnotationsDirective() {
-        return _super.call(this, 'annotations') || this;
-    }
-    return ConnectorAnnotationsDirective;
-}(ej2AngularBase.ArrayBase));
-ConnectorAnnotationsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-connector>e-connector-annotations',
-                queries: {
-                    children: new core.ContentChildren(ConnectorAnnotationDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorAnnotationsDirective.ctorParameters = function () { return []; };
-var input$4 = ['addInfo', 'allowNodeOverlap', 'annotations', 'bezierSettings', 'bridgeSpace', 'connectionPadding', 'connectorSpacing', 'constraints', 'cornerRadius', 'dragSize', 'excludeFromLayout', 'fixedUserHandles', 'flip', 'flipMode', 'hitPadding', 'id', 'margin', 'maxSegmentThumb', 'ports', 'previewSize', 'segmentThumbShape', 'segmentThumbSize', 'segments', 'shape', 'sourceDecorator', 'sourceID', 'sourcePadding', 'sourcePoint', 'sourcePortID', 'style', 'symbolInfo', 'targetDecorator', 'targetID', 'targetPadding', 'targetPoint', 'targetPortID', 'tooltip', 'type', 'visible', 'wrapper', 'zIndex'];
-var outputs$4 = [];
-/**
- * Connectors Directive
- * ```html
- * <e-connectors>
- * <e-connector></e-connector>
- * </e-connectors>
- * ```
- */
-var ConnectorDirective = /** @class */ (function (_super) {
-    __extends(ConnectorDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ConnectorDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['fixedUserHandles', 'annotations'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$4);
-        _this.directivePropList = input$4;
-        return _this;
-    }
-    return ConnectorDirective;
-}(ej2AngularBase.ComplexBase));
-ConnectorDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-connectors>e-connector',
-                inputs: input$4,
-                outputs: outputs$4,
-                queries: {
-                    childFixedUserHandles: new core.ContentChild(ConnectorFixedUserHandlesDirective),
-                    childAnnotations: new core.ContentChild(ConnectorAnnotationsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Connector Array Directive
- */
-var ConnectorsDirective = /** @class */ (function (_super) {
-    __extends(ConnectorsDirective, _super);
-    function ConnectorsDirective() {
-        return _super.call(this, 'connectors') || this;
-    }
-    return ConnectorsDirective;
-}(ej2AngularBase.ArrayBase));
-ConnectorsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ej-diagram>e-connectors',
-                queries: {
-                    children: new core.ContentChildren(ConnectorDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ConnectorsDirective.ctorParameters = function () { return []; };
-var input$5 = ['cornerRadius', 'fill', 'handleStrokeColor', 'handleStrokeWidth', 'height', 'iconStrokeColor', 'iconStrokeWidth', 'id', 'margin', 'offset', 'padding', 'pathData', 'tooltip', 'visibility', 'width'];
-var outputs$5 = [];
-/**
- * Nodes Directive
- * ```html
- * <e-nodes>
- * <e-node>
- * <e-node-fixeduserhandles>
- * <e-node-fixeduserhandle>
- * </e-node-fixeduserhandle>
- * </e-node-fixeduserhandles>
- * </e-node>
- * </e-nodes>
- * ```
- */
-var NodeFixedUserHandleDirective = /** @class */ (function (_super) {
-    __extends(NodeFixedUserHandleDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function NodeFixedUserHandleDirective(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 NodeFixedUserHandleDirective;
-}(ej2AngularBase.ComplexBase));
-NodeFixedUserHandleDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-fixeduserhandles>e-node-fixeduserhandle',
-                inputs: input$5,
-                outputs: outputs$5,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-NodeFixedUserHandleDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * NodeFixedUserHandle Array Directive
- */
-var NodeFixedUserHandlesDirective = /** @class */ (function (_super) {
-    __extends(NodeFixedUserHandlesDirective, _super);
-    function NodeFixedUserHandlesDirective() {
-        return _super.call(this, 'fixeduserhandles') || this;
-    }
-    return NodeFixedUserHandlesDirective;
-}(ej2AngularBase.ArrayBase));
-NodeFixedUserHandlesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-fixeduserhandles',
-                queries: {
-                    children: new core.ContentChildren(NodeFixedUserHandleDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-NodeFixedUserHandlesDirective.ctorParameters = function () { return []; };
-var input$6 = ['addInfo', 'annotationType', 'constraints', 'content', 'dragLimit', 'height', 'horizontalAlignment', 'hyperlink', 'id', 'margin', 'offset', 'rotateAngle', 'rotationReference', 'style', 'template', 'tooltip', 'type', 'verticalAlignment', 'visibility', 'width'];
-var outputs$6 = [];
-/**
- * Nodes Directive
- * ```html
- * <e-nodes>
- * <e-node>
- * <e-node-annotations>
- * <e-node-annotation>
- * </e-node-annotation>
- * </e-node-annotations>
- * </e-node>
- * </e-nodes>
- * ```
- */
-var NodeAnnotationDirective = /** @class */ (function (_super) {
-    __extends(NodeAnnotationDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function NodeAnnotationDirective(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 NodeAnnotationDirective;
-}(ej2AngularBase.ComplexBase));
-NodeAnnotationDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-annotations>e-node-annotation',
-                inputs: input$6,
-                outputs: outputs$6,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-NodeAnnotationDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * NodeAnnotation Array Directive
- */
-var NodeAnnotationsDirective = /** @class */ (function (_super) {
-    __extends(NodeAnnotationsDirective, _super);
-    function NodeAnnotationsDirective() {
-        return _super.call(this, 'annotations') || this;
-    }
-    return NodeAnnotationsDirective;
-}(ej2AngularBase.ArrayBase));
-NodeAnnotationsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-annotations',
-                queries: {
-                    children: new core.ContentChildren(NodeAnnotationDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-NodeAnnotationsDirective.ctorParameters = function () { return []; };
-var input$7 = ['addInfo', 'connectionDirection', 'constraints', 'height', 'horizontalAlignment', 'id', 'inEdges', 'margin', 'offset', 'outEdges', 'pathData', 'shape', 'style', 'tooltip', 'verticalAlignment', 'visibility', 'width'];
-var outputs$7 = [];
-/**
- * Nodes Directive
- * ```html
- * <e-nodes>
- * <e-node>
- * <e-node-ports>
- * <e-node-port>
- * </e-node-port>
- * </e-node-ports>
- * </e-node>
- * </e-nodes>
- * ```
- */
-var PortDirective = /** @class */ (function (_super) {
-    __extends(PortDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function PortDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$7);
-        _this.directivePropList = input$7;
-        return _this;
-    }
-    return PortDirective;
-}(ej2AngularBase.ComplexBase));
-PortDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-ports>e-node-port',
-                inputs: input$7,
-                outputs: outputs$7,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-PortDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Port Array Directive
- */
-var PortsDirective = /** @class */ (function (_super) {
-    __extends(PortsDirective, _super);
-    function PortsDirective() {
-        return _super.call(this, 'ports') || this;
-    }
-    return PortsDirective;
-}(ej2AngularBase.ArrayBase));
-PortsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-node>e-node-ports',
-                queries: {
-                    children: new core.ContentChildren(PortDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-PortsDirective.ctorParameters = function () { return []; };
-var input$8 = ['addInfo', 'annotations', 'backgroundColor', 'borderColor', 'borderWidth', 'branch', 'children', 'collapseIcon', 'columnIndex', 'columnSpan', 'columns', 'constraints', 'container', 'data', 'dragSize', 'excludeFromLayout', 'expandIcon', 'fixedUserHandles', 'flip', 'flipMode', 'height', 'horizontalAlignment', 'id', 'isExpanded', 'layoutInfo', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'offsetX', 'offsetY', 'padding', 'pivot', 'ports', 'previewSize', 'rotateAngle', 'rowIndex', 'rowSpan', 'rows', 'shadow', 'shape', 'style', 'symbolInfo', 'tooltip', 'verticalAlignment', 'visible', 'width', 'wrapper', 'zIndex'];
-var outputs$8 = [];
-/**
- * Nodes Directive
- * ```html
- * <e-nodes>
- * <e-node></e-node>
- * </e-nodes>
- * ```
- */
-var NodeDirective = /** @class */ (function (_super) {
-    __extends(NodeDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function NodeDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['fixedUserHandles', 'annotations', 'ports'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$8);
-        _this.directivePropList = input$8;
-        return _this;
-    }
-    return NodeDirective;
-}(ej2AngularBase.ComplexBase));
-NodeDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-nodes>e-node',
-                inputs: input$8,
-                outputs: outputs$8,
-                queries: {
-                    childFixedUserHandles: new core.ContentChild(NodeFixedUserHandlesDirective),
-                    childAnnotations: new core.ContentChild(NodeAnnotationsDirective),
-                    childPorts: new core.ContentChild(PortsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-NodeDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Node Array Directive
- */
-var NodesDirective = /** @class */ (function (_super) {
-    __extends(NodesDirective, _super);
-    function NodesDirective() {
-        return _super.call(this, 'nodes') || this;
-    }
-    return NodesDirective;
-}(ej2AngularBase.ArrayBase));
-NodesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ej-diagram>e-nodes',
-                queries: {
-                    children: new core.ContentChildren(NodeDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-NodesDirective.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 inputs = ['addInfo', 'annotationTemplate', 'backgroundColor', 'bridgeDirection', 'commandManager', 'connectorDefaults', 'connectors', 'constraints', 'contextMenuSettings', 'customCursor', 'dataSourceSettings', 'diagramSettings', 'drawingObject', 'enableConnectorSplit', 'enablePersistence', 'enableRtl', 'fixedUserHandleTemplate', 'getConnectorDefaults', 'getCustomCursor', 'getCustomProperty', 'getCustomTool', 'getDescription', 'getNodeDefaults', 'height', 'historyManager', 'layers', 'layout', 'locale', 'mode', 'nodeDefaults', 'nodeTemplate', 'nodes', 'pageSettings', 'rulerSettings', 'scrollSettings', 'segmentThumbShape', 'segmentThumbSize', 'selectedItems', 'serializationSettings', 'setNodeTemplate', 'snapSettings', 'tool', 'tooltip', 'updateSelection', 'userHandleTemplate', 'width'];
-var outputs$9 = ['animationComplete', 'click', 'collectionChange', 'commandExecute', 'connectionChange', 'contextMenuBeforeItemRender', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataLoaded', 'doubleClick', 'dragEnter', 'dragLeave', 'dragOver', 'drop', 'elementDraw', 'expandStateChange', 'fixedUserHandleClick', 'historyChange', 'historyStateChange', 'keyDown', 'keyUp', 'layoutUpdated', 'load', 'loaded', 'mouseEnter', 'mouseLeave', 'mouseOver', 'mouseWheel', 'onFixedUserHandleMouseDown', 'onFixedUserHandleMouseEnter', 'onFixedUserHandleMouseLeave', 'onFixedUserHandleMouseUp', 'onImageLoad', 'onUserHandleMouseDown', 'onUserHandleMouseEnter', 'onUserHandleMouseLeave', 'onUserHandleMouseUp', 'positionChange', 'propertyChange', 'rotateChange', 'scrollChange', 'segmentChange', 'segmentCollectionChange', 'selectionChange', 'sizeChange', 'sourcePointChange', 'targetPointChange', 'textEdit'];
-var twoWays = [''];
-/**
- * Diagram Component
- * ```html
- * <ej-diagram></ej-diagram>
- * ```
- */
-exports.DiagramComponent = /** @class */ (function (_super) {
-    __extends(DiagramComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function DiagramComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.tags = ['layers', 'customCursor', 'connectors', 'nodes'];
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        try {
-            var mod = _this.injector.get('DiagramsHierarchicalTree');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_a) { }
-        try {
-            var mod = _this.injector.get('DiagramsMindMap');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_b) { }
-        try {
-            var mod = _this.injector.get('DiagramsRadialTree');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_c) { }
-        try {
-            var mod = _this.injector.get('DiagramsComplexHierarchicalTree');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_d) { }
-        try {
-            var mod = _this.injector.get('DiagramsDataBinding');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_e) { }
-        try {
-            var mod = _this.injector.get('DiagramsSnapping');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_f) { }
-        try {
-            var mod = _this.injector.get('DiagramsPrintAndExport');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_g) { }
-        try {
-            var mod = _this.injector.get('DiagramsBpmnDiagrams');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_h) { }
-        try {
-            var mod = _this.injector.get('DiagramsSymmetricLayout');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_j) { }
-        try {
-            var mod = _this.injector.get('DiagramsConnectorBridging');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_k) { }
-        try {
-            var mod = _this.injector.get('DiagramsUndoRedo');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_l) { }
-        try {
-            var mod = _this.injector.get('DiagramsLayoutAnimation');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_m) { }
-        try {
-            var mod = _this.injector.get('DiagramsDiagramContextMenu');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_o) { }
-        try {
-            var mod = _this.injector.get('DiagramsLineRouting');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_p) { }
-        try {
-            var mod = _this.injector.get('DiagramsAvoidLineOverlapping');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_q) { }
-        try {
-            var mod = _this.injector.get('DiagramsConnectorEditing');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_r) { }
-        try {
-            var mod = _this.injector.get('DiagramsLineDistribution');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_s) { }
-        try {
-            var mod = _this.injector.get('DiagramsEj1Serialization');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_t) { }
-        try {
-            var mod = _this.injector.get('DiagramsFlowchartLayout');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_u) { }
-        _this.registerEvents(outputs$9);
-        _this.addTwoWay.call(_this, twoWays);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    DiagramComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    DiagramComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    DiagramComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    DiagramComponent.prototype.ngAfterContentChecked = function () {
-        this.tagObjects[0].instance = this.childLayers;
-        if (this.childCustomCursor) {
-            this.tagObjects[1].instance = this.childCustomCursor;
-        }
-        if (this.childConnectors) {
-            this.tagObjects[2].instance = this.childConnectors;
-        }
-        if (this.childNodes) {
-            this.tagObjects[3].instance = this.childNodes;
-        }
-        this.context.ngAfterContentChecked(this);
-    };
-    return DiagramComponent;
-}(ej2Diagrams.Diagram));
-exports.DiagramComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-diagram',
-                inputs: inputs,
-                outputs: outputs$9,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {
-                    childLayers: new core.ContentChild(LayersDirective),
-                    childCustomCursor: new core.ContentChild(CustomCursorsDirective),
-                    childConnectors: new core.ContentChild(ConnectorsDirective),
-                    childNodes: new core.ContentChild(NodesDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.DiagramComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.DiagramComponent.propDecorators = {
-    'annotationTemplate': [{ type: core.ContentChild, args: ['annotationTemplate',] },],
-    'nodeTemplate': [{ type: core.ContentChild, args: ['nodeTemplate',] },],
-    'userHandleTemplate': [{ type: core.ContentChild, args: ['userHandleTemplate',] },],
-};
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], exports.DiagramComponent.prototype, "annotationTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], exports.DiagramComponent.prototype, "nodeTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], exports.DiagramComponent.prototype, "userHandleTemplate", void 0);
-exports.DiagramComponent = __decorate([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.DiagramComponent);
-/**
- * NgModule definition for the Diagram component.
- */
-var DiagramModule = /** @class */ (function () {
-    function DiagramModule() {
-    }
-    return DiagramModule;
-}());
-DiagramModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.DiagramComponent,
-                    LayerDirective,
-                    LayersDirective,
-                    CustomCursorDirective,
-                    CustomCursorsDirective,
-                    ConnectorFixedUserHandleDirective,
-                    ConnectorFixedUserHandlesDirective,
-                    ConnectorAnnotationDirective,
-                    ConnectorAnnotationsDirective,
-                    ConnectorDirective,
-                    ConnectorsDirective,
-                    NodeFixedUserHandleDirective,
-                    NodeFixedUserHandlesDirective,
-                    NodeAnnotationDirective,
-                    NodeAnnotationsDirective,
-                    PortDirective,
-                    PortsDirective,
-                    NodeDirective,
-                    NodesDirective
-                ],
-                exports: [
-                    exports.DiagramComponent,
-                    LayerDirective,
-                    LayersDirective,
-                    CustomCursorDirective,
-                    CustomCursorsDirective,
-                    ConnectorFixedUserHandleDirective,
-                    ConnectorFixedUserHandlesDirective,
-                    ConnectorAnnotationDirective,
-                    ConnectorAnnotationsDirective,
-                    ConnectorDirective,
-                    ConnectorsDirective,
-                    NodeFixedUserHandleDirective,
-                    NodeFixedUserHandlesDirective,
-                    NodeAnnotationDirective,
-                    NodeAnnotationsDirective,
-                    PortDirective,
-                    PortsDirective,
-                    NodeDirective,
-                    NodesDirective
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-DiagramModule.ctorParameters = function () { return []; };
-var HierarchicalTreeService = { provide: 'DiagramsHierarchicalTree', useValue: ej2Diagrams.HierarchicalTree };
-var MindMapService = { provide: 'DiagramsMindMap', useValue: ej2Diagrams.MindMap };
-var RadialTreeService = { provide: 'DiagramsRadialTree', useValue: ej2Diagrams.RadialTree };
-var ComplexHierarchicalTreeService = { provide: 'DiagramsComplexHierarchicalTree', useValue: ej2Diagrams.ComplexHierarchicalTree };
-var DataBindingService = { provide: 'DiagramsDataBinding', useValue: ej2Diagrams.DataBinding };
-var SnappingService = { provide: 'DiagramsSnapping', useValue: ej2Diagrams.Snapping };
-var PrintAndExportService = { provide: 'DiagramsPrintAndExport', useValue: ej2Diagrams.PrintAndExport };
-var BpmnDiagramsService = { provide: 'DiagramsBpmnDiagrams', useValue: ej2Diagrams.BpmnDiagrams };
-var SymmetricLayoutService = { provide: 'DiagramsSymmetricLayout', useValue: ej2Diagrams.SymmetricLayout };
-var ConnectorBridgingService = { provide: 'DiagramsConnectorBridging', useValue: ej2Diagrams.ConnectorBridging };
-var UndoRedoService = { provide: 'DiagramsUndoRedo', useValue: ej2Diagrams.UndoRedo };
-var LayoutAnimationService = { provide: 'DiagramsLayoutAnimation', useValue: ej2Diagrams.LayoutAnimation };
-var DiagramContextMenuService = { provide: 'DiagramsDiagramContextMenu', useValue: ej2Diagrams.DiagramContextMenu };
-var LineRoutingService = { provide: 'DiagramsLineRouting', useValue: ej2Diagrams.LineRouting };
-var AvoidLineOverlappingService = { provide: 'DiagramsAvoidLineOverlapping', useValue: ej2Diagrams.AvoidLineOverlapping };
-var ConnectorEditingService = { provide: 'DiagramsConnectorEditing', useValue: ej2Diagrams.ConnectorEditing };
-var LineDistributionService = { provide: 'DiagramsLineDistribution', useValue: ej2Diagrams.LineDistribution };
-var Ej1SerializationService = { provide: 'DiagramsEj1Serialization', useValue: ej2Diagrams.Ej1Serialization };
-var FlowchartLayoutService = { provide: 'DiagramsFlowchartLayout', useValue: ej2Diagrams.FlowchartLayout };
-/**
- * NgModule definition for the Diagram component with providers.
- */
-var DiagramAllModule = /** @class */ (function () {
-    function DiagramAllModule() {
-    }
-    return DiagramAllModule;
-}());
-DiagramAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, DiagramModule],
-                exports: [
-                    DiagramModule
-                ],
-                providers: [
-                    HierarchicalTreeService,
-                    MindMapService,
-                    RadialTreeService,
-                    ComplexHierarchicalTreeService,
-                    DataBindingService,
-                    SnappingService,
-                    PrintAndExportService,
-                    BpmnDiagramsService,
-                    SymmetricLayoutService,
-                    ConnectorBridgingService,
-                    UndoRedoService,
-                    LayoutAnimationService,
-                    DiagramContextMenuService,
-                    LineRoutingService,
-                    AvoidLineOverlappingService,
-                    ConnectorEditingService,
-                    LineDistributionService,
-                    Ej1SerializationService,
-                    FlowchartLayoutService
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-DiagramAllModule.ctorParameters = function () { return []; };
-var input$9 = ['expanded', 'height', 'iconCss', 'id', 'symbols', 'title'];
-var outputs$10 = [];
-/**
- * Palette Directive
- * ```html
- * <e-palettes><e-palette></e-palette><e-palettes>
- * ```
- */
-var PaletteDirective = /** @class */ (function (_super) {
-    __extends(PaletteDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function PaletteDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$10);
-        _this.directivePropList = input$9;
-        return _this;
-    }
-    return PaletteDirective;
-}(ej2AngularBase.ComplexBase));
-PaletteDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'e-palettes>e-palette',
-                inputs: input$9,
-                outputs: outputs$10,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-PaletteDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Palette Array Directive
- */
-var PalettesDirective = /** @class */ (function (_super) {
-    __extends(PalettesDirective, _super);
-    function PalettesDirective() {
-        return _super.call(this, 'palettes') || this;
-    }
-    return PalettesDirective;
-}(ej2AngularBase.ArrayBase));
-PalettesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-symbolpalette>e-palettes',
-                queries: {
-                    children: new core.ContentChildren(PaletteDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-PalettesDirective.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$1 = ['accessKey', 'allowDrag', 'connectorDefaults', 'enableAnimation', 'enablePersistence', 'enableRtl', 'enableSearch', 'expandMode', 'filterSymbols', 'getConnectorDefaults', 'getNodeDefaults', 'getSymbolInfo', 'getSymbolTemplate', 'height', 'ignoreSymbolsOnSearch', 'locale', 'nodeDefaults', 'palettes', 'symbolDragSize', 'symbolHeight', 'symbolInfo', 'symbolMargin', 'symbolPreview', 'symbolWidth', 'width'];
-var outputs$11 = ['paletteExpanding', 'paletteSelectionChange'];
-var twoWays$1 = [''];
-/**
- * SymbolPalette Component
- * ```html
- * <ej-symbol-palette></ej-symbol-palette>
- * ```
- */
-exports.SymbolPaletteComponent = /** @class */ (function (_super) {
-    __extends(SymbolPaletteComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function SymbolPaletteComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.tags = ['palettes'];
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        try {
-            var mod = _this.injector.get('DiagramsBpmnDiagrams');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_a) { }
-        _this.registerEvents(outputs$11);
-        _this.addTwoWay.call(_this, twoWays$1);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    SymbolPaletteComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    SymbolPaletteComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    SymbolPaletteComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    SymbolPaletteComponent.prototype.ngAfterContentChecked = function () {
-        this.tagObjects[0].instance = this.childPalettes;
-        this.context.ngAfterContentChecked(this);
-    };
-    return SymbolPaletteComponent;
-}(ej2Diagrams.SymbolPalette));
-exports.SymbolPaletteComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-symbolpalette',
-                inputs: inputs$1,
-                outputs: outputs$11,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {
-                    childPalettes: new core.ContentChild(PalettesDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.SymbolPaletteComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.SymbolPaletteComponent = __decorate$1([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$1("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.SymbolPaletteComponent);
-/**
- * NgModule definition for the SymbolPalette component.
- */
-var SymbolPaletteModule = /** @class */ (function () {
-    function SymbolPaletteModule() {
-    }
-    return SymbolPaletteModule;
-}());
-SymbolPaletteModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.SymbolPaletteComponent,
-                    PaletteDirective,
-                    PalettesDirective
-                ],
-                exports: [
-                    exports.SymbolPaletteComponent,
-                    PaletteDirective,
-                    PalettesDirective
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-SymbolPaletteModule.ctorParameters = function () { return []; };
-/**
- * NgModule definition for the SymbolPalette component with providers.
- */
-var SymbolPaletteAllModule = /** @class */ (function () {
-    function SymbolPaletteAllModule() {
-    }
-    return SymbolPaletteAllModule;
-}());
-SymbolPaletteAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, SymbolPaletteModule],
-                exports: [
-                    SymbolPaletteModule
-                ],
-                providers: []
-            },] },
-];
-/**
- * @nocollapse
- */
-SymbolPaletteAllModule.ctorParameters = function () { return []; };
-var __decorate$2 = (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$2 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var inputs$2 = ['enablePersistence', 'enableRtl', 'height', 'locale', 'sourceID', 'width'];
-var outputs$12 = ['created'];
-var twoWays$2 = [''];
-/**
- * Overview Component
- * ```html
- * <ej-overview></ej-overview>
- * ```
- */
-exports.OverviewComponent = /** @class */ (function (_super) {
-    __extends(OverviewComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function OverviewComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.tags = [''];
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$12);
-        _this.addTwoWay.call(_this, twoWays$2);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    OverviewComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    OverviewComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    OverviewComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    OverviewComponent.prototype.ngAfterContentChecked = function () {
-        this.context.ngAfterContentChecked(this);
-    };
-    return OverviewComponent;
-}(ej2Diagrams.Overview));
-exports.OverviewComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-overview',
-                inputs: inputs$2,
-                outputs: outputs$12,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.OverviewComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.OverviewComponent = __decorate$2([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$2("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.OverviewComponent);
-/**
- * NgModule definition for the Overview component.
- */
-var OverviewModule = /** @class */ (function () {
-    function OverviewModule() {
-    }
-    return OverviewModule;
-}());
-OverviewModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.OverviewComponent
-                ],
-                exports: [
-                    exports.OverviewComponent
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-OverviewModule.ctorParameters = function () { return []; };
-/**
- * NgModule definition for the Overview component with providers.
- */
-var OverviewAllModule = /** @class */ (function () {
-    function OverviewAllModule() {
-    }
-    return OverviewAllModule;
-}());
-OverviewAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, OverviewModule],
-                exports: [
-                    OverviewModule
-                ],
-                providers: []
-            },] },
-];
-/**
- * @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 = ['addInfo', 'id', 'lock', 'objects', 'visible', 'zIndex'];
+var outputs = [];
+/**
+ * Layers Directive
+ * ```html
+ * <e-layers>
+ * <e-layer></e-layer>
+ * </e-layers>
+ * ```
+ */
+var LayerDirective = /** @class */ (function (_super) {
+    __extends(LayerDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function LayerDirective(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 LayerDirective;
+}(ej2AngularBase.ComplexBase));
+LayerDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-layers>e-layer',
+                inputs: input,
+                outputs: outputs,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+LayerDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Layer Array Directive
+ */
+var LayersDirective = /** @class */ (function (_super) {
+    __extends(LayersDirective, _super);
+    function LayersDirective() {
+        return _super.call(this, 'layers') || this;
+    }
+    return LayersDirective;
+}(ej2AngularBase.ArrayBase));
+LayersDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ej-diagram>e-layers',
+                queries: {
+                    children: new core.ContentChildren(LayerDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+LayersDirective.ctorParameters = function () { return []; };
+var input$1 = ['action', 'cursor'];
+var outputs$1 = [];
+/**
+ * Cursor Maps Directive
+ * ```html
+ * <e-cusrsormaps>
+ * <e-cursormap></e-cursormap>
+ * </e-cursormaps>
+ * ```
+ */
+var CustomCursorDirective = /** @class */ (function (_super) {
+    __extends(CustomCursorDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function CustomCursorDirective(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 CustomCursorDirective;
+}(ej2AngularBase.ComplexBase));
+CustomCursorDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-cursormaps>e-cursormap',
+                inputs: input$1,
+                outputs: outputs$1,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CustomCursorDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * CustomCursor Array Directive
+ */
+var CustomCursorsDirective = /** @class */ (function (_super) {
+    __extends(CustomCursorsDirective, _super);
+    function CustomCursorsDirective() {
+        return _super.call(this, 'customcursor') || this;
+    }
+    return CustomCursorsDirective;
+}(ej2AngularBase.ArrayBase));
+CustomCursorsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ej-diagram>e-cursormaps',
+                queries: {
+                    children: new core.ContentChildren(CustomCursorDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+CustomCursorsDirective.ctorParameters = function () { return []; };
+var input$2 = ['alignment', 'cornerRadius', 'displacement', 'fill', 'handleStrokeColor', 'handleStrokeWidth', 'height', 'iconStrokeColor', 'iconStrokeWidth', 'id', 'offset', 'padding', 'pathData', 'tooltip', 'visibility', 'width'];
+var outputs$2 = [];
+/**
+ * Connectors Directive
+ * ```html
+ * <e-connectors>
+ * <e-connector>
+ * <e-connector-fixeduserhandles>
+ * <e-connector-fixeduserhandle>
+ * </e-connector-fixeduserhandle>
+ * </e-connector-fixeduserhandles>
+ * </e-connector>
+ * </e-connectors>
+ * ```
+ */
+var ConnectorFixedUserHandleDirective = /** @class */ (function (_super) {
+    __extends(ConnectorFixedUserHandleDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ConnectorFixedUserHandleDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$2);
+        _this.directivePropList = input$2;
+        return _this;
+    }
+    return ConnectorFixedUserHandleDirective;
+}(ej2AngularBase.ComplexBase));
+ConnectorFixedUserHandleDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-connector>e-connector-fixeduserhandles>e-connector-fixeduserhandle',
+                inputs: input$2,
+                outputs: outputs$2,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorFixedUserHandleDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * ConnectorFixedUserHandle Array Directive
+ */
+var ConnectorFixedUserHandlesDirective = /** @class */ (function (_super) {
+    __extends(ConnectorFixedUserHandlesDirective, _super);
+    function ConnectorFixedUserHandlesDirective() {
+        return _super.call(this, 'fixeduserhandles') || this;
+    }
+    return ConnectorFixedUserHandlesDirective;
+}(ej2AngularBase.ArrayBase));
+ConnectorFixedUserHandlesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-connector>e-connector-fixeduserhandles',
+                queries: {
+                    children: new core.ContentChildren(ConnectorFixedUserHandleDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorFixedUserHandlesDirective.ctorParameters = function () { return []; };
+var input$3 = ['addInfo', 'alignment', 'annotationType', 'constraints', 'content', 'displacement', 'dragLimit', 'height', 'horizontalAlignment', 'hyperlink', 'id', 'margin', 'offset', 'rotateAngle', 'rotationReference', 'segmentAngle', 'style', 'template', 'tooltip', 'type', 'verticalAlignment', 'visibility', 'width'];
+var outputs$3 = [];
+/**
+ * Connectors Directive
+ * ```html
+ * <e-connectors>
+ * <e-connector>
+ * <e-connector-annotations>
+ * <e-connector-annotation>
+ * </e-connector-annotation>
+ * </e-connector-annotations>
+ * </e-connector>
+ * </e-connectors>
+ * ```
+ */
+var ConnectorAnnotationDirective = /** @class */ (function (_super) {
+    __extends(ConnectorAnnotationDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ConnectorAnnotationDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$3);
+        _this.directivePropList = input$3;
+        return _this;
+    }
+    return ConnectorAnnotationDirective;
+}(ej2AngularBase.ComplexBase));
+ConnectorAnnotationDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-connector>e-connector-annotations>e-connector-annotation',
+                inputs: input$3,
+                outputs: outputs$3,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorAnnotationDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * ConnectorAnnotation Array Directive
+ */
+var ConnectorAnnotationsDirective = /** @class */ (function (_super) {
+    __extends(ConnectorAnnotationsDirective, _super);
+    function ConnectorAnnotationsDirective() {
+        return _super.call(this, 'annotations') || this;
+    }
+    return ConnectorAnnotationsDirective;
+}(ej2AngularBase.ArrayBase));
+ConnectorAnnotationsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-connector>e-connector-annotations',
+                queries: {
+                    children: new core.ContentChildren(ConnectorAnnotationDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorAnnotationsDirective.ctorParameters = function () { return []; };
+var input$4 = ['addInfo', 'allowNodeOverlap', 'annotations', 'bezierSettings', 'bridgeSpace', 'connectionPadding', 'connectorSpacing', 'constraints', 'cornerRadius', 'dragSize', 'excludeFromLayout', 'fixedUserHandles', 'flip', 'flipMode', 'hitPadding', 'id', 'margin', 'maxSegmentThumb', 'ports', 'previewSize', 'segmentThumbShape', 'segmentThumbSize', 'segments', 'shape', 'sourceDecorator', 'sourceID', 'sourcePadding', 'sourcePoint', 'sourcePortID', 'style', 'symbolInfo', 'targetDecorator', 'targetID', 'targetPadding', 'targetPoint', 'targetPortID', 'tooltip', 'type', 'visible', 'wrapper', 'zIndex'];
+var outputs$4 = [];
+/**
+ * Connectors Directive
+ * ```html
+ * <e-connectors>
+ * <e-connector></e-connector>
+ * </e-connectors>
+ * ```
+ */
+var ConnectorDirective = /** @class */ (function (_super) {
+    __extends(ConnectorDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ConnectorDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['fixedUserHandles', 'annotations'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$4);
+        _this.directivePropList = input$4;
+        return _this;
+    }
+    return ConnectorDirective;
+}(ej2AngularBase.ComplexBase));
+ConnectorDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-connectors>e-connector',
+                inputs: input$4,
+                outputs: outputs$4,
+                queries: {
+                    childFixedUserHandles: new core.ContentChild(ConnectorFixedUserHandlesDirective),
+                    childAnnotations: new core.ContentChild(ConnectorAnnotationsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Connector Array Directive
+ */
+var ConnectorsDirective = /** @class */ (function (_super) {
+    __extends(ConnectorsDirective, _super);
+    function ConnectorsDirective() {
+        return _super.call(this, 'connectors') || this;
+    }
+    return ConnectorsDirective;
+}(ej2AngularBase.ArrayBase));
+ConnectorsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ej-diagram>e-connectors',
+                queries: {
+                    children: new core.ContentChildren(ConnectorDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ConnectorsDirective.ctorParameters = function () { return []; };
+var input$5 = ['cornerRadius', 'fill', 'handleStrokeColor', 'handleStrokeWidth', 'height', 'iconStrokeColor', 'iconStrokeWidth', 'id', 'margin', 'offset', 'padding', 'pathData', 'tooltip', 'visibility', 'width'];
+var outputs$5 = [];
+/**
+ * Nodes Directive
+ * ```html
+ * <e-nodes>
+ * <e-node>
+ * <e-node-fixeduserhandles>
+ * <e-node-fixeduserhandle>
+ * </e-node-fixeduserhandle>
+ * </e-node-fixeduserhandles>
+ * </e-node>
+ * </e-nodes>
+ * ```
+ */
+var NodeFixedUserHandleDirective = /** @class */ (function (_super) {
+    __extends(NodeFixedUserHandleDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function NodeFixedUserHandleDirective(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 NodeFixedUserHandleDirective;
+}(ej2AngularBase.ComplexBase));
+NodeFixedUserHandleDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-fixeduserhandles>e-node-fixeduserhandle',
+                inputs: input$5,
+                outputs: outputs$5,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodeFixedUserHandleDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * NodeFixedUserHandle Array Directive
+ */
+var NodeFixedUserHandlesDirective = /** @class */ (function (_super) {
+    __extends(NodeFixedUserHandlesDirective, _super);
+    function NodeFixedUserHandlesDirective() {
+        return _super.call(this, 'fixeduserhandles') || this;
+    }
+    return NodeFixedUserHandlesDirective;
+}(ej2AngularBase.ArrayBase));
+NodeFixedUserHandlesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-fixeduserhandles',
+                queries: {
+                    children: new core.ContentChildren(NodeFixedUserHandleDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodeFixedUserHandlesDirective.ctorParameters = function () { return []; };
+var input$6 = ['addInfo', 'annotationType', 'constraints', 'content', 'dragLimit', 'height', 'horizontalAlignment', 'hyperlink', 'id', 'margin', 'offset', 'rotateAngle', 'rotationReference', 'style', 'template', 'tooltip', 'type', 'verticalAlignment', 'visibility', 'width'];
+var outputs$6 = [];
+/**
+ * Nodes Directive
+ * ```html
+ * <e-nodes>
+ * <e-node>
+ * <e-node-annotations>
+ * <e-node-annotation>
+ * </e-node-annotation>
+ * </e-node-annotations>
+ * </e-node>
+ * </e-nodes>
+ * ```
+ */
+var NodeAnnotationDirective = /** @class */ (function (_super) {
+    __extends(NodeAnnotationDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function NodeAnnotationDirective(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 NodeAnnotationDirective;
+}(ej2AngularBase.ComplexBase));
+NodeAnnotationDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-annotations>e-node-annotation',
+                inputs: input$6,
+                outputs: outputs$6,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodeAnnotationDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * NodeAnnotation Array Directive
+ */
+var NodeAnnotationsDirective = /** @class */ (function (_super) {
+    __extends(NodeAnnotationsDirective, _super);
+    function NodeAnnotationsDirective() {
+        return _super.call(this, 'annotations') || this;
+    }
+    return NodeAnnotationsDirective;
+}(ej2AngularBase.ArrayBase));
+NodeAnnotationsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-annotations',
+                queries: {
+                    children: new core.ContentChildren(NodeAnnotationDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodeAnnotationsDirective.ctorParameters = function () { return []; };
+var input$7 = ['addInfo', 'connectionDirection', 'constraints', 'height', 'horizontalAlignment', 'id', 'inEdges', 'margin', 'offset', 'outEdges', 'pathData', 'shape', 'style', 'tooltip', 'verticalAlignment', 'visibility', 'width'];
+var outputs$7 = [];
+/**
+ * Nodes Directive
+ * ```html
+ * <e-nodes>
+ * <e-node>
+ * <e-node-ports>
+ * <e-node-port>
+ * </e-node-port>
+ * </e-node-ports>
+ * </e-node>
+ * </e-nodes>
+ * ```
+ */
+var PortDirective = /** @class */ (function (_super) {
+    __extends(PortDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function PortDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$7);
+        _this.directivePropList = input$7;
+        return _this;
+    }
+    return PortDirective;
+}(ej2AngularBase.ComplexBase));
+PortDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-ports>e-node-port',
+                inputs: input$7,
+                outputs: outputs$7,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+PortDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Port Array Directive
+ */
+var PortsDirective = /** @class */ (function (_super) {
+    __extends(PortsDirective, _super);
+    function PortsDirective() {
+        return _super.call(this, 'ports') || this;
+    }
+    return PortsDirective;
+}(ej2AngularBase.ArrayBase));
+PortsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-node>e-node-ports',
+                queries: {
+                    children: new core.ContentChildren(PortDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+PortsDirective.ctorParameters = function () { return []; };
+var input$8 = ['addInfo', 'annotations', 'backgroundColor', 'borderColor', 'borderWidth', 'branch', 'children', 'collapseIcon', 'columnIndex', 'columnSpan', 'columns', 'constraints', 'container', 'data', 'dragSize', 'excludeFromLayout', 'expandIcon', 'fixedUserHandles', 'flip', 'flipMode', 'height', 'horizontalAlignment', 'id', 'isExpanded', 'layoutInfo', 'margin', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'offsetX', 'offsetY', 'padding', 'pivot', 'ports', 'previewSize', 'rotateAngle', 'rowIndex', 'rowSpan', 'rows', 'shadow', 'shape', 'style', 'symbolInfo', 'tooltip', 'verticalAlignment', 'visible', 'width', 'wrapper', 'zIndex'];
+var outputs$8 = [];
+/**
+ * Nodes Directive
+ * ```html
+ * <e-nodes>
+ * <e-node></e-node>
+ * </e-nodes>
+ * ```
+ */
+var NodeDirective = /** @class */ (function (_super) {
+    __extends(NodeDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function NodeDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['fixedUserHandles', 'annotations', 'ports'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$8);
+        _this.directivePropList = input$8;
+        return _this;
+    }
+    return NodeDirective;
+}(ej2AngularBase.ComplexBase));
+NodeDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-nodes>e-node',
+                inputs: input$8,
+                outputs: outputs$8,
+                queries: {
+                    childFixedUserHandles: new core.ContentChild(NodeFixedUserHandlesDirective),
+                    childAnnotations: new core.ContentChild(NodeAnnotationsDirective),
+                    childPorts: new core.ContentChild(PortsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodeDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Node Array Directive
+ */
+var NodesDirective = /** @class */ (function (_super) {
+    __extends(NodesDirective, _super);
+    function NodesDirective() {
+        return _super.call(this, 'nodes') || this;
+    }
+    return NodesDirective;
+}(ej2AngularBase.ArrayBase));
+NodesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ej-diagram>e-nodes',
+                queries: {
+                    children: new core.ContentChildren(NodeDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+NodesDirective.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 inputs = ['addInfo', 'annotationTemplate', 'backgroundColor', 'bridgeDirection', 'commandManager', 'connectorDefaults', 'connectors', 'constraints', 'contextMenuSettings', 'customCursor', 'dataSourceSettings', 'diagramSettings', 'drawingObject', 'enableConnectorSplit', 'enablePersistence', 'enableRtl', 'fixedUserHandleTemplate', 'getConnectorDefaults', 'getCustomCursor', 'getCustomProperty', 'getCustomTool', 'getDescription', 'getNodeDefaults', 'height', 'historyManager', 'layers', 'layout', 'locale', 'mode', 'model', 'nodeDefaults', 'nodeTemplate', 'nodes', 'pageSettings', 'rulerSettings', 'scrollSettings', 'segmentThumbShape', 'segmentThumbSize', 'selectedItems', 'serializationSettings', 'setNodeTemplate', 'snapSettings', 'tool', 'tooltip', 'updateSelection', 'userHandleTemplate', 'width'];
+var outputs$9 = ['animationComplete', 'click', 'collectionChange', 'commandExecute', 'connectionChange', 'contextMenuBeforeItemRender', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataLoaded', 'doubleClick', 'dragEnter', 'dragLeave', 'dragOver', 'drop', 'elementDraw', 'expandStateChange', 'fixedUserHandleClick', 'historyChange', 'historyStateChange', 'keyDown', 'keyUp', 'layoutUpdated', 'load', 'loaded', 'mouseEnter', 'mouseLeave', 'mouseOver', 'mouseWheel', 'onFixedUserHandleMouseDown', 'onFixedUserHandleMouseEnter', 'onFixedUserHandleMouseLeave', 'onFixedUserHandleMouseUp', 'onImageLoad', 'onUserHandleMouseDown', 'onUserHandleMouseEnter', 'onUserHandleMouseLeave', 'onUserHandleMouseUp', 'positionChange', 'propertyChange', 'rotateChange', 'scrollChange', 'segmentChange', 'segmentCollectionChange', 'selectionChange', 'sizeChange', 'sourcePointChange', 'targetPointChange', 'textEdit'];
+var twoWays = [''];
+/**
+ * Diagram Component
+ * ```html
+ * <ej-diagram></ej-diagram>
+ * ```
+ */
+exports.DiagramComponent = /** @class */ (function (_super) {
+    __extends(DiagramComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function DiagramComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = ['layers', 'customCursor', 'connectors', 'nodes'];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        try {
+            var mod = _this.injector.get('DiagramsHierarchicalTree');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_a) { }
+        try {
+            var mod = _this.injector.get('DiagramsMindMap');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_b) { }
+        try {
+            var mod = _this.injector.get('DiagramsRadialTree');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_c) { }
+        try {
+            var mod = _this.injector.get('DiagramsComplexHierarchicalTree');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_d) { }
+        try {
+            var mod = _this.injector.get('DiagramsDataBinding');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_e) { }
+        try {
+            var mod = _this.injector.get('DiagramsSnapping');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_f) { }
+        try {
+            var mod = _this.injector.get('DiagramsPrintAndExport');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_g) { }
+        try {
+            var mod = _this.injector.get('DiagramsBpmnDiagrams');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_h) { }
+        try {
+            var mod = _this.injector.get('DiagramsSymmetricLayout');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_j) { }
+        try {
+            var mod = _this.injector.get('DiagramsConnectorBridging');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_k) { }
+        try {
+            var mod = _this.injector.get('DiagramsUndoRedo');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_l) { }
+        try {
+            var mod = _this.injector.get('DiagramsLayoutAnimation');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_m) { }
+        try {
+            var mod = _this.injector.get('DiagramsDiagramContextMenu');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_o) { }
+        try {
+            var mod = _this.injector.get('DiagramsLineRouting');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_p) { }
+        try {
+            var mod = _this.injector.get('DiagramsAvoidLineOverlapping');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_q) { }
+        try {
+            var mod = _this.injector.get('DiagramsConnectorEditing');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_r) { }
+        try {
+            var mod = _this.injector.get('DiagramsLineDistribution');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_s) { }
+        try {
+            var mod = _this.injector.get('DiagramsEj1Serialization');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_t) { }
+        try {
+            var mod = _this.injector.get('DiagramsFlowchartLayout');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_u) { }
+        _this.registerEvents(outputs$9);
+        _this.addTwoWay.call(_this, twoWays);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    DiagramComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    DiagramComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    DiagramComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    DiagramComponent.prototype.ngAfterContentChecked = function () {
+        this.tagObjects[0].instance = this.childLayers;
+        if (this.childCustomCursor) {
+            this.tagObjects[1].instance = this.childCustomCursor;
+        }
+        if (this.childConnectors) {
+            this.tagObjects[2].instance = this.childConnectors;
+        }
+        if (this.childNodes) {
+            this.tagObjects[3].instance = this.childNodes;
+        }
+        this.context.ngAfterContentChecked(this);
+    };
+    return DiagramComponent;
+}(ej2Diagrams.Diagram));
+exports.DiagramComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-diagram',
+                inputs: inputs,
+                outputs: outputs$9,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {
+                    childLayers: new core.ContentChild(LayersDirective),
+                    childCustomCursor: new core.ContentChild(CustomCursorsDirective),
+                    childConnectors: new core.ContentChild(ConnectorsDirective),
+                    childNodes: new core.ContentChild(NodesDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.DiagramComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.DiagramComponent.propDecorators = {
+    'annotationTemplate': [{ type: core.ContentChild, args: ['annotationTemplate',] },],
+    'nodeTemplate': [{ type: core.ContentChild, args: ['nodeTemplate',] },],
+    'userHandleTemplate': [{ type: core.ContentChild, args: ['userHandleTemplate',] },],
+};
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], exports.DiagramComponent.prototype, "annotationTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], exports.DiagramComponent.prototype, "nodeTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], exports.DiagramComponent.prototype, "userHandleTemplate", void 0);
+exports.DiagramComponent = __decorate([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.DiagramComponent);
+/**
+ * NgModule definition for the Diagram component.
+ */
+var DiagramModule = /** @class */ (function () {
+    function DiagramModule() {
+    }
+    return DiagramModule;
+}());
+DiagramModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.DiagramComponent,
+                    LayerDirective,
+                    LayersDirective,
+                    CustomCursorDirective,
+                    CustomCursorsDirective,
+                    ConnectorFixedUserHandleDirective,
+                    ConnectorFixedUserHandlesDirective,
+                    ConnectorAnnotationDirective,
+                    ConnectorAnnotationsDirective,
+                    ConnectorDirective,
+                    ConnectorsDirective,
+                    NodeFixedUserHandleDirective,
+                    NodeFixedUserHandlesDirective,
+                    NodeAnnotationDirective,
+                    NodeAnnotationsDirective,
+                    PortDirective,
+                    PortsDirective,
+                    NodeDirective,
+                    NodesDirective
+                ],
+                exports: [
+                    exports.DiagramComponent,
+                    LayerDirective,
+                    LayersDirective,
+                    CustomCursorDirective,
+                    CustomCursorsDirective,
+                    ConnectorFixedUserHandleDirective,
+                    ConnectorFixedUserHandlesDirective,
+                    ConnectorAnnotationDirective,
+                    ConnectorAnnotationsDirective,
+                    ConnectorDirective,
+                    ConnectorsDirective,
+                    NodeFixedUserHandleDirective,
+                    NodeFixedUserHandlesDirective,
+                    NodeAnnotationDirective,
+                    NodeAnnotationsDirective,
+                    PortDirective,
+                    PortsDirective,
+                    NodeDirective,
+                    NodesDirective
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DiagramModule.ctorParameters = function () { return []; };
+var HierarchicalTreeService = { provide: 'DiagramsHierarchicalTree', useValue: ej2Diagrams.HierarchicalTree };
+var MindMapService = { provide: 'DiagramsMindMap', useValue: ej2Diagrams.MindMap };
+var RadialTreeService = { provide: 'DiagramsRadialTree', useValue: ej2Diagrams.RadialTree };
+var ComplexHierarchicalTreeService = { provide: 'DiagramsComplexHierarchicalTree', useValue: ej2Diagrams.ComplexHierarchicalTree };
+var DataBindingService = { provide: 'DiagramsDataBinding', useValue: ej2Diagrams.DataBinding };
+var SnappingService = { provide: 'DiagramsSnapping', useValue: ej2Diagrams.Snapping };
+var PrintAndExportService = { provide: 'DiagramsPrintAndExport', useValue: ej2Diagrams.PrintAndExport };
+var BpmnDiagramsService = { provide: 'DiagramsBpmnDiagrams', useValue: ej2Diagrams.BpmnDiagrams };
+var SymmetricLayoutService = { provide: 'DiagramsSymmetricLayout', useValue: ej2Diagrams.SymmetricLayout };
+var ConnectorBridgingService = { provide: 'DiagramsConnectorBridging', useValue: ej2Diagrams.ConnectorBridging };
+var UndoRedoService = { provide: 'DiagramsUndoRedo', useValue: ej2Diagrams.UndoRedo };
+var LayoutAnimationService = { provide: 'DiagramsLayoutAnimation', useValue: ej2Diagrams.LayoutAnimation };
+var DiagramContextMenuService = { provide: 'DiagramsDiagramContextMenu', useValue: ej2Diagrams.DiagramContextMenu };
+var LineRoutingService = { provide: 'DiagramsLineRouting', useValue: ej2Diagrams.LineRouting };
+var AvoidLineOverlappingService = { provide: 'DiagramsAvoidLineOverlapping', useValue: ej2Diagrams.AvoidLineOverlapping };
+var ConnectorEditingService = { provide: 'DiagramsConnectorEditing', useValue: ej2Diagrams.ConnectorEditing };
+var LineDistributionService = { provide: 'DiagramsLineDistribution', useValue: ej2Diagrams.LineDistribution };
+var Ej1SerializationService = { provide: 'DiagramsEj1Serialization', useValue: ej2Diagrams.Ej1Serialization };
+var FlowchartLayoutService = { provide: 'DiagramsFlowchartLayout', useValue: ej2Diagrams.FlowchartLayout };
+/**
+ * NgModule definition for the Diagram component with providers.
+ */
+var DiagramAllModule = /** @class */ (function () {
+    function DiagramAllModule() {
+    }
+    return DiagramAllModule;
+}());
+DiagramAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, DiagramModule],
+                exports: [
+                    DiagramModule
+                ],
+                providers: [
+                    HierarchicalTreeService,
+                    MindMapService,
+                    RadialTreeService,
+                    ComplexHierarchicalTreeService,
+                    DataBindingService,
+                    SnappingService,
+                    PrintAndExportService,
+                    BpmnDiagramsService,
+                    SymmetricLayoutService,
+                    ConnectorBridgingService,
+                    UndoRedoService,
+                    LayoutAnimationService,
+                    DiagramContextMenuService,
+                    LineRoutingService,
+                    AvoidLineOverlappingService,
+                    ConnectorEditingService,
+                    LineDistributionService,
+                    Ej1SerializationService,
+                    FlowchartLayoutService
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+DiagramAllModule.ctorParameters = function () { return []; };
+var input$9 = ['expanded', 'height', 'iconCss', 'id', 'symbols', 'title'];
+var outputs$10 = [];
+/**
+ * Palette Directive
+ * ```html
+ * <e-palettes><e-palette></e-palette><e-palettes>
+ * ```
+ */
+var PaletteDirective = /** @class */ (function (_super) {
+    __extends(PaletteDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function PaletteDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$10);
+        _this.directivePropList = input$9;
+        return _this;
+    }
+    return PaletteDirective;
+}(ej2AngularBase.ComplexBase));
+PaletteDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-palettes>e-palette',
+                inputs: input$9,
+                outputs: outputs$10,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+PaletteDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Palette Array Directive
+ */
+var PalettesDirective = /** @class */ (function (_super) {
+    __extends(PalettesDirective, _super);
+    function PalettesDirective() {
+        return _super.call(this, 'palettes') || this;
+    }
+    return PalettesDirective;
+}(ej2AngularBase.ArrayBase));
+PalettesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-symbolpalette>e-palettes',
+                queries: {
+                    children: new core.ContentChildren(PaletteDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+PalettesDirective.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$1 = ['accessKey', 'allowDrag', 'connectorDefaults', 'enableAnimation', 'enablePersistence', 'enableRtl', 'enableSearch', 'expandMode', 'filterSymbols', 'getConnectorDefaults', 'getNodeDefaults', 'getSymbolInfo', 'getSymbolTemplate', 'height', 'ignoreSymbolsOnSearch', 'locale', 'nodeDefaults', 'palettes', 'symbolDragSize', 'symbolHeight', 'symbolInfo', 'symbolMargin', 'symbolPreview', 'symbolWidth', 'width'];
+var outputs$11 = ['paletteExpanding', 'paletteSelectionChange'];
+var twoWays$1 = [''];
+/**
+ * SymbolPalette Component
+ * ```html
+ * <ej-symbol-palette></ej-symbol-palette>
+ * ```
+ */
+exports.SymbolPaletteComponent = /** @class */ (function (_super) {
+    __extends(SymbolPaletteComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function SymbolPaletteComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = ['palettes'];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        try {
+            var mod = _this.injector.get('DiagramsBpmnDiagrams');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_a) { }
+        _this.registerEvents(outputs$11);
+        _this.addTwoWay.call(_this, twoWays$1);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    SymbolPaletteComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    SymbolPaletteComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    SymbolPaletteComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    SymbolPaletteComponent.prototype.ngAfterContentChecked = function () {
+        this.tagObjects[0].instance = this.childPalettes;
+        this.context.ngAfterContentChecked(this);
+    };
+    return SymbolPaletteComponent;
+}(ej2Diagrams.SymbolPalette));
+exports.SymbolPaletteComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-symbolpalette',
+                inputs: inputs$1,
+                outputs: outputs$11,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {
+                    childPalettes: new core.ContentChild(PalettesDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.SymbolPaletteComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.SymbolPaletteComponent = __decorate$1([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$1("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.SymbolPaletteComponent);
+/**
+ * NgModule definition for the SymbolPalette component.
+ */
+var SymbolPaletteModule = /** @class */ (function () {
+    function SymbolPaletteModule() {
+    }
+    return SymbolPaletteModule;
+}());
+SymbolPaletteModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.SymbolPaletteComponent,
+                    PaletteDirective,
+                    PalettesDirective
+                ],
+                exports: [
+                    exports.SymbolPaletteComponent,
+                    PaletteDirective,
+                    PalettesDirective
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+SymbolPaletteModule.ctorParameters = function () { return []; };
+/**
+ * NgModule definition for the SymbolPalette component with providers.
+ */
+var SymbolPaletteAllModule = /** @class */ (function () {
+    function SymbolPaletteAllModule() {
+    }
+    return SymbolPaletteAllModule;
+}());
+SymbolPaletteAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, SymbolPaletteModule],
+                exports: [
+                    SymbolPaletteModule
+                ],
+                providers: []
+            },] },
+];
+/**
+ * @nocollapse
+ */
+SymbolPaletteAllModule.ctorParameters = function () { return []; };
+var __decorate$2 = (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$2 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var inputs$2 = ['enablePersistence', 'enableRtl', 'height', 'locale', 'sourceID', 'width'];
+var outputs$12 = ['created'];
+var twoWays$2 = [''];
+/**
+ * Overview Component
+ * ```html
+ * <ej-overview></ej-overview>
+ * ```
+ */
+exports.OverviewComponent = /** @class */ (function (_super) {
+    __extends(OverviewComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function OverviewComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = [''];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        _this.registerEvents(outputs$12);
+        _this.addTwoWay.call(_this, twoWays$2);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    OverviewComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    OverviewComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    OverviewComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    OverviewComponent.prototype.ngAfterContentChecked = function () {
+        this.context.ngAfterContentChecked(this);
+    };
+    return OverviewComponent;
+}(ej2Diagrams.Overview));
+exports.OverviewComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-overview',
+                inputs: inputs$2,
+                outputs: outputs$12,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.OverviewComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.OverviewComponent = __decorate$2([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$2("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.OverviewComponent);
+/**
+ * NgModule definition for the Overview component.
+ */
+var OverviewModule = /** @class */ (function () {
+    function OverviewModule() {
+    }
+    return OverviewModule;
+}());
+OverviewModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.OverviewComponent
+                ],
+                exports: [
+                    exports.OverviewComponent
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+OverviewModule.ctorParameters = function () { return []; };
+/**
+ * NgModule definition for the Overview component with providers.
+ */
+var OverviewAllModule = /** @class */ (function () {
+    function OverviewAllModule() {
+    }
+    return OverviewAllModule;
+}());
+OverviewAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, OverviewModule],
+                exports: [
+                    OverviewModule
+                ],
+                providers: []
+            },] },
+];
+/**
+ * @nocollapse
+ */
 OverviewAllModule.ctorParameters = function () { return []; };
 
 exports.LayerDirective = LayerDirective;
@@ -1457,7 +1457,7 @@ exports.DiagramElement = ej2Diagrams.DiagramElement;
 exports.PathElement = ej2Diagrams.PathElement;
 exports.ImageElement = ej2Diagrams.ImageElement;
 exports.TextElement = ej2Diagrams.TextElement;
-exports.Container = ej2Diagrams.Container;
+exports.GroupableView = ej2Diagrams.GroupableView;
 exports.Canvas = ej2Diagrams.Canvas;
 exports.GridPanel = ej2Diagrams.GridPanel;
 exports.RowDefinition = ej2Diagrams.RowDefinition;
@@ -1568,6 +1568,7 @@ exports.findPortIndex = ej2Diagrams.findPortIndex;
 exports.getObjectFromCollection = ej2Diagrams.getObjectFromCollection;
 exports.scaleElement = ej2Diagrams.scaleElement;
 exports.arrangeChild = ej2Diagrams.arrangeChild;
+exports.sortNodeCollection = ej2Diagrams.sortNodeCollection;
 exports.insertObject = ej2Diagrams.insertObject;
 exports.getElement = ej2Diagrams.getElement;
 exports.getCollectionChangeEventArguements = ej2Diagrams.getCollectionChangeEventArguements;
@@ -1649,6 +1650,7 @@ exports.Header = ej2Diagrams.Header;
 exports.Lane = ej2Diagrams.Lane;
 exports.Phase = ej2Diagrams.Phase;
 exports.SwimLane = ej2Diagrams.SwimLane;
+exports.Container = ej2Diagrams.Container;
 exports.ChildContainer = ej2Diagrams.ChildContainer;
 exports.Selector = ej2Diagrams.Selector;
 exports.BpmnDiagrams = ej2Diagrams.BpmnDiagrams;
@@ -1747,6 +1749,14 @@ exports.CommandManager = ej2Diagrams.CommandManager;
 exports.ContextMenuSettings = ej2Diagrams.ContextMenuSettings;
 exports.CustomCursorAction = ej2Diagrams.CustomCursorAction;
 exports.DataMappingItems = ej2Diagrams.DataMappingItems;
+exports.UmlSequenceMessageType = ej2Diagrams.UmlSequenceMessageType;
+exports.UmlSequenceFragmentType = ej2Diagrams.UmlSequenceFragmentType;
+exports.UmlSequenceActivationBox = ej2Diagrams.UmlSequenceActivationBox;
+exports.UmlSequenceParticipant = ej2Diagrams.UmlSequenceParticipant;
+exports.UmlSequenceMessage = ej2Diagrams.UmlSequenceMessage;
+exports.UmlSequenceFragmentCondition = ej2Diagrams.UmlSequenceFragmentCondition;
+exports.UmlSequenceFragment = ej2Diagrams.UmlSequenceFragment;
+exports.UmlSequenceDiagram = ej2Diagrams.UmlSequenceDiagram;
 exports.FlowchartLayoutSettings = ej2Diagrams.FlowchartLayoutSettings;
 exports.Layout = ej2Diagrams.Layout;
 exports.MindMap = ej2Diagrams.MindMap;