@progress/kendo-angular-diagrams 19.3.0-develop.9 → 19.3.1-develop.1

package/README.md

@@ -1,32 +1,58 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
-<img width="631" src="https://demos.telerik.com/kendo-angular-ui/assets/banner/npm-banner.svg">
+<a href="https://www.telerik.com/kendo-angular-ui/components/diagrams" target="_blank">
+<img width="631" src="https://demos.telerik.com/kendo-angular-ui/assets/banner/npm-banner.svg" alt="Kendo UI for Angular Diagram">
 </a>
 
-## Kendo UI for Angular Diagrams Component
+## Kendo UI for Angular Diagram Component
 
-> **Important**
+> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
+> * To use this package, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * Adding a valid license key file ensures a seamless experience during the trial period&mdash;no watermarks, no warnings, and full access to all components and features.
+> * Trial users can register for a free license key file. Without it, your trial may be interrupted by visual indicators or functionality limitations.
+> * Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
+> * Learn more: https://www.telerik.com/kendo-angular-ui/components/licensing
 >
-> -   This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
-> -   You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams).
-> -   To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams).
-> -   The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-diagrams) and speed up your development process!
+> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
+
+The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui/components/diagrams) enables you to create interactive diagrams, flowcharts, organizational charts, mind maps, and other visual representations of data and processes. The component provides rich functionality for building, editing, and visualizing complex hierarchical and network structures. This Diagram Component is built on Angular from the ground up, by a company with a long history of making enterprise-ready components, resulting in a highly performant and customizable solution.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular Diagram delivers are:
+
+* Workflow Diagram&mdash;Create workflow diagrams that visually represent a sequence of steps or processes. Workflow diagrams are useful for illustrating the flow of tasks, decisions, and actions in a process, making it easier to understand complex workflows. [Read more about Workflow Diagram...](https://www.telerik.com/kendo-angular-ui/components/diagrams/workflow-diagram)
+* Shapes and Customization&mdash;Create and customize shapes to represent your data visually. The component supports various shape types including circles, rectangles, images, and custom SVG shapes. Customize shape appearance with styles, colors, and text content. [Read more about Diagram shapes...](https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes)
+* Connections and Relationships&mdash;Connect shapes to visualize relationships and data flow through flexible connection options. The component supports different connection types including cascading and polyline connections, with customizable routing, styling, and interactive behavior. [Read more about Diagram connections...](https://www.telerik.com/kendo-angular-ui/components/diagrams/connections)
+* Automatic Layouts&mdash;Organize your Diagram automatically with built-in layout algorithms. Choose from tree, layered, force-directed, and radial layouts to create professional-looking diagrams without manual positioning. Each layout type offers extensive configuration options for fine-tuning the arrangement. [Read more about Diagram layouts...](https://www.telerik.com/kendo-angular-ui/components/diagrams/layouts)
+* Data Binding&mdash;Bind diagram shapes and connections to your data models for dynamic diagram generation. Support for hierarchical data structures makes it easy to create organizational charts, decision trees, and other data-driven visualizations. [Read more about Diagram data binding...](https://www.telerik.com/kendo-angular-ui/components/diagrams/data-binding)
+* Interactive Events&mdash;Respond to user interactions with a comprehensive set of events covering shape manipulation, connection changes, navigation, and selection. The event system enables you to build dynamic and responsive diagram applications. [Read more about Diagram events...](https://www.telerik.com/kendo-angular-ui/components/diagrams/events)
+* Editing and Manipulation&mdash;Enable users to create, modify, and delete diagram elements through intuitive drag-and-drop interactions. Control editing permissions per shape or globally, and provide tools for connecting, resizing, and repositioning elements.
+* Export Options&mdash;Export your Diagram to various formats including PDF, SVG, and PNG. The export feature provides options for customizing the output, such as page size, orientation, and quality. [Read more about Diagram export...](https://www.telerik.com/kendo-angular-ui/components/diagrams/pdf-export)
+* Zoom and Navigation&mdash;The Diagram allows users to zoom the graph in and out for better perception. The zoom feature supports both mouse wheel and pinch gestures, providing a smooth user experience. You can also programmatically control the zoom level and set limits to prevent excessive zooming.
+* Styling&mdash;Our components are designed to look great out of the box, but we understand that every application is different. That's why the [Progress Design System Kit](https://www.telerik.com/design-system) provides resources to help you customize the look and feel of your Kendo UI for Angular Diagram component. If time is of the essence, our [ThemeBuilder application](https://www.telerik.com/themebuilder) can help you quickly and seamlessly modify the component's appearance.
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular Diagram, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
--   [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
--   [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
--   [Blogs](https://www.telerik.com/blogs/kendo-ui)
--   [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui/components/diagrams/installation/getting-started)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
+* [Blogs](http://www.telerik.com/blogs/kendo-ui)
+* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
 ## Questions and Feedback
 
--   [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
--   [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
--   [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
--   [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
+* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
+* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
+* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
+* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
 
-_Copyright © 2025 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved._
+*Copyright © 2025 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
-_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._
+*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

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, isDocumentAvailable } 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,28 @@ export class DiagramComponent {
         }
     }
     init() {
-        if (this.diagram) {
-            this.diagram.destroy();
+        if (!isDocumentAvailable) {
+            return;
+        }
+        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 +601,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: 1752672505,
-    version: '19.3.0-develop.9',
+    publishDate: 1755502878,
+    version: '19.3.1-develop.1',
     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, isDocumentAvailable, 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: 1752672505,
-    version: '19.3.0-develop.9',
+    publishDate: 1755502878,
+    version: '19.3.1-develop.1',
     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,28 @@ class DiagramComponent {
         }
     }
     init() {
-        if (this.diagram) {
-            this.diagram.destroy();
+        if (!isDocumentAvailable) {
+            return;
+        }
+        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 +638,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.9",
+  "version": "19.3.1-develop.1",
   "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": 1752672505,
+      "publishDate": 1755502878,
       "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.9",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.9",
-    "@progress/kendo-angular-dialog": "19.3.0-develop.9",
-    "@progress/kendo-angular-dropdowns": "19.3.0-develop.9",
-    "@progress/kendo-angular-icons": "19.3.0-develop.9",
-    "@progress/kendo-angular-inputs": "19.3.0-develop.9",
-    "@progress/kendo-angular-popup": "19.3.0-develop.9",
+    "@progress/kendo-licensing": "^1.7.0",
+    "@progress/kendo-angular-common": "19.3.1-develop.1",
+    "@progress/kendo-angular-buttons": "19.3.1-develop.1",
+    "@progress/kendo-angular-dialog": "19.3.1-develop.1",
+    "@progress/kendo-angular-dropdowns": "19.3.1-develop.1",
+    "@progress/kendo-angular-icons": "19.3.1-develop.1",
+    "@progress/kendo-angular-inputs": "19.3.1-develop.1",
+    "@progress/kendo-angular-popup": "19.3.1-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.9",
-    "@progress/kendo-diagram-common": "1.1.0"
+    "@progress/kendo-angular-schematics": "19.3.1-develop.1",
+    "@progress/kendo-diagram-common": "1.2.2"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-diagrams.mjs",