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

DevExtreme UI and Visualization Components for Angular

{"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: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 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\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n    TransferState,\n    Component,\n    NgModule,\n    ElementRef,\n    NgZone,\n    PLATFORM_ID,\n    Inject,\n\n    Input,\n    Output,\n    OnDestroy,\n    EventEmitter,\n    OnChanges,\n    DoCheck,\n    SimpleChanges,\n    ContentChildren,\n    QueryList\n} from '@angular/core';\n\n\nimport type { 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';\nimport type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';\nimport type { Store } from 'devextreme/data/store';\nimport type { Orientation, PageOrientation } from 'devextreme/common';\n\nimport DxDiagram from 'devextreme/ui/diagram';\n\n\nimport {\n    DxComponent,\n    DxTemplateHost,\n    DxIntegrationModule,\n    DxTemplateModule,\n    NestedOptionHost,\n    IterableDifferHelper,\n    WatcherHelper,\n    CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxoContextMenuModule } from 'devextreme-angular/ui/nested';\nimport { DxiCommandModule } from 'devextreme-angular/ui/nested';\nimport { DxiItemModule } from 'devextreme-angular/ui/nested';\nimport { DxoContextToolboxModule } from 'devextreme-angular/ui/nested';\nimport { DxiCustomShapeModule } from 'devextreme-angular/ui/nested';\nimport { DxiConnectionPointModule } from 'devextreme-angular/ui/nested';\nimport { DxoDefaultItemPropertiesModule } from 'devextreme-angular/ui/nested';\nimport { DxoEdgesModule } from 'devextreme-angular/ui/nested';\nimport { DxoEditingModule } from 'devextreme-angular/ui/nested';\nimport { DxoExportModule } from 'devextreme-angular/ui/nested';\nimport { DxoGridSizeModule } from 'devextreme-angular/ui/nested';\nimport { DxoHistoryToolbarModule } from 'devextreme-angular/ui/nested';\nimport { DxoMainToolbarModule } from 'devextreme-angular/ui/nested';\nimport { DxoNodesModule } from 'devextreme-angular/ui/nested';\nimport { DxoAutoLayoutModule } from 'devextreme-angular/ui/nested';\nimport { DxoPageSizeModule } from 'devextreme-angular/ui/nested';\nimport { DxoPropertiesPanelModule } from 'devextreme-angular/ui/nested';\nimport { DxiTabModule } from 'devextreme-angular/ui/nested';\nimport { DxiGroupModule } from 'devextreme-angular/ui/nested';\nimport { DxoToolboxModule } from 'devextreme-angular/ui/nested';\nimport { DxoViewToolbarModule } from 'devextreme-angular/ui/nested';\nimport { DxoZoomLevelModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoDiagramAutoLayoutModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramCommandModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramCommandItemModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramConnectionPointModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramContextMenuModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramContextToolboxModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramCustomShapeModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramDefaultItemPropertiesModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramEdgesModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramEditingModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramExportModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramGridSizeModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramGroupModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramHistoryToolbarModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramItemModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramMainToolbarModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramNodesModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramPageSizeModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramPageSizeItemModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramPropertiesPanelModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramTabModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramTabGroupModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramToolboxModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxiDiagramToolboxGroupModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramViewToolbarModule } from 'devextreme-angular/ui/diagram/nested';\nimport { DxoDiagramZoomLevelModule } from 'devextreme-angular/ui/diagram/nested';\nimport { \n           PROPERTY_TOKEN_commands,\n           PROPERTY_TOKEN_items,\n           PROPERTY_TOKEN_connectionPoints,\n           PROPERTY_TOKEN_customShapes,\n           PROPERTY_TOKEN_groups,\n           PROPERTY_TOKEN_tabs,\n     } from 'devextreme-angular/core/tokens';\n\n\n/**\n * The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.\n\n */\n@Component({\n    selector: 'dx-diagram',\n    template: '',\n    host: { ngSkipHydration: 'true' },\n    imports: [ DxIntegrationModule ],\n    providers: [\n        DxTemplateHost,\n        WatcherHelper,\n        NestedOptionHost,\n        IterableDifferHelper\n    ]\n})\nexport class DxDiagramComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {\n\n    @ContentChildren(PROPERTY_TOKEN_commands)\n    set _commandsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('commands', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_items)\n    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('items', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_connectionPoints)\n    set _connectionPointsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('connectionPoints', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_customShapes)\n    set _customShapesContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('customShapes', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_groups)\n    set _groupsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('groups', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_tabs)\n    set _tabsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('tabs', value);\n    }\n\n    instance: DxDiagram = null;\n\n    /**\n     * Specifies how the Diagram UI component automatically zooms the work area.\n    \n     */\n    @Input()\n    get autoZoomMode(): AutoZoomMode {\n        return this._getOption('autoZoomMode');\n    }\n    set autoZoomMode(value: AutoZoomMode) {\n        this._setOption('autoZoomMode', value);\n    }\n\n\n    /**\n     * Configures the context menu&apos;s settings.\n    \n     */\n    @Input()\n    get contextMenu(): { commands?: Array<Command | CustomCommand>, enabled?: boolean } {\n        return this._getOption('contextMenu');\n    }\n    set contextMenu(value: { commands?: Array<Command | CustomCommand>, enabled?: boolean }) {\n        this._setOption('contextMenu', value);\n    }\n\n\n    /**\n     * Configures the context toolbox&apos;s settings.\n    \n     */\n    @Input()\n    get contextToolbox(): { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType | string>, width?: number } {\n        return this._getOption('contextToolbox');\n    }\n    set contextToolbox(value: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType | string>, width?: number }) {\n        this._setOption('contextToolbox', value);\n    }\n\n\n    /**\n     * Provide access to an array of custom shapes.\n    \n     */\n    @Input()\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 }[] {\n        return this._getOption('customShapes');\n    }\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 }[]) {\n        this._setOption('customShapes', value);\n    }\n\n\n    /**\n     * Specifies a custom template for shapes.\n    \n     */\n    @Input()\n    get customShapeTemplate(): any {\n        return this._getOption('customShapeTemplate');\n    }\n    set customShapeTemplate(value: any) {\n        this._setOption('customShapeTemplate', value);\n    }\n\n\n    /**\n     * Specifies a custom template for shapes in the toolbox.\n    \n     */\n    @Input()\n    get customShapeToolboxTemplate(): any {\n        return this._getOption('customShapeToolboxTemplate');\n    }\n    set customShapeToolboxTemplate(value: any) {\n        this._setOption('customShapeToolboxTemplate', value);\n    }\n\n\n    /**\n     * Configures default item properties.\n    \n     */\n    @Input()\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> } {\n        return this._getOption('defaultItemProperties');\n    }\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> }) {\n        this._setOption('defaultItemProperties', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component responds to user interaction.\n    \n     */\n    @Input()\n    get disabled(): boolean {\n        return this._getOption('disabled');\n    }\n    set disabled(value: boolean) {\n        this._setOption('disabled', value);\n    }\n\n\n    /**\n     * Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section.\n    \n     */\n    @Input()\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 } {\n        return this._getOption('edges');\n    }\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 }) {\n        this._setOption('edges', value);\n    }\n\n\n    /**\n     * Specifies which editing operations a user can perform.\n    \n     */\n    @Input()\n    get editing(): { allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean } {\n        return this._getOption('editing');\n    }\n    set editing(value: { allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean }) {\n        this._setOption('editing', value);\n    }\n\n\n    /**\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\n    \n     */\n    @Input()\n    get elementAttr(): Record<string, any> {\n        return this._getOption('elementAttr');\n    }\n    set elementAttr(value: Record<string, any>) {\n        this._setOption('elementAttr', value);\n    }\n\n\n    /**\n     * Configures export settings.\n    \n     */\n    @Input()\n    get export(): { fileName?: string } {\n        return this._getOption('export');\n    }\n    set export(value: { fileName?: string }) {\n        this._setOption('export', value);\n    }\n\n\n    /**\n     * Specifies whether or not to display the UI component in full-screen mode.\n    \n     */\n    @Input()\n    get fullScreen(): boolean {\n        return this._getOption('fullScreen');\n    }\n    set fullScreen(value: boolean) {\n        this._setOption('fullScreen', value);\n    }\n\n\n    /**\n     * Specifies the grid pitch.\n    \n     */\n    @Input()\n    get gridSize(): number | { items?: Array<number>, value?: number } {\n        return this._getOption('gridSize');\n    }\n    set gridSize(value: number | { items?: Array<number>, value?: number }) {\n        this._setOption('gridSize', value);\n    }\n\n\n    /**\n     * Indicates whether diagram content has unsaved changes.\n    \n     */\n    @Input()\n    get hasChanges(): boolean {\n        return this._getOption('hasChanges');\n    }\n    set hasChanges(value: boolean) {\n        this._setOption('hasChanges', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s height.\n    \n     */\n    @Input()\n    get height(): number | string | undefined {\n        return this._getOption('height');\n    }\n    set height(value: number | string | undefined) {\n        this._setOption('height', value);\n    }\n\n\n    /**\n     * Configures the history toolbar&apos;s settings.\n    \n     */\n    @Input()\n    get historyToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\n        return this._getOption('historyToolbar');\n    }\n    set historyToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\n        this._setOption('historyToolbar', value);\n    }\n\n\n    /**\n     * Configures the main toolbar settings.\n    \n     */\n    @Input()\n    get mainToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\n        return this._getOption('mainToolbar');\n    }\n    set mainToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\n        this._setOption('mainToolbar', value);\n    }\n\n\n    /**\n     * Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section.\n    \n     */\n    @Input()\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 } {\n        return this._getOption('nodes');\n    }\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 }) {\n        this._setOption('nodes', value);\n    }\n\n\n    /**\n     * Specifies the color of a diagram page.\n    \n     */\n    @Input()\n    get pageColor(): string {\n        return this._getOption('pageColor');\n    }\n    set pageColor(value: string) {\n        this._setOption('pageColor', value);\n    }\n\n\n    /**\n     * Specifies the page orientation.\n    \n     */\n    @Input()\n    get pageOrientation(): PageOrientation {\n        return this._getOption('pageOrientation');\n    }\n    set pageOrientation(value: PageOrientation) {\n        this._setOption('pageOrientation', value);\n    }\n\n\n    /**\n     * Specifies a size of pages.\n    \n     */\n    @Input()\n    get pageSize(): { height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number } {\n        return this._getOption('pageSize');\n    }\n    set pageSize(value: { height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number }) {\n        this._setOption('pageSize', value);\n    }\n\n\n    /**\n     * Configures the Properties panel settings.\n    \n     */\n    @Input()\n    get propertiesPanel(): { tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility } {\n        return this._getOption('propertiesPanel');\n    }\n    set propertiesPanel(value: { tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility }) {\n        this._setOption('propertiesPanel', value);\n    }\n\n\n    /**\n     * Specifies whether the diagram is read-only.\n    \n     */\n    @Input()\n    get readOnly(): boolean {\n        return this._getOption('readOnly');\n    }\n    set readOnly(value: boolean) {\n        this._setOption('readOnly', value);\n    }\n\n\n    /**\n     * Switches the UI component to a right-to-left representation.\n    \n     */\n    @Input()\n    get rtlEnabled(): boolean {\n        return this._getOption('rtlEnabled');\n    }\n    set rtlEnabled(value: boolean) {\n        this._setOption('rtlEnabled', value);\n    }\n\n\n    /**\n     * Specifies whether grid lines are visible.\n    \n     */\n    @Input()\n    get showGrid(): boolean {\n        return this._getOption('showGrid');\n    }\n    set showGrid(value: boolean) {\n        this._setOption('showGrid', value);\n    }\n\n\n    /**\n     * Switch the Diagram UI component to simple view mode.\n    \n     */\n    @Input()\n    get simpleView(): boolean {\n        return this._getOption('simpleView');\n    }\n    set simpleView(value: boolean) {\n        this._setOption('simpleView', value);\n    }\n\n\n    /**\n     * Specifies whether diagram elements should snap to grid lines.\n    \n     */\n    @Input()\n    get snapToGrid(): boolean {\n        return this._getOption('snapToGrid');\n    }\n    set snapToGrid(value: boolean) {\n        this._setOption('snapToGrid', value);\n    }\n\n\n    /**\n     * Configures the toolbox settings.\n    \n     */\n    @Input()\n    get toolbox(): { groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType | string>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined } {\n        return this._getOption('toolbox');\n    }\n    set toolbox(value: { groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType | string>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined }) {\n        this._setOption('toolbox', value);\n    }\n\n\n    /**\n     * Specifies the measurement unit for size properties.\n    \n     */\n    @Input()\n    get units(): Units {\n        return this._getOption('units');\n    }\n    set units(value: Units) {\n        this._setOption('units', value);\n    }\n\n\n    /**\n     * Specifies whether or not the UI component uses native scrolling.\n    \n     */\n    @Input()\n    get useNativeScrolling(): boolean {\n        return this._getOption('useNativeScrolling');\n    }\n    set useNativeScrolling(value: boolean) {\n        this._setOption('useNativeScrolling', value);\n    }\n\n\n    /**\n     * Configures the view toolbar settings.\n    \n     */\n    @Input()\n    get viewToolbar(): { commands?: Array<Command | CustomCommand>, visible?: boolean } {\n        return this._getOption('viewToolbar');\n    }\n    set viewToolbar(value: { commands?: Array<Command | CustomCommand>, visible?: boolean }) {\n        this._setOption('viewToolbar', value);\n    }\n\n\n    /**\n     * Specifies the measurement unit that is displayed in user interface elements.\n    \n     */\n    @Input()\n    get viewUnits(): Units {\n        return this._getOption('viewUnits');\n    }\n    set viewUnits(value: Units) {\n        this._setOption('viewUnits', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component is visible.\n    \n     */\n    @Input()\n    get visible(): boolean {\n        return this._getOption('visible');\n    }\n    set visible(value: boolean) {\n        this._setOption('visible', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s width.\n    \n     */\n    @Input()\n    get width(): number | string | undefined {\n        return this._getOption('width');\n    }\n    set width(value: number | string | undefined) {\n        this._setOption('width', value);\n    }\n\n\n    /**\n     * Specifies the zoom level.\n    \n     */\n    @Input()\n    get zoomLevel(): number | { items?: Array<number>, value?: number | undefined } {\n        return this._getOption('zoomLevel');\n    }\n    set zoomLevel(value: number | { items?: Array<number>, value?: number | undefined }) {\n        this._setOption('zoomLevel', value);\n    }\n\n    /**\n    \n     * A function that is executed when the UI component is rendered and each time the component is repainted.\n    \n    \n     */\n    @Output() onContentReady: EventEmitter<ContentReadyEvent>;\n\n    /**\n    \n     * A function that is executed after a custom command item was clicked and allows you to implement the custom command&apos;s logic.\n    \n    \n     */\n    @Output() onCustomCommand: EventEmitter<CustomCommandEvent>;\n\n    /**\n    \n     * A function that is executed before the UI component is disposed of.\n    \n    \n     */\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n    /**\n    \n     * A function used in JavaScript frameworks to save the UI component instance.\n    \n    \n     */\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n    /**\n    \n     * A function that is executed after a shape or connector is clicked.\n    \n    \n     */\n    @Output() onItemClick: EventEmitter<ItemClickEvent>;\n\n    /**\n    \n     * A function that is executed after a shape or connector is double-clicked.\n    \n    \n     */\n    @Output() onItemDblClick: EventEmitter<ItemDblClickEvent>;\n\n    /**\n    \n     * A function that is executed after a UI component property is changed.\n    \n    \n     */\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n    /**\n    \n     * A function that allows you to prohibit an edit operation at run time.\n    \n    \n     */\n    @Output() onRequestEditOperation: EventEmitter<RequestEditOperationEvent>;\n\n    /**\n    \n     * A function that allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded.\n    \n    \n     */\n    @Output() onRequestLayoutUpdate: EventEmitter<RequestLayoutUpdateEvent>;\n\n    /**\n    \n     * A function that is executed after the selection is changed in the Diagram.\n    \n    \n     */\n    @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() autoZoomModeChange: EventEmitter<AutoZoomMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() contextMenuChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, enabled?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() contextToolboxChange: EventEmitter<{ category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, enabled?: boolean, shapeIconsPerRow?: number, shapes?: Array<ShapeType | string>, width?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }[]>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() customShapeTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() customShapeToolboxTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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> }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() editingChange: EventEmitter<{ allowAddShape?: boolean, allowChangeConnection?: boolean, allowChangeConnectorPoints?: boolean, allowChangeConnectorText?: boolean, allowChangeShapeText?: boolean, allowDeleteConnector?: boolean, allowDeleteShape?: boolean, allowMoveShape?: boolean, allowResizeShape?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() exportChange: EventEmitter<{ fileName?: string }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() fullScreenChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() gridSizeChange: EventEmitter<number | { items?: Array<number>, value?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() hasChangesChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() heightChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() historyToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() mainToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pageColorChange: EventEmitter<string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pageOrientationChange: EventEmitter<PageOrientation>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pageSizeChange: EventEmitter<{ height?: number, items?: { height?: number, text?: string, width?: number }[], width?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() propertiesPanelChange: EventEmitter<{ tabs?: { commands?: Array<Command | CustomCommand>, groups?: { commands?: Array<Command | CustomCommand>, title?: string }[], title?: string }[], visibility?: PanelVisibility }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() readOnlyChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() showGridChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() simpleViewChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() snapToGridChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() toolboxChange: EventEmitter<{ groups?: { category?: ShapeCategory | string, displayMode?: ToolboxDisplayMode, expanded?: boolean, shapes?: Array<ShapeType | string>, title?: string }[], shapeIconsPerRow?: number, showSearch?: boolean, visibility?: PanelVisibility, width?: number | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() unitsChange: EventEmitter<Units>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() useNativeScrollingChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() viewToolbarChange: EventEmitter<{ commands?: Array<Command | CustomCommand>, visible?: boolean }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() viewUnitsChange: EventEmitter<Units>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() visibleChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() widthChange: EventEmitter<number | string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() zoomLevelChange: EventEmitter<number | { items?: Array<number>, value?: number | undefined }>;\n\n\n\n\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\n            private _watcherHelper: WatcherHelper,\n            private _idh: IterableDifferHelper,\n            optionHost: NestedOptionHost,\n            transferState: TransferState,\n            @Inject(PLATFORM_ID) platformId: any) {\n\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\n\n        this._createEventEmitters([\n            { subscribe: 'contentReady', emit: 'onContentReady' },\n            { subscribe: 'customCommand', emit: 'onCustomCommand' },\n            { subscribe: 'disposing', emit: 'onDisposing' },\n            { subscribe: 'initialized', emit: 'onInitialized' },\n            { subscribe: 'itemClick', emit: 'onItemClick' },\n            { subscribe: 'itemDblClick', emit: 'onItemDblClick' },\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\n            { subscribe: 'requestEditOperation', emit: 'onRequestEditOperation' },\n            { subscribe: 'requestLayoutUpdate', emit: 'onRequestLayoutUpdate' },\n            { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },\n            { emit: 'autoZoomModeChange' },\n            { emit: 'contextMenuChange' },\n            { emit: 'contextToolboxChange' },\n            { emit: 'customShapesChange' },\n            { emit: 'customShapeTemplateChange' },\n            { emit: 'customShapeToolboxTemplateChange' },\n            { emit: 'defaultItemPropertiesChange' },\n            { emit: 'disabledChange' },\n            { emit: 'edgesChange' },\n            { emit: 'editingChange' },\n            { emit: 'elementAttrChange' },\n            { emit: 'exportChange' },\n            { emit: 'fullScreenChange' },\n            { emit: 'gridSizeChange' },\n            { emit: 'hasChangesChange' },\n            { emit: 'heightChange' },\n            { emit: 'historyToolbarChange' },\n            { emit: 'mainToolbarChange' },\n            { emit: 'nodesChange' },\n            { emit: 'pageColorChange' },\n            { emit: 'pageOrientationChange' },\n            { emit: 'pageSizeChange' },\n            { emit: 'propertiesPanelChange' },\n            { emit: 'readOnlyChange' },\n            { emit: 'rtlEnabledChange' },\n            { emit: 'showGridChange' },\n            { emit: 'simpleViewChange' },\n            { emit: 'snapToGridChange' },\n            { emit: 'toolboxChange' },\n            { emit: 'unitsChange' },\n            { emit: 'useNativeScrollingChange' },\n            { emit: 'viewToolbarChange' },\n            { emit: 'viewUnitsChange' },\n            { emit: 'visibleChange' },\n            { emit: 'widthChange' },\n            { emit: 'zoomLevelChange' }\n        ]);\n\n        this._idh.setHost(this);\n        optionHost.setHost(this);\n    }\n\n    protected _createInstance(element, options) {\n\n        return new DxDiagram(element, options);\n    }\n\n\n    ngOnDestroy() {\n        this._destroyWidget();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        super.ngOnChanges(changes);\n        this.setupChanges('customShapes', changes);\n    }\n\n    setupChanges(prop: string, changes: SimpleChanges) {\n        if (!(prop in this._optionsToUpdate)) {\n            this._idh.setup(prop, changes);\n        }\n    }\n\n    ngDoCheck() {\n        this._idh.doCheck('customShapes');\n        this._watcherHelper.checkWatchers();\n        super.ngDoCheck();\n        super.clearChangedOptions();\n    }\n\n    _setOption(name: string, value: any) {\n        let isSetup = this._idh.setupSingle(name, value);\n        let isChanged = this._idh.getChanges(name, value) !== null;\n\n        if (isSetup || isChanged) {\n            super._setOption(name, value);\n        }\n    }\n}\n\n@NgModule({\n  imports: [\n    DxDiagramComponent,\n    DxoContextMenuModule,\n    DxiCommandModule,\n    DxiItemModule,\n    DxoContextToolboxModule,\n    DxiCustomShapeModule,\n    DxiConnectionPointModule,\n    DxoDefaultItemPropertiesModule,\n    DxoEdgesModule,\n    DxoEditingModule,\n    DxoExportModule,\n    DxoGridSizeModule,\n    DxoHistoryToolbarModule,\n    DxoMainToolbarModule,\n    DxoNodesModule,\n    DxoAutoLayoutModule,\n    DxoPageSizeModule,\n    DxoPropertiesPanelModule,\n    DxiTabModule,\n    DxiGroupModule,\n    DxoToolboxModule,\n    DxoViewToolbarModule,\n    DxoZoomLevelModule,\n    DxoDiagramAutoLayoutModule,\n    DxiDiagramCommandModule,\n    DxiDiagramCommandItemModule,\n    DxiDiagramConnectionPointModule,\n    DxoDiagramContextMenuModule,\n    DxoDiagramContextToolboxModule,\n    DxiDiagramCustomShapeModule,\n    DxoDiagramDefaultItemPropertiesModule,\n    DxoDiagramEdgesModule,\n    DxoDiagramEditingModule,\n    DxoDiagramExportModule,\n    DxoDiagramGridSizeModule,\n    DxiDiagramGroupModule,\n    DxoDiagramHistoryToolbarModule,\n    DxiDiagramItemModule,\n    DxoDiagramMainToolbarModule,\n    DxoDiagramNodesModule,\n    DxoDiagramPageSizeModule,\n    DxiDiagramPageSizeItemModule,\n    DxoDiagramPropertiesPanelModule,\n    DxiDiagramTabModule,\n    DxiDiagramTabGroupModule,\n    DxoDiagramToolboxModule,\n    DxiDiagramToolboxGroupModule,\n    DxoDiagramViewToolbarModule,\n    DxoDiagramZoomLevelModule,\n    DxIntegrationModule,\n    DxTemplateModule\n  ],\n  exports: [\n    DxDiagramComponent,\n    DxoContextMenuModule,\n    DxiCommandModule,\n    DxiItemModule,\n    DxoContextToolboxModule,\n    DxiCustomShapeModule,\n    DxiConnectionPointModule,\n    DxoDefaultItemPropertiesModule,\n    DxoEdgesModule,\n    DxoEditingModule,\n    DxoExportModule,\n    DxoGridSizeModule,\n    DxoHistoryToolbarModule,\n    DxoMainToolbarModule,\n    DxoNodesModule,\n    DxoAutoLayoutModule,\n    DxoPageSizeModule,\n    DxoPropertiesPanelModule,\n    DxiTabModule,\n    DxiGroupModule,\n    DxoToolboxModule,\n    DxoViewToolbarModule,\n    DxoZoomLevelModule,\n    DxoDiagramAutoLayoutModule,\n    DxiDiagramCommandModule,\n    DxiDiagramCommandItemModule,\n    DxiDiagramConnectionPointModule,\n    DxoDiagramContextMenuModule,\n    DxoDiagramContextToolboxModule,\n    DxiDiagramCustomShapeModule,\n    DxoDiagramDefaultItemPropertiesModule,\n    DxoDiagramEdgesModule,\n    DxoDiagramEditingModule,\n    DxoDiagramExportModule,\n    DxoDiagramGridSizeModule,\n    DxiDiagramGroupModule,\n    DxoDiagramHistoryToolbarModule,\n    DxiDiagramItemModule,\n    DxoDiagramMainToolbarModule,\n    DxoDiagramNodesModule,\n    DxoDiagramPageSizeModule,\n    DxiDiagramPageSizeItemModule,\n    DxoDiagramPropertiesPanelModule,\n    DxiDiagramTabModule,\n    DxiDiagramTabGroupModule,\n    DxoDiagramToolboxModule,\n    DxiDiagramToolboxGroupModule,\n    DxoDiagramViewToolbarModule,\n    DxoDiagramZoomLevelModule,\n    DxTemplateModule\n  ]\n})\nexport class DxDiagramModule { }\n\nexport * from 'devextreme-angular/ui/diagram/nested';\n\nimport type * as DxDiagramTypes from \"devextreme/ui/diagram_types\";\nexport { DxDiagramTypes };\n\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;;;;;;;AAWG;AAEH;AAsGA;;;AAGG;AAaG,MAAO,kBAAmB,SAAQ,WAAW,CAAA;IAE/C,IACI,wBAAwB,CAAC,KAAwC,EAAA;AACjE,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,KAAK,CAAC;IACvC;IAEA,IACI,qBAAqB,CAAC,KAAwC,EAAA;AAC9D,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC;IACpC;IAEA,IACI,gCAAgC,CAAC,KAAwC,EAAA;AACzE,QAAA,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC;IAC/C;IAEA,IACI,4BAA4B,CAAC,KAAwC,EAAA;AACrE,QAAA,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC;IAC3C;IAEA,IACI,sBAAsB,CAAC,KAAwC,EAAA;AAC/D,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC;IACrC;IAEA,IACI,oBAAoB,CAAC,KAAwC,EAAA;AAC7D,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC;IACnC;AAIA;;;AAGG;AACH,IAAA,IACI,YAAY,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC;IAC1C;IACA,IAAI,YAAY,CAAC,KAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC;IAC1C;AAGA;;;AAGG;AACH,IAAA,IACI,WAAW,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IACzC;IACA,IAAI,WAAW,CAAC,KAAuE,EAAA;AACnF,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC;IACzC;AAGA;;;AAGG;AACH,IAAA,IACI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC;IAC5C;IACA,IAAI,cAAc,CAAC,KAAgL,EAAA;AAC/L,QAAA,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC;IAC5C;AAGA;;;AAGG;AAC