@progress/kendo-angular-diagrams 24.2.2 → 25.0.0-develop.1

package/index.d.ts

@@ -2,10 +2,809 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { ShapeDefaultsBase, ConnectionDefaultsBase, ShapeOptionsBase, ConnectionOptionsBase, ConnectionDefaultsEditable, ConnectionPointsEditable, ConnectionEditingPoint, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, Circle, Group, FlowchartShapeType, ArrowMarker, CircleMarker, Collate, DataInputOutput, DataStorage, Database, Decision, Delay, DirectAccessStorage, Display, Document, MultipleDocuments, Extract, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, Merge, MultiLineTextBlock, OffPageConnector, OnPageConnector, Path, Polyline, PredefinedProcess, Preparation, Process, Rectangle, Sort, SummingJunction, Terminator, TextBlock, MarkerType, ConnectionCap, ConnectionContent, convertToDiagramModel, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn, ConnectionRichTextContent, ShapeRichTextContent, TextRun, LineBreak, InlineImage, Paragraph, ParagraphMargin, Padding } from '@progress/kendo-diagram-common';
-export { DiagramModule } from './diagram.module';
-export { DiagramComponent } from './diagram.component';
-export { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
-export { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
-export * from './directives';
-export * from './models';
+import { ConnectionDefaultsBase, ConnectionOptionsBase, ShapeDefaultsBase, NavigationOptions, ShapeOptionsBase, DiagramEditable, DiagramLayout, Pannable, Selectable, DiagramChangeEvent, DiagramDomEvent, DiagramDragEvent, DiagramItemBoundsChangeEvent, DiagramPanEvent, DiagramSelectEvent, DiagramZoomEndEvent, DiagramZoomStartEvent, Diagram, Shape, Connection, DiagramState, Point, Connector, SelectionOptions, Rect, BringIntoViewOptions, Direction } from '@progress/kendo-diagram-common';
+export { ArrowMarker, BringIntoViewOptions, Circle, CircleMarker, Collate, Connection, ConnectionCap, ConnectionContent, ConnectionDefaultsBase, ConnectionDefaultsEditable, ConnectionEditingPoint, ConnectionMapping, ConnectionOptionsBase, ConnectionPointsEditable, ConnectionRichTextContent, Connector, ConvertResult, Coordinate, DashType, DataInputOutput, DataStorage, Database, Decision, Delay, DiagramChangeEvent, DiagramDomEvent, DiagramDragEvent, DiagramEditable, DiagramItemBoundsChangeEvent, DiagramLayout, DiagramMapping, DiagramPanEvent, DiagramSelectEvent, DiagramState, DiagramZoomEndEvent, DiagramZoomStartEvent, DirectAccessStorage, Direction, Display, Document, EditableDefaults, Extract, Fill, FlowchartShapeType, FromPathOrFn, Group, Image, InlineImage, InternalStorage, Layout, LayoutGrid, Line, LineBreak, LogicalOr, ManualInputOutput, ManualOperation, MapSpec, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Padding, Pannable, Paragraph, ParagraphMargin, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Selectable, SelectionOptions, Shape, ShapeConnector, ShapeConnectorDefaults, ShapeConnectorHover, ShapeContent, ShapeDefaultsBase, ShapeDefaultsEditable, ShapeEditable, ShapeFill, ShapeFillGradient, ShapeFillGradientStop, ShapeHover, ShapeMapping, ShapeOptionsBase, ShapeRichTextContent, ShapeRotation, ShapeType, Sort, Stroke, SummingJunction, Terminator, TextBlock, TextRun, convertToDiagramModel } from '@progress/kendo-diagram-common';
+import * as i0 from '@angular/core';
+import { TemplateRef, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, Renderer2, NgZone, ViewContainerRef, SimpleChanges } from '@angular/core';
+import { LicenseMessage } from '@progress/kendo-licensing';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { Group } from '@progress/kendo-drawing';
+
+/**
+ * Defines the navigation configuration options for the `Diagram`.
+ */
+interface DiagramNavigationOptions extends Pick<NavigationOptions, 'smallStep' | 'largeStep'> {
+    /**
+     * Controls whether navigation is enabled.
+     */
+    enabled?: boolean;
+}
+/**
+ * Defines the tooltip configuration for shapes and connections.
+ * Controls the visibility, content, and styling of tooltips.
+ */
+interface TooltipOptions {
+    /**
+     * Controls whether the tooltip displays when you hover over the item.
+     */
+    visible?: boolean;
+    /**
+     * Sets custom CSS classes for the Tooltip wrapper element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    cssClass?: any;
+}
+/**
+ * Defines the configuration options for diagram shapes.
+ * Extends the base shape options and adds tooltip support.
+ */
+interface ShapeOptions extends Omit<ShapeOptionsBase, ''> {
+    /**
+     * Configures the tooltip that displays when you hover over the shape.
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Sets the text content displayed in the tooltip.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the configuration options for diagram connections.
+ * Extends the base connection options and adds tooltip support.
+ */
+interface ConnectionOptions extends Omit<ConnectionOptionsBase, ''> {
+    /**
+     * Configures the tooltip that displays when you hover over the connection.
+     */
+    tooltip?: TooltipOptions;
+    /**
+     * Sets the text content displayed in the tooltip.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the default configuration options for all connections in the `Diagram`.
+ * These settings apply to connections unless overridden by individual connection options.
+ */
+interface ConnectionDefaults extends Omit<ConnectionDefaultsBase, ''> {
+    /**
+     * Configures the default tooltip settings for all connections.
+     */
+    tooltip?: TooltipOptions;
+}
+/**
+ * Defines the default configuration options for all shapes in the `Diagram`.
+ * These settings apply to shapes unless overridden by individual shape options.
+ */
+interface ShapeDefaults extends Omit<ShapeDefaultsBase, ''> {
+    /**
+     * Configures the default tooltip settings for all shapes.
+     */
+    tooltip?: TooltipOptions;
+}
+/**
+ * Defines the field mapping configuration for shapes data binding.
+ * Maps source object properties to `Diagram` shape properties.
+ */
+interface ShapeModelFields {
+    /**
+     * The field that contains the unique identifier of the shape.
+     */
+    id?: string;
+    /**
+     * The field that contains the connectors configuration.
+     */
+    connectors?: string;
+    /**
+     * The field that contains the connector defaults configuration.
+     */
+    connectorDefaults?: string;
+    /**
+     * The field that contains the content configuration.
+     */
+    content?: string;
+    /**
+     * The field that contains the editable configuration.
+     */
+    editable?: string;
+    /**
+     * The field that contains the fill configuration.
+     */
+    fill?: string;
+    /**
+     * The field that contains the height value.
+     */
+    height?: string;
+    /**
+     * The field that contains the hover configuration.
+     */
+    hover?: string;
+    /**
+     * The field that contains the minimum height value.
+     */
+    minHeight?: string;
+    /**
+     * The field that contains the minimum width value.
+     */
+    minWidth?: string;
+    /**
+     * The field that contains the path configuration.
+     */
+    path?: string;
+    /**
+     * The field that contains the rotation configuration.
+     */
+    rotation?: string;
+    /**
+     * The field that contains the selectable configuration.
+     */
+    selectable?: string;
+    /**
+     * The field that contains the source configuration.
+     */
+    source?: string;
+    /**
+     * The field that contains the stroke configuration.
+     */
+    stroke?: string;
+    /**
+     * The field that contains the type configuration.
+     */
+    type?: string;
+    /**
+     * The field that contains the visual configuration.
+     */
+    visual?: string;
+    /**
+     * The field that contains the width value.
+     */
+    width?: string;
+    /**
+     * The field that contains the x coordinate.
+     */
+    x?: string;
+    /**
+     * The field that contains the y coordinate.
+     */
+    y?: string;
+    /**
+     * The field that contains the corner radius value.
+     */
+    cornerRadius?: string;
+    /**
+     * The field that contains the center configuration.
+     */
+    center?: string;
+    /**
+     * The field that contains the radius value.
+     */
+    radius?: string;
+    /**
+     * The field that contains the data item reference.
+     */
+    dataItem?: string;
+    /**
+     * The field that contains the tooltip text.
+     */
+    tooltipText?: string;
+}
+/**
+ * Defines the field mapping configuration for connections data binding.
+ * Maps source object properties to `Diagram` connection properties.
+ */
+interface ConnectionModelFields {
+    /**
+     * The field that contains the source shape identifier.
+     */
+    from?: string;
+    /**
+     * The field that contains the target shape identifier.
+     */
+    to?: string;
+    /**
+     * The field that contains the connection points.
+     */
+    points?: string;
+    /**
+     * The field that contains the data item reference.
+     */
+    dataItem?: string;
+    /**
+     * The field that contains the tooltip text.
+     */
+    tooltipText?: string;
+}
+
+/**
+ * Defines a custom template for shape tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over shapes.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramShapeTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+declare class ShapeTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShapeTooltipTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ShapeTooltipTemplateDirective, "[kendoDiagramShapeTooltipTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Defines a custom template for connection tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over connections.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramConnectionTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+declare class ConnectionTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTooltipTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTooltipTemplateDirective, "[kendoDiagramConnectionTooltipTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Represents the [Kendo UI Diagram component for Angular](https://www.telerik.com/kendo-angular-ui/components/diagrams).
+ *
+ * The Diagram component is used to create organizational charts, and other types of diagrams.
+ *
+ * @example
+ * ```html
+ * <kendo-diagram [shapes]="shapesData"></kendo-diagram>
+ * ```
+ */
+declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private wrapperElement;
+    private renderer;
+    private zone;
+    private popupService;
+    private viewContainer;
+    diagramClass: boolean;
+    /**
+     * Defines the default configuration options applicable to all connections.
+     *
+     */
+    connectionDefaults?: ConnectionDefaults;
+    /**
+     * Defines the connections that render between the shapes in the `Diagram` (see [Connections article](https://www.telerik.com/kendo-angular-ui/components/diagrams/connections)).
+     * Accepts either an array of `ConnectionOptions` or an array of any objects
+     * that will be mapped using the `connectionModelFields` configuration.
+     *
+     */
+    connections?: any[];
+    /**
+     * Defines the field mapping configuration for connections data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/data-binding#field-mapping)).
+     * Maps source object properties to `Diagram` connection properties.
+     * Only used when `connections` is an array of custom objects instead of `ConnectionOptions`.
+     */
+    connectionModelFields?: ConnectionModelFields;
+    /**
+     * A set of settings to configure the `Diagram` behavior when the user attempts to drag, resize, or remove shapes.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
+     * @default true
+     */
+    editable?: boolean | DiagramEditable;
+    /**
+     * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](https://www.telerik.com/kendo-angular-ui/components/diagrams/layouts)).
+     *
+     */
+    layout?: DiagramLayout;
+    /**
+     * Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
+     *
+     * @default true
+     */
+    pannable?: boolean | Pannable;
+    /**
+     * Defines the `Diagram` selection options.
+     *
+     * By default, you can select shapes in the `Diagram` in one of two ways:
+     * - Clicking a single shape to select it and deselect any previously selected shapes.
+     * - Holding the `Ctrl/Cmd on MacOS` key while clicking multiple shapes to select them and any other shapes between them.
+     *
+     * Use the `selectable` configuration to allow single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.
+     *
+     * @default true
+     */
+    selectable?: boolean | Selectable;
+    /**
+     * Defines the default configuration options applicable to all shapes.
+     */
+    shapeDefaults?: ShapeDefaults;
+    /**
+     * Defines the shapes that render in the `Diagram` (see [Shapes article](https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes)).
+     * Accepts either an array of `ShapeOptions` or an array of any objects
+     * that will be mapped using the `shapeModelFields` configuration.
+     *
+     */
+    shapes?: any[];
+    /**
+     * Defines the field mapping configuration for shapes data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/data-binding#field-mapping)).
+     * Maps source object properties to `Diagram` shape properties.
+     * Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
+     */
+    shapeModelFields?: ShapeModelFields;
+    /**
+     * Defines the zoom level of the `Diagram`.
+     *
+     * @default 1
+     */
+    zoom?: number;
+    /**
+     * Defines the maximum zoom level of the `Diagram`.
+     *
+     * @default 2
+     */
+    zoomMax?: number;
+    /**
+     * Defines the minimum zoom level of the `Diagram`.
+     *
+     * @default 0.1
+     */
+    zoomMin?: number;
+    /**
+     * Defines the zoom rate of the `Diagram`.
+     *
+     * @default 0.1
+     */
+    zoomRate?: number;
+    /**
+     * Enables keyboard navigation in the `Diagram`.
+     * When set to `true`, navigate between shapes using arrow keys.
+     * Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
+     *
+     * @default true
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    set navigable(_navigable: boolean | DiagramNavigationOptions);
+    get navigable(): boolean | DiagramNavigationOptions;
+    /**
+     * Fires when a shape or connection is created or removed.
+     */
+    change: EventEmitter<DiagramChangeEvent>;
+    /**
+     * Fires when the user clicks on a shape or a connection.
+     */
+    diagramClick: EventEmitter<DiagramDomEvent>;
+    /**
+     * Fires when the user drags an item.
+     */
+    drag: EventEmitter<DiagramDragEvent>;
+    /**
+     * Fires when the user stops dragging an item.
+     */
+    dragEnd: EventEmitter<DiagramDragEvent>;
+    /**
+     * Fires when the user starts dragging an item.
+     */
+    dragStart: EventEmitter<DiagramDragEvent>;
+    /**
+     * Fires when the location or size of an item are changed.
+     */
+    shapeBoundsChange: EventEmitter<DiagramItemBoundsChangeEvent>;
+    /**
+     * Fires when the mouse pointer enters a shape or connection.
+     */
+    mouseEnter: EventEmitter<DiagramDomEvent>;
+    /**
+     * Fires when the mouse pointer leaves a shape or connection.
+     */
+    mouseLeave: EventEmitter<DiagramDomEvent>;
+    /**
+     * Fires when the user pans the `Diagram`.
+     */
+    onPan: EventEmitter<DiagramPanEvent>;
+    /**
+     * Fires when the user selects one or more items.
+     */
+    onSelect: EventEmitter<DiagramSelectEvent>;
+    /**
+     * Fires when the `Diagram` has finished zooming out.
+     */
+    zoomEnd: EventEmitter<DiagramZoomEndEvent>;
+    /**
+     * Fires when the `Diagram` starts zooming in or out.
+     */
+    zoomStart: EventEmitter<DiagramZoomStartEvent>;
+    /**
+     * Fires when a tooltip should shown for a shape or connection.
+     */
+    tooltipShow: EventEmitter<ShapeOptions | ConnectionOptions>;
+    /**
+     * Fires when a tooltip should be hidden.
+     */
+    tooltipHide: EventEmitter<ShapeOptions | ConnectionOptions>;
+    /**
+     * @hidden
+     * Represents the Diagram instance, holding the core functionality of the Diagram.
+     */
+    diagramWidget: Diagram;
+    /**
+     * The currently selected items in the `Diagram`.
+     */
+    get selection(): (Shape | Connection)[];
+    /**
+     * The actual shapes created by the `Diagram`.
+     */
+    get diagramShapes(): Shape[];
+    /**
+     * The actual connections created by the `Diagram`.
+     */
+    get diagramConnections(): Connection[];
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
+    /**
+     * @hidden
+     */
+    licenseMessage?: LicenseMessage;
+    /**
+     * @hidden
+     */
+    customTemplate?: TemplateRef<any>;
+    private _navigable;
+    private options;
+    /**
+     * Stores the converted shapes from user data.
+     */
+    private convertedShapes;
+    /**
+     * Stores the converted connections from user data.
+     */
+    private convertedConnections;
+    /**
+     * Current popup instance for tooltip.
+     */
+    private tooltipPopup?;
+    defaultTooltipTemplate: TemplateRef<any>;
+    customTooltipTemplate: TemplateRef<any>;
+    shapeTooltipTemplate: ShapeTooltipTemplateDirective;
+    connectionTooltipTemplate: ConnectionTooltipTemplateDirective;
+    /**
+     * @hidden
+     * The original data item provided by the user. Passed in the tooltip template context.
+     */
+    dataItem: any;
+    constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, popupService: PopupService, viewContainer: ViewContainerRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Provides the current `Diagram`'s shapes and connections that can be used to create a new `Diagram` when needed.
+     * @returns {DiagramState} Object containing shapes and connections arrays.
+     */
+    getState(): DiagramState;
+    /**
+     * Focuses the `Diagram`.
+     * @returns {boolean} true if focus was set successfully.
+     */
+    focus(): boolean;
+    /**
+     * Clears the `Diagram`.
+     */
+    clear(): void;
+    /**
+     * Determines whether two shapes are connected.
+     * @param {Shape} Shape.
+     * @param {Shape} Shape.
+     * @returns {boolean} true if the two shapes are connected.
+     */
+    connected(source: Shape, target: Shape): boolean;
+    /**
+     * Adds connection to the `Diagram`.
+     * @param {Connection} Connection.
+     * @param {boolean} Boolean.
+     * @returns {Connection} The newly created connection.
+     */
+    addConnection(connection: Connection, undoable?: boolean): Connection;
+    /**
+     * Adds shape to the `Diagram`.
+     * @param {ShapeOptions | Shape | Point} If you pass a `Point`, a new Shape with default options will be created and positioned at that point.
+     * @param {boolean} Boolean indicating if the action should be undoable.
+     * @returns {Shape} The newly created shape.
+     */
+    addShape(item: ShapeOptions | Shape | Point, undoable?: boolean): Shape;
+    /**
+     * Removes shape(s) and/or connection(s) from the `Diagram`.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param {Boolean} Boolean indicating if the action should be undoable.
+     */
+    remove(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
+    /**
+     * Connects two items in the `Diagram`.
+     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
+     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
+     * @param {ConnectionOptions} Connection options.
+     * @returns {Connection} The created connection.
+     */
+    connect(source: Shape | Connector | Point, target: Shape | Connector | Point, options?: ConnectionOptions): Connection;
+    /**
+     * Executes the next undoable action on top of the undo stack if any.
+     */
+    undo(): void;
+    /**
+     * Executes the previous undoable action on top of the redo stack if any.
+     */
+    redo(): void;
+    /**
+     * Selects items on the basis of the given input.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param Selection options.
+     * @returns {(Shape | Connection)[]} Array of selected items.
+     */
+    select(items: Shape | Connection | (Shape | Connection)[], options?: SelectionOptions): (Shape | Connection)[];
+    /**
+     * Selects all items in the `Diagram`.
+     */
+    selectAll(): void;
+    /**
+     * Selects items in the specified area.
+     * @param {Rect} rect Rectangle area to select.
+     */
+    selectArea(rect: Rect): void;
+    /**
+     * Deselects the specified items or all items if no item is specified.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     */
+    deselect(items?: Shape | Connection | (Shape | Connection)[]): void;
+    /**
+     * Brings to front the passed items.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param {boolean} By default the action is undoable.
+     */
+    bringToFront(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
+    /**
+     * Sends to back the passed items.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param {boolean} By default the action is undoable.
+     */
+    bringToBack(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
+    /**
+     * Bring into view the passed item(s) or rectangle.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param {DiagramAlignOptions} controls the position of the calculated rectangle relative to the viewport.
+     * "Center middle" will position the items in the center. animate - controls if the pan should be animated.
+     */
+    bringIntoView(item: Shape | Connection | (Shape | Connection)[] | Rect, options?: BringIntoViewOptions): void;
+    /**
+     * Aligns shapes in the specified direction.
+     * @param {Direction} Direction to align shapes.
+     */
+    alignShapes(direction: Direction): void;
+    /**
+     * @hidden
+     * Pans the Diagram.
+     * @param {Point} Pan coordinates.
+     * @param {boolean} Whether to animate the pan.
+     * @returns {Point} Current pan position.
+     */
+    pan(pan: Point, animate?: boolean): Point;
+    /**
+     * Gets the current `Diagram` viewport rectangle.
+     * @returns {Rect} Viewport rectangle.
+     */
+    viewport(): Rect;
+    /**
+     * Copies selected items to clipboard.
+     */
+    copy(): void;
+    /**
+     * @hidden
+     * Cuts selected items to clipboard.
+     */
+    cut(): void;
+    /**
+     * Pastes items from clipboard.
+     */
+    paste(): void;
+    /**
+     * Gets the bounding rectangle of the given items.
+     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
+     * @param {boolean} Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
+     * @returns {Rect} Bounding rectangle.
+     */
+    boundingBox(items: Shape | Connection | (Shape | Connection)[], origin?: boolean): Rect;
+    /**
+     * Converts document coordinates to view coordinates.
+     * @param {Point} Point in document coordinates.
+     * @returns {Point} Point in view coordinates.
+     */
+    documentToView(point: Point): Point;
+    /**
+     * Converts view coordinates to document coordinates.
+     * @param {Point} Point in view coordinates.
+     * @returns {Point} Point in document coordinates.
+     */
+    viewToDocument(point: Point): Point;
+    /**
+     * Converts view coordinates to model coordinates.
+     * @param {Point} Point in view coordinates.
+     * @returns {Point} Point in model coordinates.
+     */
+    viewToModel(point: Point): any;
+    /**
+     * Converts model coordinates to view coordinates.
+     * @param {Point} Point in model coordinates.
+     * @returns {Point} Point in view coordinates.
+     */
+    modelToView(point: Point): any;
+    /**
+     * Converts model coordinates to layer coordinates.
+     * @param {Point} Point in model coordinates.
+     * @returns {Point} Point in layer coordinates.
+     */
+    modelToLayer(point: Point): any;
+    /**
+     * Converts layer coordinates to model coordinates.
+     * @param {Point} Point in layer coordinates.
+     * @returns {Point} Point in model coordinates.
+     */
+    layerToModel(point: Point): any;
+    /**
+     * Converts document coordinates to model coordinates.
+     * @param {Point} Point in document coordinates.
+     * @returns {Point} Point in model coordinates.
+     */
+    documentToModel(point: Point): any;
+    /**
+     * Converts model coordinates to document coordinates.
+     * @param {Point} Point in model coordinates.
+     * @returns {Point} Point in document coordinates.
+     */
+    modelToDocument(point: Point): Point;
+    /**
+     * Gets a shape on the basis of its identifier.
+     * @param {string} The identifier of a shape.
+     * @returns {Shape} The shape with the specified ID.
+     */
+    getShapeById(id: string): Shape;
+    /**
+     * Exports the diagram's DOM visual representation for rendering or export purposes.
+     * Creates a clipped group containing the canvas content with proper transformations.
+     * @returns {Group} A drawing Group element containing the exported DOM visual
+     */
+    exportDOMVisual(): Group;
+    /**
+     * Exports the diagram's visual representation with proper scaling based on zoom level.
+     * Creates a scaled group containing the main layer content.
+     * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
+     */
+    exportVisual(): Group;
+    /**
+     * Handles the tooltipShow event from the diagram widget.
+     */
+    private handleTooltipShow;
+    private showTooltip;
+    private popupClass;
+    private setCustomTemplate;
+    /**
+     * Handles the tooltipHide event from the diagram widget.
+     */
+    private handleTooltipHide;
+    /**
+     * Hides the current tooltip and cleans up resources.
+     */
+    private hideTooltip;
+    protected activeEmitter(name: string): any;
+    /**
+     * Binds event handlers to the diagram widget.
+     */
+    private bindDiagramEvents;
+    /**
+     * Converts user data to Diagram model format using field mappings.
+     */
+    private convertUserData;
+    private addDataItemProperty;
+    /**
+     * Creates field mapping configuration from model fields.
+     */
+    private createFieldMapping;
+    private init;
+    private updateOptions;
+    private loadOptions;
+    private getNormalizedNavigationOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "tooltipShow": "tooltipShow"; "tooltipHide": "tooltipHide"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
+}
+
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Diagram component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Diagram module
+ * import { DiagramModule } from '@progress/kendo-angular-diagrams';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, DiagramModule],
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+declare class DiagramModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DiagramModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DiagramModule, never, [typeof DiagramComponent, typeof ShapeTooltipTemplateDirective, typeof ConnectionTooltipTemplateDirective], [typeof DiagramComponent, typeof ShapeTooltipTemplateDirective, typeof ConnectionTooltipTemplateDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DiagramModule>;
+}
+
+/**
+ * Represents the utility array that that contains all `Diagram`-related components and directives.
+ *
+ * Use `KENDO_DIAGRAM` to import all Diagram components and directives at once.
+ *
+ * @example
+ * ```typescript
+ * import { Component } from '@angular/core';
+ * import { KENDO_DIAGRAM } from '@progress/kendo-angular-diagrams';
+ *
+ * @Component({
+ *   selector: 'my-diagram-app',
+ *   standalone: true,
+ *   imports: [KENDO_DIAGRAM],
+ *   template: `...`
+ * })
+ * export class DiagramAppComponent {}
+ * ```
+ */
+declare const KENDO_DIAGRAM: readonly [typeof DiagramComponent, typeof ShapeTooltipTemplateDirective, typeof ConnectionTooltipTemplateDirective];
+
+export { ConnectionTooltipTemplateDirective, DiagramComponent, DiagramModule, KENDO_DIAGRAM, ShapeTooltipTemplateDirective };
+export type { ConnectionDefaults, ConnectionModelFields, ConnectionOptions, DiagramNavigationOptions, ShapeDefaults, ShapeModelFields, ShapeOptions, TooltipOptions };