devextreme-angular/fesm2022/devextreme-angular-ui-diagram.mjs.map

Angular UI and visualization components based on DevExtreme widgets

{"version":3,"file":"devextreme-angular-ui-diagram.mjs","sources":["../../../dist/ui/diagram/index.ts","../../../dist/ui/diagram/devextreme-angular-ui-diagram.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 25.1.4\n * Build date: Tue Aug 05 2025\n *\n * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED\n *\n * This software may be modified and distributed under the terms\n * of the MIT license. See the LICENSE file in the root of the project for details.\n *\n * https://github.com/DevExpress/devextreme-angular\n */\n\n/* tslint:disable:max-line-length */\r\n\r\n\r\nimport {\r\n    TransferState,\r\n    Component,\r\n    NgModule,\r\n    ElementRef,\r\n    NgZone,\r\n    PLATFORM_ID,\r\n    Inject,\r\n\r\n    Input,\r\n    Output,\r\n    OnDestroy,\r\n    EventEmitter,\r\n    OnChanges,\r\n    DoCheck,\r\n    SimpleChanges,\r\n    ContentChildren,\r\n    QueryList\r\n} from '@angular/core';\r\n\r\n\r\nimport DataSource from 'devextreme/data/data_source';\r\nimport { AutoZoomMode, Command, CustomCommand, ShapeCategory, ToolboxDisplayMode, ShapeType, ConnectorLineEnd, ConnectorLineType, DataLayoutType, ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, OptionChangedEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, SelectionChangedEvent, PanelVisibility, Units } from 'devextreme/ui/diagram';\r\nimport { DataSourceOptions } from 'devextreme/data/data_source';\r\nimport { Store } from 'devextreme/data/store';\r\nimport { Orientation, PageOrientation } from 'devextreme/common';\r\n\r\nimport DxDiagram from 'devextreme/ui/diagram';\r\n\r\n\r\nimport {\r\n    DxComponent,\r\n    DxTemplateHost,\r\n    DxIntegrationModule,\r\n    DxTemplateModule,\r\n    NestedOptionHost,\r\n    IterableDifferHelper,\r\n    WatcherHelper\r\n} from 'devextreme-angular/core';\r\n\r\nimport { DxoContextMenuModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiCommandModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiItemModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoContextToolboxModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiCustomShapeModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiConnectionPointModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoDefaultItemPropertiesModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoEdgesModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoEditingModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoExportModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoGridSizeModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoHistoryToolbarModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoMainToolbarModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoNodesModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoAutoLayoutModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoPageSizeModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoPropertiesPanelModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiTabModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiGroupModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoToolboxModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoViewToolbarModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoZoomLevelModule } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxoDiagramAutoLayoutModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramCommandModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramCommandItemModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramConnectionPointModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramContextMenuModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramContextToolboxModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramCustomShapeModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramDefaultItemPropertiesModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramEdgesModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramEditingModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramExportModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramGridSizeModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramGroupModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramHistoryToolbarModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramItemModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramMainToolbarModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramNodesModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramPageSizeModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramPageSizeItemModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramPropertiesPanelModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramTabModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramTabGroupModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramToolboxModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxiDiagramToolboxGroupModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramViewToolbarModule } from 'devextreme-angular/ui/diagram/nested';\r\nimport { DxoDiagramZoomLevelModule } from 'devextreme-angular/ui/diagram/nested';\r\n\r\nimport { DxiCustomShapeComponent } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxiDiagramCustomShapeComponent } from 'devextreme-angular/ui/diagram/nested';\r\n\r\n\r\n/**\r\n * The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.\r\n\r\n */\r\n@Component({\r\n    selector: 'dx-diagram',\r\n    standalone: true,\r\n    template: '',\r\n    host: { ngSkipHydration: 'true' },\r\n    imports: [ DxIntegrationModule ],\r\n    providers: [\r\n        DxTemplateHost,\r\n        WatcherHelper,\r\n        NestedOptionHost,\r\n        IterableDifferHelper\r\n    ]\r\n})\r\nexport class DxDiagramComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {\r\n    instance: DxDiagram = null;\r\n\r\n    /**\r\n     * Specifies how the Diagram UI component automatically zooms the work area.\r\n    \r\n     */\r\n    @Input()\r\n    get autoZoomMode(): AutoZoomMode {\r\n        return this._getOption('autoZoomMode');\r\n    }\r\n    set autoZoomMode(value: AutoZoomMode) {\r\n        this._setOption('autoZoomMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the context menu&apos;s settings.\r\n    \r\n     */\r\n    @Input()\r\n    get contextMenu(): { commands?: Array<Command | CustomCommand>, enabled?: boolean } {\r\n        return this._getOption('contextMenu');\r\n    }\r\n    set contextMenu(value: { commands?: Array<Command | CustomCommand>, enabled?: boolean }) {\r\n        this._setOption('contextMenu', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the context toolbox&apos;s settings.\r\n    \r\n     */\r\n    @Input()\r\n    get contextToolbox(): { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType>, width?: number } {\r\n        return this._getOption('contextToolbox');\r\n    }\r\n    set contextToolbox(value: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType>, width?: number }) {\r\n        this._setOption('contextToolbox', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Provide access to an array of custom shapes.\r\n    \r\n     */\r\n    @Input()\r\n    get customShapes(): { allowEditImage?: boolean, allowEditText?: boolean, allowResize?: boolean, backgroundImageHeight?: number, backgroundImageLeft?: number, backgroundImageToolboxUrl?: string, backgroundImageTop?: number, backgroundImageUrl?: string, backgroundImageWidth?: number, baseType?: ShapeType | string, category?: string, connectionPoints?: { x?: number, y?: number }[], defaultHeight?: number, defaultImageUrl?: string, defaultText?: string, defaultWidth?: number, imageHeight?: number, imageLeft?: number, imageTop?: number, imageWidth?: number, keepRatioOnAutoSize?: boolean, maxHeight?: number, maxWidth?: number, minHeight?: number, minWidth?: number, template?: any, templateHeight?: any, templateLeft?: any, templateTop?: any, templateWidth?: any, textHeight?: number, textLeft?: number, textTop?: number, textWidth?: number, title?: string, toolboxTemplate?: any, toolboxWidthToHeightRatio?: number, type?: string }[] {\r\n        return this._getOption('customShapes');\r\n    }\r\n    set customShapes(value: { allowEditImage?: boolean, allowEditText?: boolean, allowResize?: boolean, backgroundImageHeight?: number, backgroundImageLeft?: number, backgroundImageToolboxUrl?: string, backgroundImageTop?: number, backgroundImageUrl?: string, backgroundImageWidth?: number, baseType?: ShapeType | string, category?: string, connectionPoints?: { x?: number, y?: number }[], defaultHeight?: number, defaultImageUrl?: string, defaultText?: string, defaultWidth?: number, imageHeight?: number, imageLeft?: number, imageTop?: number, imageWidth?: number, keepRatioOnAutoSize?: boolean, maxHeight?: number, maxWidth?: number, minHeight?: number, minWidth?: number, template?: any, templateHeight?: any, templateLeft?: any, templateTop?: any, templateWidth?: any, textHeight?: number, textLeft?: number, textTop?: number, textWidth?: number, title?: string, toolboxTemplate?: any, toolboxWidthToHeightRatio?: number, type?: string }[]) {\r\n        this._setOption('customShapes', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a custom template for shapes.\r\n    \r\n     */\r\n    @Input()\r\n    get customShapeTemplate(): any {\r\n        return this._getOption('customShapeTemplate');\r\n    }\r\n    set customShapeTemplate(value: any) {\r\n        this._setOption('customShapeTemplate', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a custom template for shapes in the toolbox.\r\n    \r\n     */\r\n    @Input()\r\n    get customShapeToolboxTemplate(): any {\r\n        return this._getOption('customShapeToolboxTemplate');\r\n    }\r\n    set customShapeToolboxTemplate(value: any) {\r\n        this._setOption('customShapeToolboxTemplate', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures default item properties.\r\n    \r\n     */\r\n    @Input()\r\n    get defaultItemProperties(): { connectorLineEnd?: ConnectorLineEnd, connectorLineStart?: ConnectorLineEnd, connectorLineType?: ConnectorLineType, shapeMaxHeight?: number | undefined, shapeMaxWidth?: number | undefined, shapeMinHeight?: number | undefined, shapeMinWidth?: number | undefined, style?: Record<string, any>, textStyle?: Record<string, any> } {\r\n        return this._getOption('defaultItemProperties');\r\n    }\r\n    set defaultItemProperties(value: { connectorLineEnd?: ConnectorLineEnd, connectorLineStart?: ConnectorLineEnd, connectorLineType?: ConnectorLineType, shapeMaxHeight?: number | undefined, shapeMaxWidth?: number | undefined, shapeMinHeight?: number | undefined, shapeMinWidth?: number | undefined, style?: Record<string, any>, textStyle?: Record<string, any> }) {\r\n        this._setOption('defaultItemProperties', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component responds to user interaction.\r\n    \r\n     */\r\n    @Input()\r\n    get disabled(): boolean {\r\n        return this._getOption('disabled');\r\n    }\r\n    set disabled(value: boolean) {\r\n        this._setOption('disabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.\r\n    \r\n     */\r\n    @Input()\r\n    get edges(): { customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, fromExpr?: ((data: any, value: any) => any) | string, fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined, fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, lineTypeExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, pointsExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string | undefined, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, toExpr?: ((data: any, value: any) => any) | string, toLineEndExpr?: ((data: any, value: any) => any) | string | undefined, toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined } {\r\n        return this._getOption('edges');\r\n    }\r\n    set edges(value: { customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, fromExpr?: ((data: any, value: any) => any) | string, fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined, fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, lineTypeExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, pointsExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string | undefined, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, toExpr?: ((data: any, value: any) => any) | string, toLineEndExpr?: ((data: any, value: any) => any) | string | undefined, toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined }) {\r\n        this._setOption('edges', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies which editing operations a user can perform.\r\n    \r\n     */\r\n    @Input()\r\n    get editing(): { allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean } {\r\n        return this._getOption('editing');\r\n    }\r\n    set editing(value: { allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean }) {\r\n        this._setOption('editing', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\r\n    \r\n     */\r\n    @Input()\r\n    get elementAttr(): Record<string, any> {\r\n        return this._getOption('elementAttr');\r\n    }\r\n    set elementAttr(value: Record<string, any>) {\r\n        this._setOption('elementAttr', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures export settings.\r\n    \r\n     */\r\n    @Input()\r\n    get export(): { fileName?: string } {\r\n        return this._getOption('export');\r\n    }\r\n    set export(value: { fileName?: string }) {\r\n        this._setOption('export', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether or not to display the UI component in full-screen mode.\r\n    \r\n     */\r\n    @Input()\r\n    get fullScreen(): boolean {\r\n        return this._getOption('fullScreen');\r\n    }\r\n    set fullScreen(value: boolean) {\r\n        this._setOption('fullScreen', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the grid pitch.\r\n    \r\n     */\r\n    @Input()\r\n    get gridSize(): number | { items?: Array<number>, value?: number } {\r\n        return this._getOption('gridSize');\r\n    }\r\n    set gridSize(value: number | { items?: Array<number>, value?: number }) {\r\n        this._setOption('gridSize', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Indicates whether diagram content has unsaved changes.\r\n    \r\n     */\r\n    @Input()\r\n    get hasChanges(): boolean {\r\n        return this._getOption('hasChanges');\r\n    }\r\n    set hasChanges(value: boolean) {\r\n        this._setOption('hasChanges', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the UI component&apos;s height.\r\n    \r\n     */\r\n    @Input()\r\n    get height(): number | string | undefined {\r\n        return this._getOption('height');\r\n    }\r\n    set height(value: number | string | undefined) {\r\n        this._setOption('height', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the history toolbar&apos;s settings.\r\n    \r\n     */\r\n    @Input()\r\n    get historyToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\r\n        return this._getOption('historyToolbar');\r\n    }\r\n    set historyToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\r\n        this._setOption('historyToolbar', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the main toolbar settings.\r\n    \r\n     */\r\n    @Input()\r\n    get mainToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\r\n        return this._getOption('mainToolbar');\r\n    }\r\n    set mainToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\r\n        this._setOption('mainToolbar', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.\r\n    \r\n     */\r\n    @Input()\r\n    get nodes(): { autoLayout?: DataLayoutType | { orientation?: Orientation, type?: DataLayoutType }, autoSizeEnabled?: boolean, containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined, containerKeyExpr?: ((data: any, value: any) => any) | string, customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, heightExpr?: ((data: any, value: any) => any) | string | undefined, imageUrlExpr?: ((data: any, value: any) => any) | string | undefined, itemsExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, leftExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, parentKeyExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, topExpr?: ((data: any, value: any) => any) | string | undefined, typeExpr?: ((data: any, value: any) => any) | string, widthExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined } {\r\n        return this._getOption('nodes');\r\n    }\r\n    set nodes(value: { autoLayout?: DataLayoutType | { orientation?: Orientation, type?: DataLayoutType }, autoSizeEnabled?: boolean, containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined, containerKeyExpr?: ((data: any, value: any) => any) | string, customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, heightExpr?: ((data: any, value: any) => any) | string | undefined, imageUrlExpr?: ((data: any, value: any) => any) | string | undefined, itemsExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, leftExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, parentKeyExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, topExpr?: ((data: any, value: any) => any) | string | undefined, typeExpr?: ((data: any, value: any) => any) | string, widthExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined }) {\r\n        this._setOption('nodes', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the color of a diagram page.\r\n    \r\n     */\r\n    @Input()\r\n    get pageColor(): string {\r\n        return this._getOption('pageColor');\r\n    }\r\n    set pageColor(value: string) {\r\n        this._setOption('pageColor', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the page orientation.\r\n    \r\n     */\r\n    @Input()\r\n    get pageOrientation(): PageOrientation {\r\n        return this._getOption('pageOrientation');\r\n    }\r\n    set pageOrientation(value: PageOrientation) {\r\n        this._setOption('pageOrientation', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a size of pages.\r\n    \r\n     */\r\n    @Input()\r\n    get pageSize(): { height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number } {\r\n        return this._getOption('pageSize');\r\n    }\r\n    set pageSize(value: { height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number }) {\r\n        this._setOption('pageSize', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the Properties panel settings.\r\n    \r\n     */\r\n    @Input()\r\n    get propertiesPanel(): { tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility } {\r\n        return this._getOption('propertiesPanel');\r\n    }\r\n    set propertiesPanel(value: { tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility }) {\r\n        this._setOption('propertiesPanel', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the diagram is read-only.\r\n    \r\n     */\r\n    @Input()\r\n    get readOnly(): boolean {\r\n        return this._getOption('readOnly');\r\n    }\r\n    set readOnly(value: boolean) {\r\n        this._setOption('readOnly', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Switches the UI component to a right-to-left representation.\r\n    \r\n     */\r\n    @Input()\r\n    get rtlEnabled(): boolean {\r\n        return this._getOption('rtlEnabled');\r\n    }\r\n    set rtlEnabled(value: boolean) {\r\n        this._setOption('rtlEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether grid lines are visible.\r\n    \r\n     */\r\n    @Input()\r\n    get showGrid(): boolean {\r\n        return this._getOption('showGrid');\r\n    }\r\n    set showGrid(value: boolean) {\r\n        this._setOption('showGrid', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Switch the Diagram UI component to simple view mode.\r\n    \r\n     */\r\n    @Input()\r\n    get simpleView(): boolean {\r\n        return this._getOption('simpleView');\r\n    }\r\n    set simpleView(value: boolean) {\r\n        this._setOption('simpleView', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether diagram elements should snap to grid lines.\r\n    \r\n     */\r\n    @Input()\r\n    get snapToGrid(): boolean {\r\n        return this._getOption('snapToGrid');\r\n    }\r\n    set snapToGrid(value: boolean) {\r\n        this._setOption('snapToGrid', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the toolbox settings.\r\n    \r\n     */\r\n    @Input()\r\n    get toolbox(): { groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined } {\r\n        return this._getOption('toolbox');\r\n    }\r\n    set toolbox(value: { groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined }) {\r\n        this._setOption('toolbox', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the measurement unit for size properties.\r\n    \r\n     */\r\n    @Input()\r\n    get units(): Units {\r\n        return this._getOption('units');\r\n    }\r\n    set units(value: Units) {\r\n        this._setOption('units', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether or not the UI component uses native scrolling.\r\n    \r\n     */\r\n    @Input()\r\n    get useNativeScrolling(): boolean {\r\n        return this._getOption('useNativeScrolling');\r\n    }\r\n    set useNativeScrolling(value: boolean) {\r\n        this._setOption('useNativeScrolling', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the view toolbar settings.\r\n    \r\n     */\r\n    @Input()\r\n    get viewToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\r\n        return this._getOption('viewToolbar');\r\n    }\r\n    set viewToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\r\n        this._setOption('viewToolbar', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the measurement unit that is displayed in user interface elements.\r\n    \r\n     */\r\n    @Input()\r\n    get viewUnits(): Units {\r\n        return this._getOption('viewUnits');\r\n    }\r\n    set viewUnits(value: Units) {\r\n        this._setOption('viewUnits', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component is visible.\r\n    \r\n     */\r\n    @Input()\r\n    get visible(): boolean {\r\n        return this._getOption('visible');\r\n    }\r\n    set visible(value: boolean) {\r\n        this._setOption('visible', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the UI component&apos;s width.\r\n    \r\n     */\r\n    @Input()\r\n    get width(): number | string | undefined {\r\n        return this._getOption('width');\r\n    }\r\n    set width(value: number | string | undefined) {\r\n        this._setOption('width', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the zoom level.\r\n    \r\n     */\r\n    @Input()\r\n    get zoomLevel(): number | { items?: Array<number>, value?: number | undefined } {\r\n        return this._getOption('zoomLevel');\r\n    }\r\n    set zoomLevel(value: number | { items?: Array<number>, value?: number | undefined }) {\r\n        this._setOption('zoomLevel', value);\r\n    }\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component is rendered and each time the component is repainted.\r\n    \r\n    \r\n     */\r\n    @Output() onContentReady: EventEmitter<ContentReadyEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after a custom command item was clicked and allows you to implement the custom command&apos;s logic.\r\n    \r\n    \r\n     */\r\n    @Output() onCustomCommand: EventEmitter<CustomCommandEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed before the UI component is disposed of.\r\n    \r\n    \r\n     */\r\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\r\n\r\n    /**\r\n    \r\n     * A function used in JavaScript frameworks to save the UI component instance.\r\n    \r\n    \r\n     */\r\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after a shape or connector is clicked.\r\n    \r\n    \r\n     */\r\n    @Output() onItemClick: EventEmitter<ItemClickEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after a shape or connector is double-clicked.\r\n    \r\n    \r\n     */\r\n    @Output() onItemDblClick: EventEmitter<ItemDblClickEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after a UI component property is changed.\r\n    \r\n    \r\n     */\r\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that allows you to prohibit an edit operation at run time.\r\n    \r\n    \r\n     */\r\n    @Output() onRequestEditOperation: EventEmitter<RequestEditOperationEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded.\r\n    \r\n    \r\n     */\r\n    @Output() onRequestLayoutUpdate: EventEmitter<RequestLayoutUpdateEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after the selection is changed in the Diagram.\r\n    \r\n    \r\n     */\r\n    @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() autoZoomModeChange: EventEmitter<AutoZoomMode>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() contextMenuChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, enabled?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() contextToolboxChange: EventEmitter<{ category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType>, width?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customShapesChange: EventEmitter<{ allowEditImage?: boolean, allowEditText?: boolean, allowResize?: boolean, backgroundImageHeight?: number, backgroundImageLeft?: number, backgroundImageToolboxUrl?: string, backgroundImageTop?: number, backgroundImageUrl?: string, backgroundImageWidth?: number, baseType?: ShapeType | string, category?: string, connectionPoints?: { x?: number, y?: number }[], defaultHeight?: number, defaultImageUrl?: string, defaultText?: string, defaultWidth?: number, imageHeight?: number, imageLeft?: number, imageTop?: number, imageWidth?: number, keepRatioOnAutoSize?: boolean, maxHeight?: number, maxWidth?: number, minHeight?: number, minWidth?: number, template?: any, templateHeight?: any, templateLeft?: any, templateTop?: any, templateWidth?: any, textHeight?: number, textLeft?: number, textTop?: number, textWidth?: number, title?: string, toolboxTemplate?: any, toolboxWidthToHeightRatio?: number, type?: string }[]>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customShapeTemplateChange: EventEmitter<any>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customShapeToolboxTemplateChange: EventEmitter<any>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() defaultItemPropertiesChange: EventEmitter<{ connectorLineEnd?: ConnectorLineEnd, connectorLineStart?: ConnectorLineEnd, connectorLineType?: ConnectorLineType, shapeMaxHeight?: number | undefined, shapeMaxWidth?: number | undefined, shapeMinHeight?: number | undefined, shapeMinWidth?: number | undefined, style?: Record<string, any>, textStyle?: Record<string, any> }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() disabledChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() edgesChange: EventEmitter<{ customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, fromExpr?: ((data: any, value: any) => any) | string, fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined, fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, lineTypeExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, pointsExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string | undefined, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, toExpr?: ((data: any, value: any) => any) | string, toLineEndExpr?: ((data: any, value: any) => any) | string | undefined, toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() editingChange: EventEmitter<{ allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() exportChange: EventEmitter<{ fileName?: string }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() fullScreenChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() gridSizeChange: EventEmitter<number | { items?: Array<number>, value?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() hasChangesChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() heightChange: EventEmitter<number | string | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() historyToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() mainToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() nodesChange: EventEmitter<{ autoLayout?: DataLayoutType | { orientation?: Orientation, type?: DataLayoutType }, autoSizeEnabled?: boolean, containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined, containerKeyExpr?: ((data: any, value: any) => any) | string, customDataExpr?: ((data: any, value: any) => any) | string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string, heightExpr?: ((data: any, value: any) => any) | string | undefined, imageUrlExpr?: ((data: any, value: any) => any) | string | undefined, itemsExpr?: ((data: any, value: any) => any) | string | undefined, keyExpr?: ((data: any, value: any) => any) | string, leftExpr?: ((data: any, value: any) => any) | string | undefined, lockedExpr?: ((data: any, value: any) => any) | string | undefined, parentKeyExpr?: ((data: any, value: any) => any) | string | undefined, styleExpr?: ((data: any, value: any) => any) | string | undefined, textExpr?: ((data: any, value: any) => any) | string, textStyleExpr?: ((data: any, value: any) => any) | string | undefined, topExpr?: ((data: any, value: any) => any) | string | undefined, typeExpr?: ((data: any, value: any) => any) | string, widthExpr?: ((data: any, value: any) => any) | string | undefined, zIndexExpr?: ((data: any, value: any) => any) | string | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() pageColorChange: EventEmitter<string>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() pageOrientationChange: EventEmitter<PageOrientation>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() pageSizeChange: EventEmitter<{ height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() propertiesPanelChange: EventEmitter<{ tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() readOnlyChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() showGridChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() simpleViewChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() snapToGridChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() toolboxChange: EventEmitter<{ groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() unitsChange: EventEmitter<Units>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() useNativeScrollingChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() viewToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() viewUnitsChange: EventEmitter<Units>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() visibleChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() widthChange: EventEmitter<number | string | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() zoomLevelChange: EventEmitter<number | { items?: Array<number>, value?: number | undefined }>;\r\n\r\n\r\n\r\n\r\n    @ContentChildren(DxiDiagramCustomShapeComponent)\r\n    get customShapesChildren(): QueryList<DxiDiagramCustomShapeComponent> {\r\n        return this._getOption('customShapes');\r\n    }\r\n    set customShapesChildren(value) {\r\n        this._setChildren('customShapes', value, 'DxiDiagramCustomShapeComponent');\r\n    }\r\n\r\n\r\n    @ContentChildren(DxiCustomShapeComponent)\r\n    get customShapesLegacyChildren(): QueryList<DxiCustomShapeComponent> {\r\n        return this._getOption('customShapes');\r\n    }\r\n    set customShapesLegacyChildren(value) {\r\n        this._setChildren('customShapes', value, 'DxiCustomShapeComponent');\r\n    }\r\n\r\n\r\n\r\n\r\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\r\n            private _watcherHelper: WatcherHelper,\r\n            private _idh: IterableDifferHelper,\r\n            optionHost: NestedOptionHost,\r\n            transferState: TransferState,\r\n            @Inject(PLATFORM_ID) platformId: any) {\r\n\r\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\r\n\r\n        this._createEventEmitters([\r\n            { subscribe: 'contentReady', emit: 'onContentReady' },\r\n            { subscribe: 'customCommand', emit: 'onCustomCommand' },\r\n            { subscribe: 'disposing', emit: 'onDisposing' },\r\n            { subscribe: 'initialized', emit: 'onInitialized' },\r\n            { subscribe: 'itemClick', emit: 'onItemClick' },\r\n            { subscribe: 'itemDblClick', emit: 'onItemDblClick' },\r\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\r\n            { subscribe: 'requestEditOperation', emit: 'onRequestEditOperation' },\r\n            { subscribe: 'requestLayoutUpdate', emit: 'onRequestLayoutUpdate' },\r\n            { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },\r\n            { emit: 'autoZoomModeChange' },\r\n            { emit: 'contextMenuChange' },\r\n            { emit: 'contextToolboxChange' },\r\n            { emit: 'customShapesChange' },\r\n            { emit: 'customShapeTemplateChange' },\r\n            { emit: 'customShapeToolboxTemplateChange' },\r\n            { emit: 'defaultItemPropertiesChange' },\r\n            { emit: 'disabledChange' },\r\n            { emit: 'edgesChange' },\r\n            { emit: 'editingChange' },\r\n            { emit: 'elementAttrChange' },\r\n            { emit: 'exportChange' },\r\n            { emit: 'fullScreenChange' },\r\n            { emit: 'gridSizeChange' },\r\n            { emit: 'hasChangesChange' },\r\n            { emit: 'heightChange' },\r\n            { emit: 'historyToolbarChange' },\r\n            { emit: 'mainToolbarChange' },\r\n            { emit: 'nodesChange' },\r\n            { emit: 'pageColorChange' },\r\n            { emit: 'pageOrientationChange' },\r\n            { emit: 'pageSizeChange' },\r\n            { emit: 'propertiesPanelChange' },\r\n            { emit: 'readOnlyChange' },\r\n            { emit: 'rtlEnabledChange' },\r\n            { emit: 'showGridChange' },\r\n            { emit: 'simpleViewChange' },\r\n            { emit: 'snapToGridChange' },\r\n            { emit: 'toolboxChange' },\r\n            { emit: 'unitsChange' },\r\n            { emit: 'useNativeScrollingChange' },\r\n            { emit: 'viewToolbarChange' },\r\n            { emit: 'viewUnitsChange' },\r\n            { emit: 'visibleChange' },\r\n            { emit: 'widthChange' },\r\n            { emit: 'zoomLevelChange' }\r\n        ]);\r\n\r\n        this._idh.setHost(this);\r\n        optionHost.setHost(this);\r\n    }\r\n\r\n    protected _createInstance(element, options) {\r\n\r\n        return new DxDiagram(element, options);\r\n    }\r\n\r\n\r\n    ngOnDestroy() {\r\n        this._destroyWidget();\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges) {\r\n        super.ngOnChanges(changes);\r\n        this.setupChanges('customShapes', changes);\r\n    }\r\n\r\n    setupChanges(prop: string, changes: SimpleChanges) {\r\n        if (!(prop in this._optionsToUpdate)) {\r\n            this._idh.setup(prop, changes);\r\n        }\r\n    }\r\n\r\n    ngDoCheck() {\r\n        this._idh.doCheck('customShapes');\r\n        this._watcherHelper.checkWatchers();\r\n        super.ngDoCheck();\r\n        super.clearChangedOptions();\r\n    }\r\n\r\n    _setOption(name: string, value: any) {\r\n        let isSetup = this._idh.setupSingle(name, value);\r\n        let isChanged = this._idh.getChanges(name, value) !== null;\r\n\r\n        if (isSetup || isChanged) {\r\n            super._setOption(name, value);\r\n        }\r\n    }\r\n}\r\n\r\n@NgModule({\r\n  imports: [\r\n    DxDiagramComponent,\r\n    DxoContextMenuModule,\r\n    DxiCommandModule,\r\n    DxiItemModule,\r\n    DxoContextToolboxModule,\r\n    DxiCustomShapeModule,\r\n    DxiConnectionPointModule,\r\n    DxoDefaultItemPropertiesModule,\r\n    DxoEdgesModule,\r\n    DxoEditingModule,\r\n    DxoExportModule,\r\n    DxoGridSizeModule,\r\n    DxoHistoryToolbarModule,\r\n    DxoMainToolbarModule,\r\n    DxoNodesModule,\r\n    DxoAutoLayoutModule,\r\n    DxoPageSizeModule,\r\n    DxoPropertiesPanelModule,\r\n    DxiTabModule,\r\n    DxiGroupModule,\r\n    DxoToolboxModule,\r\n    DxoViewToolbarModule,\r\n    DxoZoomLevelModule,\r\n    DxoDiagramAutoLayoutModule,\r\n    DxiDiagramCommandModule,\r\n    DxiDiagramCommandItemModule,\r\n    DxiDiagramConnectionPointModule,\r\n    DxoDiagramContextMenuModule,\r\n    DxoDiagramContextToolboxModule,\r\n    DxiDiagramCustomShapeModule,\r\n    DxoDiagramDefaultItemPropertiesModule,\r\n    DxoDiagramEdgesModule,\r\n    DxoDiagramEditingModule,\r\n    DxoDiagramExportModule,\r\n    DxoDiagramGridSizeModule,\r\n    DxiDiagramGroupModule,\r\n    DxoDiagramHistoryToolbarModule,\r\n    DxiDiagramItemModule,\r\n    DxoDiagramMainToolbarModule,\r\n    DxoDiagramNodesModule,\r\n    DxoDiagramPageSizeModule,\r\n    DxiDiagramPageSizeItemModule,\r\n    DxoDiagramPropertiesPanelModule,\r\n    DxiDiagramTabModule,\r\n    DxiDiagramTabGroupModule,\r\n    DxoDiagramToolboxModule,\r\n    DxiDiagramToolboxGroupModule,\r\n    DxoDiagramViewToolbarModule,\r\n    DxoDiagramZoomLevelModule,\r\n    DxIntegrationModule,\r\n    DxTemplateModule\r\n  ],\r\n  exports: [\r\n    DxDiagramComponent,\r\n    DxoContextMenuModule,\r\n    DxiCommandModule,\r\n    DxiItemModule,\r\n    DxoContextToolboxModule,\r\n    DxiCustomShapeModule,\r\n    DxiConnectionPointModule,\r\n    DxoDefaultItemPropertiesModule,\r\n    DxoEdgesModule,\r\n    DxoEditingModule,\r\n    DxoExportModule,\r\n    DxoGridSizeModule,\r\n    DxoHistoryToolbarModule,\r\n    DxoMainToolbarModule,\r\n    DxoNodesModule,\r\n    DxoAutoLayoutModule,\r\n    DxoPageSizeModule,\r\n    DxoPropertiesPanelModule,\r\n    DxiTabModule,\r\n    DxiGroupModule,\r\n    DxoToolboxModule,\r\n    DxoViewToolbarModule,\r\n    DxoZoomLevelModule,\r\n    DxoDiagramAutoLayoutModule,\r\n    DxiDiagramCommandModule,\r\n    DxiDiagramCommandItemModule,\r\n    DxiDiagramConnectionPointModule,\r\n    DxoDiagramContextMenuModule,\r\n    DxoDiagramContextToolboxModule,\r\n    DxiDiagramCustomShapeModule,\r\n    DxoDiagramDefaultItemPropertiesModule,\r\n    DxoDiagramEdgesModule,\r\n    DxoDiagramEditingModule,\r\n    DxoDiagramExportModule,\r\n    DxoDiagramGridSizeModule,\r\n    DxiDiagramGroupModule,\r\n    DxoDiagramHistoryToolbarModule,\r\n    DxiDiagramItemModule,\r\n    DxoDiagramMainToolbarModule,\r\n    DxoDiagramNodesModule,\r\n    DxoDiagramPageSizeModule,\r\n    DxiDiagramPageSizeItemModule,\r\n    DxoDiagramPropertiesPanelModule,\r\n    DxiDiagramTabModule,\r\n