@progress/kendo-angular-diagrams 19.3.0-develop.23 → 19.3.0-develop.25

package/diagram.component.d.ts

@@ -7,7 +7,7 @@ import { ConnectionDefaults, ConnectionOptions, DiagramEditable, DiagramLayout,
 import { Group } from '@progress/kendo-drawing';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagrams %}).
+ * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagram %}).
  *
  * The Diagram component is used to create organizational charts, and other types of diagrams.
  *
@@ -144,7 +144,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
-    diagram: Diagram;
+    diagramWidget: Diagram;
     /**
      * The currently selected items in the Diagram.
      */

package/esm2022/diagram.component.mjs

@@ -12,7 +12,7 @@ import { events, loadTheme } from '@progress/kendo-diagram-common';
 import { CONNECTION_DEFAULTS, SHAPE_DEFAULTS } from './utils';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagrams %}).
+ * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagram %}).
  *
  * The Diagram component is used to create organizational charts, and other types of diagrams.
  *
@@ -149,24 +149,24 @@ export class DiagramComponent {
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
-    diagram;
+    diagramWidget;
     /**
      * The currently selected items in the Diagram.
      */
     get selection() {
-        return this.diagram?.select();
+        return this.diagramWidget?.select();
     }
     /**
      * The actual shapes created by the Diagram.
      */
     get diagramShapes() {
-        return this.diagram?.shapes;
+        return this.diagramWidget?.shapes;
     }
     /**
      * The actual connections created by the Diagram.
      */
     get diagramConnections() {
-        return this.diagram?.connections;
+        return this.diagramWidget?.connections;
     }
     /**
      * @hidden
@@ -249,14 +249,14 @@ export class DiagramComponent {
         }
         if (changes['layout']) {
             this.updateOptions('layout');
-            this.diagram?.layout(this.options.layout);
+            this.diagramWidget?.layout(this.options.layout);
         }
         if (changes['pannable']) {
             this.updateOptions('pannable');
         }
         if (changes['zoom']) {
             this.updateOptions('zoom');
-            this.diagram?.zoom(this.diagram.options.zoom);
+            this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
         }
         if (recreate) {
             this.init();
@@ -266,7 +266,7 @@ export class DiagramComponent {
         this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
         this.init();
         events.forEach((eventName) => {
-            this.diagram.bind(eventName, (e) => {
+            this.diagramWidget.bind(eventName, (e) => {
                 if (eventName === 'click') {
                     eventName = 'diagramClick';
                 }
@@ -289,27 +289,27 @@ export class DiagramComponent {
         });
     }
     ngOnDestroy() {
-        this.diagram?.destroy();
+        this.diagramWidget?.destroy();
     }
     /**
      * 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() {
-        return this.diagram?.save();
+        return this.diagramWidget?.save();
     }
     /**
      * Focuses the Diagram.
      * @returns {boolean} true if focus was set successfully.
      */
     focus() {
-        return this.diagram?.focus();
+        return this.diagramWidget?.focus();
     }
     /**
      * Clears the Diagram.
      */
     clear() {
-        this.diagram?.clear();
+        this.diagramWidget?.clear();
     }
     /**
      * Determines whether two shapes are connected.
@@ -318,7 +318,7 @@ export class DiagramComponent {
      * @returns {boolean} true if the two shapes are connected.
      */
     connected(source, target) {
-        return this.diagram?.connected(source, target);
+        return this.diagramWidget?.connected(source, target);
     }
     /**
      * Adds connection to the Diagram.
@@ -327,7 +327,7 @@ export class DiagramComponent {
      * @returns {Connection} The newly created connection.
      */
     addConnection(connection, undoable) {
-        const newConnection = this.diagram?.addConnection(connection, undoable);
+        const newConnection = this.diagramWidget?.addConnection(connection, undoable);
         return newConnection;
     }
     /**
@@ -337,7 +337,7 @@ export class DiagramComponent {
      * @returns {Shape} The newly created shape.
      */
     addShape(item, undoable) {
-        const newShape = this.diagram?.addShape(item, undoable);
+        const newShape = this.diagramWidget?.addShape(item, undoable);
         return newShape;
     }
     /**
@@ -346,7 +346,7 @@ export class DiagramComponent {
      * @param {Boolean} Boolean indicating if the action should be undoable.
      */
     remove(items, undoable) {
-        this.diagram?.remove(items, undoable);
+        this.diagramWidget?.remove(items, undoable);
     }
     /**
      * Connects two items in the Diagram.
@@ -356,19 +356,19 @@ export class DiagramComponent {
      * @returns {Connection} The created connection.
      */
     connect(source, target, options) {
-        return this.diagram?.connect(source, target, options);
+        return this.diagramWidget?.connect(source, target, options);
     }
     /**
      * Executes the next undoable action on top of the undo stack if any.
      */
     undo() {
-        this.diagram?.undo();
+        this.diagramWidget?.undo();
     }
     /**
      * Executes the previous undoable action on top of the redo stack if any.
      */
     redo() {
-        this.diagram?.redo();
+        this.diagramWidget?.redo();
     }
     /**
      * Selects items on the basis of the given input.
@@ -377,27 +377,27 @@ export class DiagramComponent {
      * @returns {(Shape | Connection)[]} Array of selected items.
      */
     select(items, options) {
-        return this.diagram?.select(items, options);
+        return this.diagramWidget?.select(items, options);
     }
     /**
      * Selects all items in the Diagram.
      */
     selectAll() {
-        this.diagram?.selectAll();
+        this.diagramWidget?.selectAll();
     }
     /**
      * Selects items in the specified area.
      * @param {Rect} rect Rectangle area to select.
      */
     selectArea(rect) {
-        this.diagram?.selectArea(rect);
+        this.diagramWidget?.selectArea(rect);
     }
     /**
      * 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) {
-        this.diagram?.deselect(items);
+        this.diagramWidget?.deselect(items);
     }
     /**
      * Brings to front the passed items.
@@ -405,7 +405,7 @@ export class DiagramComponent {
      * @param {boolean} By default the action is undoable.
      */
     bringToFront(items, undoable) {
-        this.diagram?.toFront(items, undoable);
+        this.diagramWidget?.toFront(items, undoable);
     }
     /**
      * Sends to back the passed items.
@@ -413,7 +413,7 @@ export class DiagramComponent {
      * @param {boolean} By default the action is undoable.
      */
     bringToBack(items, undoable) {
-        this.diagram?.toBack(items, undoable);
+        this.diagramWidget?.toBack(items, undoable);
     }
     /**
      * Bring into view the passed item(s) or rectangle.
@@ -422,14 +422,14 @@ export class DiagramComponent {
      * "Center middle" will position the items in the center. animate - controls if the pan should be animated.
      */
     bringIntoView(item, options) {
-        this.diagram?.bringIntoView(item, options);
+        this.diagramWidget?.bringIntoView(item, options);
     }
     /**
      * Aligns shapes in the specified direction.
      * @param {Direction} Direction to align shapes.
      */
     alignShapes(direction) {
-        this.diagram?.alignShapes(direction);
+        this.diagramWidget?.alignShapes(direction);
     }
     /**
      * @hidden
@@ -439,33 +439,33 @@ export class DiagramComponent {
      * @returns {Point} Current pan position.
      */
     pan(pan, animate) {
-        return this.diagram?.pan(pan, animate);
+        return this.diagramWidget?.pan(pan, animate);
     }
     /**
      * Gets the current `Diagram` viewport rectangle.
      * @returns {Rect} Viewport rectangle.
      */
     viewport() {
-        return this.diagram?.viewport();
+        return this.diagramWidget?.viewport();
     }
     /**
      * Copies selected items to clipboard.
      */
     copy() {
-        this.diagram?.copy();
+        this.diagramWidget?.copy();
     }
     /**
      * @hidden
      * Cuts selected items to clipboard.
      */
     cut() {
-        this.diagram?.cut();
+        this.diagramWidget?.cut();
     }
     /**
      * Pastes items from clipboard.
      */
     paste() {
-        this.diagram?.paste();
+        this.diagramWidget?.paste();
     }
     /**
      * Gets the bounding rectangle of the given items.
@@ -474,7 +474,7 @@ export class DiagramComponent {
      * @returns {Rect} Bounding rectangle.
      */
     boundingBox(items, origin) {
-        return this.diagram?.boundingBox(items, origin);
+        return this.diagramWidget?.boundingBox(items, origin);
     }
     /**
      * Converts document coordinates to view coordinates.
@@ -482,7 +482,7 @@ export class DiagramComponent {
      * @returns {Point} Point in view coordinates.
      */
     documentToView(point) {
-        return this.diagram?.documentToView(point);
+        return this.diagramWidget?.documentToView(point);
     }
     /**
      * Converts view coordinates to document coordinates.
@@ -490,7 +490,7 @@ export class DiagramComponent {
      * @returns {Point} Point in document coordinates.
      */
     viewToDocument(point) {
-        return this.diagram?.viewToDocument(point);
+        return this.diagramWidget?.viewToDocument(point);
     }
     /**
      * Converts view coordinates to model coordinates.
@@ -498,7 +498,7 @@ export class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     viewToModel(point) {
-        return this.diagram?.viewToModel(point);
+        return this.diagramWidget?.viewToModel(point);
     }
     /**
      * Converts model coordinates to view coordinates.
@@ -506,7 +506,7 @@ export class DiagramComponent {
      * @returns {Point} Point in view coordinates.
      */
     modelToView(point) {
-        return this.diagram?.modelToView(point);
+        return this.diagramWidget?.modelToView(point);
     }
     /**
      * Converts model coordinates to layer coordinates.
@@ -514,7 +514,7 @@ export class DiagramComponent {
      * @returns {Point} Point in layer coordinates.
      */
     modelToLayer(point) {
-        return this.diagram?.modelToLayer(point);
+        return this.diagramWidget?.modelToLayer(point);
     }
     /**
      * Converts layer coordinates to model coordinates.
@@ -522,7 +522,7 @@ export class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     layerToModel(point) {
-        return this.diagram?.layerToModel(point);
+        return this.diagramWidget?.layerToModel(point);
     }
     /**
      * Converts document coordinates to model coordinates.
@@ -530,7 +530,7 @@ export class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     documentToModel(point) {
-        return this.diagram?.documentToModel(point);
+        return this.diagramWidget?.documentToModel(point);
     }
     /**
      * Converts model coordinates to document coordinates.
@@ -538,7 +538,7 @@ export class DiagramComponent {
      * @returns {Point} Point in document coordinates.
      */
     modelToDocument(point) {
-        return this.diagram?.modelToDocument(point);
+        return this.diagramWidget?.modelToDocument(point);
     }
     /**
      * Gets a shape on the basis of its identifier.
@@ -546,7 +546,7 @@ export class DiagramComponent {
      * @returns {Shape} The shape with the specified ID.
      */
     getShapeById(id) {
-        return this.diagram?.getShapeById(id);
+        return this.diagramWidget?.getShapeById(id);
     }
     /**
      * Exports the diagram's DOM visual representation for rendering or export purposes.
@@ -554,7 +554,7 @@ export class DiagramComponent {
      * @returns {Group} A drawing Group element containing the exported DOM visual
      */
     exportDOMVisual() {
-        return this.diagram?.exportDOMVisual();
+        return this.diagramWidget?.exportDOMVisual();
     }
     /**
      * Exports the diagram's visual representation with proper scaling based on zoom level.
@@ -562,7 +562,7 @@ export class DiagramComponent {
      * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
      */
     exportVisual() {
-        return this.diagram?.exportVisual();
+        return this.diagramWidget?.exportVisual();
     }
     activeEmitter(name) {
         const emitter = this[name];
@@ -571,20 +571,20 @@ export class DiagramComponent {
         }
     }
     init() {
-        if (this.diagram) {
-            this.diagram.destroy();
+        if (this.diagramWidget) {
+            this.diagramWidget.destroy();
         }
         this.zone.runOutsideAngular(() => {
             const theme = loadTheme(this.wrapperElement.nativeElement);
-            this.diagram = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
-            this.diagram._createOptionElements();
-            this.diagram.zoom(this.diagram.options.zoom);
-            this.diagram.canvas.draw();
+            this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
+            this.diagramWidget._createOptionElements();
+            this.diagramWidget.zoom(this.diagramWidget.options.zoom);
+            this.diagramWidget.canvas.draw();
         });
     }
     updateOptions(prop) {
         this.options[prop] = this[prop];
-        this.diagram?.setOptions(this.options);
+        this.diagramWidget?.setOptions(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `

package/esm2022/index.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { Shape, Connection, Connector, Diagram, Point, Rect, Circle, Group, FlowchartShapeType } from '@progress/kendo-diagram-common';
+export { Shape, Connection, Connector, Diagram, Point, Rect, 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 } from '@progress/kendo-diagram-common';
 export { DiagramModule } from './diagram.module';
 export { DiagramComponent } from './diagram.component';
 export * from './directives';

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-diagrams',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1754484586,
-    version: '19.3.0-develop.23',
+    publishDate: 1754497834,
+    version: '19.3.0-develop.25',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };

package/fesm2022/progress-kendo-angular-diagrams.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { events, loadTheme, Diagram } from '@progress/kendo-diagram-common';
-export { Circle, Connection, Connector, Diagram, FlowchartShapeType, Group, Point, Rect, Shape } from '@progress/kendo-diagram-common';
+export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, DataInputOutput, DataStorage, Database, Decision, Delay, Diagram, DirectAccessStorage, Display, Document, Extract, FlowchartShapeType, Group, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Shape, Sort, SummingJunction, Terminator, TextBlock } from '@progress/kendo-diagram-common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, HostBinding, Input, Output, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -17,8 +17,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-diagrams',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1754484586,
-    version: '19.3.0-develop.23',
+    publishDate: 1754497834,
+    version: '19.3.0-develop.25',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
 };
 
@@ -49,7 +49,7 @@ const SHAPE_DEFAULTS = {
 };
 
 /**
- * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagrams %}).
+ * Represents the [Kendo UI Diagram component for Angular({% slug overview_diagram %}).
  *
  * The Diagram component is used to create organizational charts, and other types of diagrams.
  *
@@ -186,24 +186,24 @@ class DiagramComponent {
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
-    diagram;
+    diagramWidget;
     /**
      * The currently selected items in the Diagram.
      */
     get selection() {
-        return this.diagram?.select();
+        return this.diagramWidget?.select();
     }
     /**
      * The actual shapes created by the Diagram.
      */
     get diagramShapes() {
-        return this.diagram?.shapes;
+        return this.diagramWidget?.shapes;
     }
     /**
      * The actual connections created by the Diagram.
      */
     get diagramConnections() {
-        return this.diagram?.connections;
+        return this.diagramWidget?.connections;
     }
     /**
      * @hidden
@@ -286,14 +286,14 @@ class DiagramComponent {
         }
         if (changes['layout']) {
             this.updateOptions('layout');
-            this.diagram?.layout(this.options.layout);
+            this.diagramWidget?.layout(this.options.layout);
         }
         if (changes['pannable']) {
             this.updateOptions('pannable');
         }
         if (changes['zoom']) {
             this.updateOptions('zoom');
-            this.diagram?.zoom(this.diagram.options.zoom);
+            this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
         }
         if (recreate) {
             this.init();
@@ -303,7 +303,7 @@ class DiagramComponent {
         this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
         this.init();
         events.forEach((eventName) => {
-            this.diagram.bind(eventName, (e) => {
+            this.diagramWidget.bind(eventName, (e) => {
                 if (eventName === 'click') {
                     eventName = 'diagramClick';
                 }
@@ -326,27 +326,27 @@ class DiagramComponent {
         });
     }
     ngOnDestroy() {
-        this.diagram?.destroy();
+        this.diagramWidget?.destroy();
     }
     /**
      * 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() {
-        return this.diagram?.save();
+        return this.diagramWidget?.save();
     }
     /**
      * Focuses the Diagram.
      * @returns {boolean} true if focus was set successfully.
      */
     focus() {
-        return this.diagram?.focus();
+        return this.diagramWidget?.focus();
     }
     /**
      * Clears the Diagram.
      */
     clear() {
-        this.diagram?.clear();
+        this.diagramWidget?.clear();
     }
     /**
      * Determines whether two shapes are connected.
@@ -355,7 +355,7 @@ class DiagramComponent {
      * @returns {boolean} true if the two shapes are connected.
      */
     connected(source, target) {
-        return this.diagram?.connected(source, target);
+        return this.diagramWidget?.connected(source, target);
     }
     /**
      * Adds connection to the Diagram.
@@ -364,7 +364,7 @@ class DiagramComponent {
      * @returns {Connection} The newly created connection.
      */
     addConnection(connection, undoable) {
-        const newConnection = this.diagram?.addConnection(connection, undoable);
+        const newConnection = this.diagramWidget?.addConnection(connection, undoable);
         return newConnection;
     }
     /**
@@ -374,7 +374,7 @@ class DiagramComponent {
      * @returns {Shape} The newly created shape.
      */
     addShape(item, undoable) {
-        const newShape = this.diagram?.addShape(item, undoable);
+        const newShape = this.diagramWidget?.addShape(item, undoable);
         return newShape;
     }
     /**
@@ -383,7 +383,7 @@ class DiagramComponent {
      * @param {Boolean} Boolean indicating if the action should be undoable.
      */
     remove(items, undoable) {
-        this.diagram?.remove(items, undoable);
+        this.diagramWidget?.remove(items, undoable);
     }
     /**
      * Connects two items in the Diagram.
@@ -393,19 +393,19 @@ class DiagramComponent {
      * @returns {Connection} The created connection.
      */
     connect(source, target, options) {
-        return this.diagram?.connect(source, target, options);
+        return this.diagramWidget?.connect(source, target, options);
     }
     /**
      * Executes the next undoable action on top of the undo stack if any.
      */
     undo() {
-        this.diagram?.undo();
+        this.diagramWidget?.undo();
     }
     /**
      * Executes the previous undoable action on top of the redo stack if any.
      */
     redo() {
-        this.diagram?.redo();
+        this.diagramWidget?.redo();
     }
     /**
      * Selects items on the basis of the given input.
@@ -414,27 +414,27 @@ class DiagramComponent {
      * @returns {(Shape | Connection)[]} Array of selected items.
      */
     select(items, options) {
-        return this.diagram?.select(items, options);
+        return this.diagramWidget?.select(items, options);
     }
     /**
      * Selects all items in the Diagram.
      */
     selectAll() {
-        this.diagram?.selectAll();
+        this.diagramWidget?.selectAll();
     }
     /**
      * Selects items in the specified area.
      * @param {Rect} rect Rectangle area to select.
      */
     selectArea(rect) {
-        this.diagram?.selectArea(rect);
+        this.diagramWidget?.selectArea(rect);
     }
     /**
      * 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) {
-        this.diagram?.deselect(items);
+        this.diagramWidget?.deselect(items);
     }
     /**
      * Brings to front the passed items.
@@ -442,7 +442,7 @@ class DiagramComponent {
      * @param {boolean} By default the action is undoable.
      */
     bringToFront(items, undoable) {
-        this.diagram?.toFront(items, undoable);
+        this.diagramWidget?.toFront(items, undoable);
     }
     /**
      * Sends to back the passed items.
@@ -450,7 +450,7 @@ class DiagramComponent {
      * @param {boolean} By default the action is undoable.
      */
     bringToBack(items, undoable) {
-        this.diagram?.toBack(items, undoable);
+        this.diagramWidget?.toBack(items, undoable);
     }
     /**
      * Bring into view the passed item(s) or rectangle.
@@ -459,14 +459,14 @@ class DiagramComponent {
      * "Center middle" will position the items in the center. animate - controls if the pan should be animated.
      */
     bringIntoView(item, options) {
-        this.diagram?.bringIntoView(item, options);
+        this.diagramWidget?.bringIntoView(item, options);
     }
     /**
      * Aligns shapes in the specified direction.
      * @param {Direction} Direction to align shapes.
      */
     alignShapes(direction) {
-        this.diagram?.alignShapes(direction);
+        this.diagramWidget?.alignShapes(direction);
     }
     /**
      * @hidden
@@ -476,33 +476,33 @@ class DiagramComponent {
      * @returns {Point} Current pan position.
      */
     pan(pan, animate) {
-        return this.diagram?.pan(pan, animate);
+        return this.diagramWidget?.pan(pan, animate);
     }
     /**
      * Gets the current `Diagram` viewport rectangle.
      * @returns {Rect} Viewport rectangle.
      */
     viewport() {
-        return this.diagram?.viewport();
+        return this.diagramWidget?.viewport();
     }
     /**
      * Copies selected items to clipboard.
      */
     copy() {
-        this.diagram?.copy();
+        this.diagramWidget?.copy();
     }
     /**
      * @hidden
      * Cuts selected items to clipboard.
      */
     cut() {
-        this.diagram?.cut();
+        this.diagramWidget?.cut();
     }
     /**
      * Pastes items from clipboard.
      */
     paste() {
-        this.diagram?.paste();
+        this.diagramWidget?.paste();
     }
     /**
      * Gets the bounding rectangle of the given items.
@@ -511,7 +511,7 @@ class DiagramComponent {
      * @returns {Rect} Bounding rectangle.
      */
     boundingBox(items, origin) {
-        return this.diagram?.boundingBox(items, origin);
+        return this.diagramWidget?.boundingBox(items, origin);
     }
     /**
      * Converts document coordinates to view coordinates.
@@ -519,7 +519,7 @@ class DiagramComponent {
      * @returns {Point} Point in view coordinates.
      */
     documentToView(point) {
-        return this.diagram?.documentToView(point);
+        return this.diagramWidget?.documentToView(point);
     }
     /**
      * Converts view coordinates to document coordinates.
@@ -527,7 +527,7 @@ class DiagramComponent {
      * @returns {Point} Point in document coordinates.
      */
     viewToDocument(point) {
-        return this.diagram?.viewToDocument(point);
+        return this.diagramWidget?.viewToDocument(point);
     }
     /**
      * Converts view coordinates to model coordinates.
@@ -535,7 +535,7 @@ class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     viewToModel(point) {
-        return this.diagram?.viewToModel(point);
+        return this.diagramWidget?.viewToModel(point);
     }
     /**
      * Converts model coordinates to view coordinates.
@@ -543,7 +543,7 @@ class DiagramComponent {
      * @returns {Point} Point in view coordinates.
      */
     modelToView(point) {
-        return this.diagram?.modelToView(point);
+        return this.diagramWidget?.modelToView(point);
     }
     /**
      * Converts model coordinates to layer coordinates.
@@ -551,7 +551,7 @@ class DiagramComponent {
      * @returns {Point} Point in layer coordinates.
      */
     modelToLayer(point) {
-        return this.diagram?.modelToLayer(point);
+        return this.diagramWidget?.modelToLayer(point);
     }
     /**
      * Converts layer coordinates to model coordinates.
@@ -559,7 +559,7 @@ class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     layerToModel(point) {
-        return this.diagram?.layerToModel(point);
+        return this.diagramWidget?.layerToModel(point);
     }
     /**
      * Converts document coordinates to model coordinates.
@@ -567,7 +567,7 @@ class DiagramComponent {
      * @returns {Point} Point in model coordinates.
      */
     documentToModel(point) {
-        return this.diagram?.documentToModel(point);
+        return this.diagramWidget?.documentToModel(point);
     }
     /**
      * Converts model coordinates to document coordinates.
@@ -575,7 +575,7 @@ class DiagramComponent {
      * @returns {Point} Point in document coordinates.
      */
     modelToDocument(point) {
-        return this.diagram?.modelToDocument(point);
+        return this.diagramWidget?.modelToDocument(point);
     }
     /**
      * Gets a shape on the basis of its identifier.
@@ -583,7 +583,7 @@ class DiagramComponent {
      * @returns {Shape} The shape with the specified ID.
      */
     getShapeById(id) {
-        return this.diagram?.getShapeById(id);
+        return this.diagramWidget?.getShapeById(id);
     }
     /**
      * Exports the diagram's DOM visual representation for rendering or export purposes.
@@ -591,7 +591,7 @@ class DiagramComponent {
      * @returns {Group} A drawing Group element containing the exported DOM visual
      */
     exportDOMVisual() {
-        return this.diagram?.exportDOMVisual();
+        return this.diagramWidget?.exportDOMVisual();
     }
     /**
      * Exports the diagram's visual representation with proper scaling based on zoom level.
@@ -599,7 +599,7 @@ class DiagramComponent {
      * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
      */
     exportVisual() {
-        return this.diagram?.exportVisual();
+        return this.diagramWidget?.exportVisual();
     }
     activeEmitter(name) {
         const emitter = this[name];
@@ -608,20 +608,20 @@ class DiagramComponent {
         }
     }
     init() {
-        if (this.diagram) {
-            this.diagram.destroy();
+        if (this.diagramWidget) {
+            this.diagramWidget.destroy();
         }
         this.zone.runOutsideAngular(() => {
             const theme = loadTheme(this.wrapperElement.nativeElement);
-            this.diagram = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
-            this.diagram._createOptionElements();
-            this.diagram.zoom(this.diagram.options.zoom);
-            this.diagram.canvas.draw();
+            this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
+            this.diagramWidget._createOptionElements();
+            this.diagramWidget.zoom(this.diagramWidget.options.zoom);
+            this.diagramWidget.canvas.draw();
         });
     }
     updateOptions(prop) {
         this.options[prop] = this[prop];
-        this.diagram?.setOptions(this.options);
+        this.diagramWidget?.setOptions(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `

package/index.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { DiagramOptions, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, ShapeDefaults, ShapeOptions, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, ConnectionOptions, ConnectionDefaults, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, Circle, Group, FlowchartShapeType } from '@progress/kendo-diagram-common';
+export { DiagramOptions, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, ShapeDefaults, ShapeOptions, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, ConnectionOptions, ConnectionDefaults, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Diagram, 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 } from '@progress/kendo-diagram-common';
 export { DiagramModule } from './diagram.module';
 export { DiagramComponent } from './diagram.component';
 export * from './directives';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-diagrams",
-  "version": "19.3.0-develop.23",
+  "version": "19.3.0-develop.25",
   "description": "Kendo UI Angular diagrams component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -18,7 +18,7 @@
     "friendlyName": "Diagrams",
     "package": {
       "productName": "Kendo UI for Angular",
-      "publishDate": 1754484586,
+      "publishDate": 1754497834,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
     }
   },
@@ -28,19 +28,19 @@
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "19.3.0-develop.23",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.23",
-    "@progress/kendo-angular-dialog": "19.3.0-develop.23",
-    "@progress/kendo-angular-dropdowns": "19.3.0-develop.23",
-    "@progress/kendo-angular-icons": "19.3.0-develop.23",
-    "@progress/kendo-angular-inputs": "19.3.0-develop.23",
-    "@progress/kendo-angular-popup": "19.3.0-develop.23",
+    "@progress/kendo-angular-common": "19.3.0-develop.25",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.25",
+    "@progress/kendo-angular-dialog": "19.3.0-develop.25",
+    "@progress/kendo-angular-dropdowns": "19.3.0-develop.25",
+    "@progress/kendo-angular-icons": "19.3.0-develop.25",
+    "@progress/kendo-angular-inputs": "19.3.0-develop.25",
+    "@progress/kendo-angular-popup": "19.3.0-develop.25",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.23",
-    "@progress/kendo-diagram-common": "1.2.0-develop.9"
+    "@progress/kendo-angular-schematics": "19.3.0-develop.25",
+    "@progress/kendo-diagram-common": "1.2.1"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-diagrams.mjs",