/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/DevExtreme */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import { 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'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { Orientation, PageOrientation } from 'devextreme/common'; import DxDiagram from 'devextreme/ui/diagram'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxDiagramTypes from "devextreme/ui/diagram_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/diagram/nested"; import * as i3 from "devextreme-angular/core"; /** * The Diagram UI component provides a visual interface to help you design new and modify existing diagrams. */ export declare class DxDiagramComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; set _commandsContentChildren(value: QueryList); set _itemsContentChildren(value: QueryList); set _connectionPointsContentChildren(value: QueryList); set _customShapesContentChildren(value: QueryList); set _groupsContentChildren(value: QueryList); set _tabsContentChildren(value: QueryList); instance: DxDiagram; /** * Specifies how the Diagram UI component automatically zooms the work area. */ get autoZoomMode(): AutoZoomMode; set autoZoomMode(value: AutoZoomMode); /** * Configures the context menu's settings. */ get contextMenu(): { commands?: Array; enabled?: boolean; }; set contextMenu(value: { commands?: Array; enabled?: boolean; }); /** * Configures the context toolbox's settings. */ get contextToolbox(): { category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; enabled?: boolean; shapeIconsPerRow?: number; shapes?: Array; width?: number; }; set contextToolbox(value: { category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; enabled?: boolean; shapeIconsPerRow?: number; shapes?: Array; width?: number; }); /** * Provide access to an array of custom shapes. */ 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; }[]; 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; }[]); /** * Specifies a custom template for shapes. */ get customShapeTemplate(): any; set customShapeTemplate(value: any); /** * Specifies a custom template for shapes in the toolbox. */ get customShapeToolboxTemplate(): any; set customShapeToolboxTemplate(value: any); /** * Configures default item properties. */ get defaultItemProperties(): { connectorLineEnd?: ConnectorLineEnd; connectorLineStart?: ConnectorLineEnd; connectorLineType?: ConnectorLineType; shapeMaxHeight?: number | undefined; shapeMaxWidth?: number | undefined; shapeMinHeight?: number | undefined; shapeMinWidth?: number | undefined; style?: Record; textStyle?: Record; }; set defaultItemProperties(value: { connectorLineEnd?: ConnectorLineEnd; connectorLineStart?: ConnectorLineEnd; connectorLineType?: ConnectorLineType; shapeMaxHeight?: number | undefined; shapeMaxWidth?: number | undefined; shapeMinHeight?: number | undefined; shapeMinWidth?: number | undefined; style?: Record; textStyle?: Record; }); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Allows you to bind the collection of diagram edges to a data source. For more information, see the Data Binding section. */ get edges(): { customDataExpr?: ((data: any, value: any) => any) | string | undefined; dataSource?: Array | 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; }; set edges(value: { customDataExpr?: ((data: any, value: any) => any) | string | undefined; dataSource?: Array | 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; }); /** * Specifies which editing operations a user can perform. */ get editing(): { allowAddShape?: boolean; allowChangeConnection?: boolean; allowChangeConnectorPoints?: boolean; allowChangeConnectorText?: boolean; allowChangeShapeText?: boolean; allowDeleteConnector?: boolean; allowDeleteShape?: boolean; allowMoveShape?: boolean; allowResizeShape?: boolean; }; set editing(value: { allowAddShape?: boolean; allowChangeConnection?: boolean; allowChangeConnectorPoints?: boolean; allowChangeConnectorText?: boolean; allowChangeShapeText?: boolean; allowDeleteConnector?: boolean; allowDeleteShape?: boolean; allowMoveShape?: boolean; allowResizeShape?: boolean; }); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Configures export settings. */ get export(): { fileName?: string; }; set export(value: { fileName?: string; }); /** * Specifies whether or not to display the UI component in full-screen mode. */ get fullScreen(): boolean; set fullScreen(value: boolean); /** * Specifies the grid pitch. */ get gridSize(): number | { items?: Array; value?: number; }; set gridSize(value: number | { items?: Array; value?: number; }); /** * Indicates whether diagram content has unsaved changes. */ get hasChanges(): boolean; set hasChanges(value: boolean); /** * Specifies the UI component's height. */ get height(): number | string | undefined; set height(value: number | string | undefined); /** * Configures the history toolbar's settings. */ get historyToolbar(): { commands?: Array; visible?: boolean; }; set historyToolbar(value: { commands?: Array; visible?: boolean; }); /** * Configures the main toolbar settings. */ get mainToolbar(): { commands?: Array; visible?: boolean; }; set mainToolbar(value: { commands?: Array; visible?: boolean; }); /** * Allows you to bind the collection of diagram nodes to a data source. For more information, see the Data Binding section. */ 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 | 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; }; 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 | 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; }); /** * Specifies the color of a diagram page. */ get pageColor(): string; set pageColor(value: string); /** * Specifies the page orientation. */ get pageOrientation(): PageOrientation; set pageOrientation(value: PageOrientation); /** * Specifies a size of pages. */ get pageSize(): { height?: number; items?: { height?: number; text?: string; width?: number; }[]; width?: number; }; set pageSize(value: { height?: number; items?: { height?: number; text?: string; width?: number; }[]; width?: number; }); /** * Configures the Properties panel settings. */ get propertiesPanel(): { tabs?: { commands?: Array; groups?: { commands?: Array; title?: string; }[]; title?: string; }[]; visibility?: PanelVisibility; }; set propertiesPanel(value: { tabs?: { commands?: Array; groups?: { commands?: Array; title?: string; }[]; title?: string; }[]; visibility?: PanelVisibility; }); /** * Specifies whether the diagram is read-only. */ get readOnly(): boolean; set readOnly(value: boolean); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies whether grid lines are visible. */ get showGrid(): boolean; set showGrid(value: boolean); /** * Switch the Diagram UI component to simple view mode. */ get simpleView(): boolean; set simpleView(value: boolean); /** * Specifies whether diagram elements should snap to grid lines. */ get snapToGrid(): boolean; set snapToGrid(value: boolean); /** * Configures the toolbox settings. */ get toolbox(): { groups?: { category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; expanded?: boolean; shapes?: Array; title?: string; }[]; shapeIconsPerRow?: number; showSearch?: boolean; visibility?: PanelVisibility; width?: number | undefined; }; set toolbox(value: { groups?: { category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; expanded?: boolean; shapes?: Array; title?: string; }[]; shapeIconsPerRow?: number; showSearch?: boolean; visibility?: PanelVisibility; width?: number | undefined; }); /** * Specifies the measurement unit for size properties. */ get units(): Units; set units(value: Units); /** * Specifies whether or not the UI component uses native scrolling. */ get useNativeScrolling(): boolean; set useNativeScrolling(value: boolean); /** * Configures the view toolbar settings. */ get viewToolbar(): { commands?: Array; visible?: boolean; }; set viewToolbar(value: { commands?: Array; visible?: boolean; }); /** * Specifies the measurement unit that is displayed in user interface elements. */ get viewUnits(): Units; set viewUnits(value: Units); /** * Specifies whether the UI component is visible. */ get visible(): boolean; set visible(value: boolean); /** * Specifies the UI component's width. */ get width(): number | string | undefined; set width(value: number | string | undefined); /** * Specifies the zoom level. */ get zoomLevel(): number | { items?: Array; value?: number | undefined; }; set zoomLevel(value: number | { items?: Array; value?: number | undefined; }); /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady: EventEmitter; /** * A function that is executed after a custom command item was clicked and allows you to implement the custom command's logic. */ onCustomCommand: EventEmitter; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed after a shape or connector is clicked. */ onItemClick: EventEmitter; /** * A function that is executed after a shape or connector is double-clicked. */ onItemDblClick: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * A function that allows you to prohibit an edit operation at run time. */ onRequestEditOperation: EventEmitter; /** * A function that allows you to specify whether or not the UI component should reapply its auto layout after diagram data is reloaded. */ onRequestLayoutUpdate: EventEmitter; /** * A function that is executed after the selection is changed in the Diagram. */ onSelectionChanged: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ autoZoomModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ contextMenuChange: EventEmitter<{ commands?: Array; enabled?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ contextToolboxChange: EventEmitter<{ category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; enabled?: boolean; shapeIconsPerRow?: number; shapes?: Array; width?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ 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; }[]>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customShapeTemplateChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customShapeToolboxTemplateChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ defaultItemPropertiesChange: EventEmitter<{ connectorLineEnd?: ConnectorLineEnd; connectorLineStart?: ConnectorLineEnd; connectorLineType?: ConnectorLineType; shapeMaxHeight?: number | undefined; shapeMaxWidth?: number | undefined; shapeMinHeight?: number | undefined; shapeMinWidth?: number | undefined; style?: Record; textStyle?: Record; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ edgesChange: EventEmitter<{ customDataExpr?: ((data: any, value: any) => any) | string | undefined; dataSource?: Array | 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; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ editingChange: EventEmitter<{ allowAddShape?: boolean; allowChangeConnection?: boolean; allowChangeConnectorPoints?: boolean; allowChangeConnectorText?: boolean; allowChangeShapeText?: boolean; allowDeleteConnector?: boolean; allowDeleteShape?: boolean; allowMoveShape?: boolean; allowResizeShape?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ exportChange: EventEmitter<{ fileName?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ fullScreenChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ gridSizeChange: EventEmitter; value?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ hasChangesChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ heightChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ historyToolbarChange: EventEmitter<{ commands?: Array; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ mainToolbarChange: EventEmitter<{ commands?: Array; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ 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 | 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; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pageColorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pageOrientationChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pageSizeChange: EventEmitter<{ height?: number; items?: { height?: number; text?: string; width?: number; }[]; width?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ propertiesPanelChange: EventEmitter<{ tabs?: { commands?: Array; groups?: { commands?: Array; title?: string; }[]; title?: string; }[]; visibility?: PanelVisibility; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ readOnlyChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ showGridChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ simpleViewChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ snapToGridChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ toolboxChange: EventEmitter<{ groups?: { category?: ShapeCategory | string; displayMode?: ToolboxDisplayMode; expanded?: boolean; shapes?: Array; title?: string; }[]; shapeIconsPerRow?: number; showSearch?: boolean; visibility?: PanelVisibility; width?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ unitsChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ useNativeScrollingChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ viewToolbarChange: EventEmitter<{ commands?: Array; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ viewUnitsChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ visibleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ widthChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ zoomLevelChange: EventEmitter; value?: number | undefined; }>; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxDiagram; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxDiagramModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/diagram/nested'; export { DxDiagramTypes };