@progress/kendo-angular-diagrams 21.0.1-develop.1 → 21.0.1-develop.3

package/diagram.component.d.ts

@@ -3,10 +3,10 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ConnectionOptions, DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, ShapeOptions, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
+import { DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { Group } from '@progress/kendo-drawing';
-import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults } from './index';
+import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults, ShapeOptions, ConnectionOptions } from './models';
 import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
 import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
 import * as i0 from "@angular/core";
@@ -121,6 +121,14 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @default 0.1
      */
     zoomRate?: number;
+    /**
+     * Returns the actual shape instances created by the `Diagram`.
+     */
+    get shapeInstances(): Shape[];
+    /**
+     * Returns the actual connection instances created by the `Diagram`.
+     */
+    get connectionInstances(): Connection[];
     /**
      * Fires when a shape or connection is created or removed.
      */

package/esm2022/diagram.component.mjs

@@ -8,7 +8,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { events, loadTheme } from '@progress/kendo-diagram-common';
 import { CONNECTION_DEFAULTS, SHAPE_DEFAULTS } from './utils';
 import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
@@ -126,6 +126,18 @@ export class DiagramComponent {
      * @default 0.1
      */
     zoomRate = 0.1;
+    /**
+     * Returns the actual shape instances created by the `Diagram`.
+     */
+    get shapeInstances() {
+        return this.diagramWidget?.shapes;
+    }
+    /**
+     * Returns the actual connection instances created by the `Diagram`.
+     */
+    get connectionInstances() {
+        return this.diagramWidget?.connections;
+    }
     /**
      * Fires when a shape or connection is created or removed.
      */
@@ -823,8 +835,10 @@ export class DiagramComponent {
         this.diagramWidget?.setOptions(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", 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", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", 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", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
 
         <ng-template #customTooltipTemplate>
             <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
@@ -833,7 +847,7 @@ export class DiagramComponent {
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -842,7 +856,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     exportAs: 'kendoDiagram',
                     selector: 'kendo-diagram',
                     template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
 
         <ng-template #customTooltipTemplate>
             <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
@@ -852,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             {{dataItem?.tooltipText}}
         </ng-template>
         `,
-                    imports: [WatermarkOverlayComponent, NgIf, NgTemplateOutlet, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective],
+                    imports: [WatermarkOverlayComponent, NgTemplateOutlet],
                     providers: [PopupService]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762953642,
-    version: '21.0.1-develop.1',
+    publishDate: 1762962828,
+    version: '21.0.1-develop.3',
     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

@@ -10,7 +10,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * @hidden
@@ -20,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762953642,
-    version: '21.0.1-develop.1',
+    publishDate: 1762962828,
+    version: '21.0.1-develop.3',
     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',
 };
 
@@ -246,6 +246,18 @@ class DiagramComponent {
      * @default 0.1
      */
     zoomRate = 0.1;
+    /**
+     * Returns the actual shape instances created by the `Diagram`.
+     */
+    get shapeInstances() {
+        return this.diagramWidget?.shapes;
+    }
+    /**
+     * Returns the actual connection instances created by the `Diagram`.
+     */
+    get connectionInstances() {
+        return this.diagramWidget?.connections;
+    }
     /**
      * Fires when a shape or connection is created or removed.
      */
@@ -943,8 +955,10 @@ class DiagramComponent {
         this.diagramWidget?.setOptions(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", 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", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", 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", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
 
         <ng-template #customTooltipTemplate>
             <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
@@ -953,7 +967,7 @@ class DiagramComponent {
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -962,7 +976,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     exportAs: 'kendoDiagram',
                     selector: 'kendo-diagram',
                     template: `
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
 
         <ng-template #customTooltipTemplate>
             <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
@@ -972,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             {{dataItem?.tooltipText}}
         </ng-template>
         `,
-                    imports: [WatermarkOverlayComponent, NgIf, NgTemplateOutlet, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective],
+                    imports: [WatermarkOverlayComponent, NgTemplateOutlet],
                     providers: [PopupService]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{

package/models.d.ts

@@ -76,6 +76,8 @@ export interface ShapeDefaults extends ShapeDefaultsCommon {
 export interface DiagramOptions extends DiagramOptionsCommon {
     shapeDefaults?: ShapeDefaults;
     connectionDefaults?: ConnectionDefaults;
+    shapes: Array<ShapeOptions>;
+    connections: Array<ConnectionOptions>;
 }
 /**
  * Defines the field mapping configuration for shapes data binding.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-diagrams",
-  "version": "21.0.1-develop.1",
+  "version": "21.0.1-develop.3",
   "description": "Kendo UI Angular diagrams component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1762953642,
+      "publishDate": 1762962828,
       "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"
     }
   },
@@ -29,18 +29,18 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "21.0.1-develop.1",
-    "@progress/kendo-angular-buttons": "21.0.1-develop.1",
-    "@progress/kendo-angular-dialog": "21.0.1-develop.1",
-    "@progress/kendo-angular-dropdowns": "21.0.1-develop.1",
-    "@progress/kendo-angular-icons": "21.0.1-develop.1",
-    "@progress/kendo-angular-inputs": "21.0.1-develop.1",
-    "@progress/kendo-angular-popup": "21.0.1-develop.1",
+    "@progress/kendo-angular-common": "21.0.1-develop.3",
+    "@progress/kendo-angular-buttons": "21.0.1-develop.3",
+    "@progress/kendo-angular-dialog": "21.0.1-develop.3",
+    "@progress/kendo-angular-dropdowns": "21.0.1-develop.3",
+    "@progress/kendo-angular-icons": "21.0.1-develop.3",
+    "@progress/kendo-angular-inputs": "21.0.1-develop.3",
+    "@progress/kendo-angular-popup": "21.0.1-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.1-develop.1",
+    "@progress/kendo-angular-schematics": "21.0.1-develop.3",
     "@progress/kendo-diagram-common": "1.5.1"
   },
   "schematics": "./schematics/collection.json",

package/utils.d.ts

@@ -2,7 +2,8 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ConnectionDefaults, EditableDefaults, ShapeDefaults, ShapeDefaultsEditable } from "@progress/kendo-diagram-common";
+import { EditableDefaults, ShapeDefaultsEditable } from "@progress/kendo-diagram-common";
+import { ConnectionDefaults, ShapeDefaults } from "./models";
 /** @hidden */
 export declare const DEFAULT_EDITABLE_SHAPE: ShapeDefaultsEditable;
 /** @hidden */