@progress/kendo-angular-diagrams 19.3.0-develop.8 → 19.3.0

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.
      */
@@ -161,6 +161,10 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @hidden
      */
     showLicenseWatermark: boolean;
+    /**
+     * @hidden
+     */
+    licenseMessage?: string;
     private options;
     constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone);
     ngOnChanges(changes: SimpleChanges): void;

package/esm2022/diagram.component.mjs

@@ -6,13 +6,13 @@ import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output
 import { Diagram } from '@progress/kendo-diagram-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { hasObservers, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import { NgIf } from '@angular/common';
 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.
  *
@@ -35,7 +35,7 @@ export class DiagramComponent {
      * Defines the connections that render between the shapes in the Diagram.
      * Changing this property dynamically reinitializes the Diagram.
      */
-    connections;
+    connections = [];
     /**
      * 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.
@@ -46,7 +46,7 @@ export class DiagramComponent {
      * The layout of a diagram consists of arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user.
      * Changing the property value dynamically triggers a reinitialization of the Diagram.
      */
-    layout = { type: 'tree' };
+    layout;
     /**
      * Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
      * @default true
@@ -72,7 +72,7 @@ export class DiagramComponent {
      * Defines the shapes that render in the Diagram.
      * Changing the property value dynamically triggers a reinitialization of the Diagram.
      */
-    shapes;
+    shapes = [];
     /**
      * Defines the zoom level of the Diagram.
      *
@@ -149,29 +149,33 @@ 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
      */
     showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -182,14 +186,14 @@ export class DiagramComponent {
         zoomMin: this.zoomMin,
         zoomRate: this.zoomRate,
         shapeDefaults: this.shapeDefaults,
-        connectionDefaults: this.connectionDefaults,
-        layout: this.layout,
+        connectionDefaults: this.connectionDefaults
     };
     constructor(wrapperElement, renderer, zone) {
         this.wrapperElement = wrapperElement;
         this.renderer = renderer;
         this.zone = zone;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
     ngOnChanges(changes) {
@@ -245,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();
@@ -262,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';
                 }
@@ -285,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.
@@ -314,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.
@@ -323,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;
     }
     /**
@@ -333,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;
     }
     /**
@@ -342,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.
@@ -352,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.
@@ -373,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.
@@ -401,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.
@@ -409,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.
@@ -418,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
@@ -435,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.
@@ -470,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.
@@ -478,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.
@@ -486,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.
@@ -494,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.
@@ -502,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.
@@ -510,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.
@@ -518,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.
@@ -526,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.
@@ -534,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.
@@ -542,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.
@@ -550,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.
@@ -558,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];
@@ -567,26 +571,25 @@ 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.diagram.bringIntoView(this.diagram.shapes);
+            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: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -595,7 +598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoDiagram',
                     selector: 'kendo-diagram',
                     template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
         `,
                     imports: [WatermarkOverlayComponent, NgIf]
                 }]

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 } 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: 1752479574,
-    version: '19.3.0-develop.8',
+    publishDate: 1755030781,
+    version: '19.3.0',
     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,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { events, loadTheme, Diagram } from '@progress/kendo-diagram-common';
-export { Connection, Connector, Diagram, 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';
-import { shouldShowValidationUI, hasObservers, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { getLicenseMessage, shouldShowValidationUI, hasObservers, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import { NgIf } from '@angular/common';
 
 /**
@@ -17,8 +17,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-diagrams',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1752479574,
-    version: '19.3.0-develop.8',
+    publishDate: 1755030781,
+    version: '19.3.0',
     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.
  *
@@ -72,7 +72,7 @@ class DiagramComponent {
      * Defines the connections that render between the shapes in the Diagram.
      * Changing this property dynamically reinitializes the Diagram.
      */
-    connections;
+    connections = [];
     /**
      * 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.
@@ -83,7 +83,7 @@ class DiagramComponent {
      * The layout of a diagram consists of arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user.
      * Changing the property value dynamically triggers a reinitialization of the Diagram.
      */
-    layout = { type: 'tree' };
+    layout;
     /**
      * Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
      * @default true
@@ -109,7 +109,7 @@ class DiagramComponent {
      * Defines the shapes that render in the Diagram.
      * Changing the property value dynamically triggers a reinitialization of the Diagram.
      */
-    shapes;
+    shapes = [];
     /**
      * Defines the zoom level of the Diagram.
      *
@@ -186,29 +186,33 @@ 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
      */
     showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -219,14 +223,14 @@ class DiagramComponent {
         zoomMin: this.zoomMin,
         zoomRate: this.zoomRate,
         shapeDefaults: this.shapeDefaults,
-        connectionDefaults: this.connectionDefaults,
-        layout: this.layout,
+        connectionDefaults: this.connectionDefaults
     };
     constructor(wrapperElement, renderer, zone) {
         this.wrapperElement = wrapperElement;
         this.renderer = renderer;
         this.zone = zone;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
     ngOnChanges(changes) {
@@ -282,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();
@@ -299,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';
                 }
@@ -322,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.
@@ -351,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.
@@ -360,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;
     }
     /**
@@ -370,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;
     }
     /**
@@ -379,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.
@@ -389,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.
@@ -410,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.
@@ -438,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.
@@ -446,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.
@@ -455,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
@@ -472,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.
@@ -507,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.
@@ -515,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.
@@ -523,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.
@@ -531,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.
@@ -539,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.
@@ -547,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.
@@ -555,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.
@@ -563,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.
@@ -571,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.
@@ -579,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.
@@ -587,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.
@@ -595,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];
@@ -604,26 +608,25 @@ 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.diagram.bringIntoView(this.diagram.shapes);
+            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: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -632,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     exportAs: 'kendoDiagram',
                     selector: 'kendo-diagram',
                     template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
         `,
                     imports: [WatermarkOverlayComponent, NgIf]
                 }]

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 } 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.8",
+  "version": "19.3.0",
   "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": 1752479574,
+      "publishDate": 1755030781,
       "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"
     }
   },
@@ -27,20 +27,20 @@
     "@angular/common": "16 - 20",
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
-    "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-common": "19.3.0-develop.8",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.8",
-    "@progress/kendo-angular-dialog": "19.3.0-develop.8",
-    "@progress/kendo-angular-dropdowns": "19.3.0-develop.8",
-    "@progress/kendo-angular-icons": "19.3.0-develop.8",
-    "@progress/kendo-angular-inputs": "19.3.0-develop.8",
-    "@progress/kendo-angular-popup": "19.3.0-develop.8",
+    "@progress/kendo-licensing": "^1.7.0",
+    "@progress/kendo-angular-common": "19.3.0",
+    "@progress/kendo-angular-buttons": "19.3.0",
+    "@progress/kendo-angular-dialog": "19.3.0",
+    "@progress/kendo-angular-dropdowns": "19.3.0",
+    "@progress/kendo-angular-icons": "19.3.0",
+    "@progress/kendo-angular-inputs": "19.3.0",
+    "@progress/kendo-angular-popup": "19.3.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.8",
-    "@progress/kendo-diagram-common": "1.1.0"
+    "@progress/kendo-angular-schematics": "19.3.0",
+    "@progress/kendo-diagram-common": "1.2.2"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-diagrams.mjs",