@progress/kendo-angular-diagrams 21.4.1 → 22.0.0

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

@@ -5,7 +5,7 @@
 import { placeTooltip, events, convertToDiagramModel, loadTheme, Diagram } from '@progress/kendo-diagram-common';
 export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, DataInputOutput, DataStorage, Database, Decision, Delay, 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, convertToDiagramModel } from '@progress/kendo-diagram-common';
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, Component, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Directive, EventEmitter, ContentChild, ViewChild, Output, Input, HostBinding, Component, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { isPresent, getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
@@ -20,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1768393344,
-    version: '21.4.1',
+    publishDate: 1768402532,
+    version: '22.0.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',
 };
 
@@ -59,10 +59,10 @@ class ShapeTooltipTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDiagramShapeTooltipTemplate]',
@@ -101,10 +101,10 @@ class ConnectionTooltipTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDiagramConnectionTooltipTemplate]',
@@ -930,8 +930,8 @@ class DiagramComponent {
             largeStep: this._navigable.largeStep
         };
     }
-    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: "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", navigable: "navigable" }, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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: "17.0.0", version: "19.2.18", 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", navigable: "navigable" }, 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>
         }
@@ -945,7 +945,7 @@ class DiagramComponent {
         </ng-template>
         `, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1101,11 +1101,11 @@ const KENDO_DIAGRAM = [
  * ```
  */
 class DiagramModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective], exports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [DiagramComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective], exports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DiagramModule, imports: [DiagramComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DiagramModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_DIAGRAM],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-diagrams",
-  "version": "21.4.1",
+  "version": "22.0.0",
   "description": "Kendo UI Angular diagrams component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -15,33 +15,27 @@
     "Progress"
   ],
   "@progress": {
-    "friendlyName": "Diagrams",
-    "package": {
-      "productName": "Kendo UI for Angular",
-      "productCode": "KENDOUIANGULAR",
-      "publishDate": 1768393344,
-      "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"
-    }
+    "friendlyName": "Diagrams"
   },
   "peerDependencies": {
-    "@angular/animations": "18 - 21",
-    "@angular/common": "18 - 21",
-    "@angular/core": "18 - 21",
-    "@angular/platform-browser": "18 - 21",
+    "@angular/animations": "19 - 21",
+    "@angular/common": "19 - 21",
+    "@angular/core": "19 - 21",
+    "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "21.4.1",
-    "@progress/kendo-angular-buttons": "21.4.1",
-    "@progress/kendo-angular-dialog": "21.4.1",
-    "@progress/kendo-angular-dropdowns": "21.4.1",
-    "@progress/kendo-angular-icons": "21.4.1",
-    "@progress/kendo-angular-inputs": "21.4.1",
-    "@progress/kendo-angular-popup": "21.4.1",
+    "@progress/kendo-angular-common": "22.0.0",
+    "@progress/kendo-angular-buttons": "22.0.0",
+    "@progress/kendo-angular-dialog": "22.0.0",
+    "@progress/kendo-angular-dropdowns": "22.0.0",
+    "@progress/kendo-angular-icons": "22.0.0",
+    "@progress/kendo-angular-inputs": "22.0.0",
+    "@progress/kendo-angular-popup": "22.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "@progress/kendo-diagram-common": "^2.2.0",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.4.1"
+    "@progress/kendo-angular-schematics": "22.0.0"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-diagrams.mjs",
@@ -52,8 +46,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/progress-kendo-angular-diagrams.mjs",
-      "esm": "./esm2022/progress-kendo-angular-diagrams.mjs",
       "default": "./fesm2022/progress-kendo-angular-diagrams.mjs"
     }
   },

package/esm2022/connection-tooltip-template.directive.mjs

@@ -1,47 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Defines a custom template for connection tooltips within the `kendo-diagram` component.
- * Use this directive to customize how tooltips appear when hovering over connections.
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-diagram>
- *       <ng-template kendoDiagramConnectionTooltipTemplate let-dataItem>
- *         {{dataItem.tooltipContent}}
- *       </ng-template>
- *     </kendo-diagram>
- *   `
- * })
- * class AppComponent {
- * }
- *
- * ```
- */
-export class ConnectionTooltipTemplateDirective {
-    /**
-     * @hidden
-     */
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoDiagramConnectionTooltipTemplate]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

package/esm2022/diagram.component.mjs

@@ -1,948 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
-import { Diagram, convertToDiagramModel, placeTooltip } from '@progress/kendo-diagram-common';
-import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from './package-metadata';
-import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { NgTemplateOutlet } from '@angular/common';
-import { events, loadTheme } from '@progress/kendo-diagram-common';
-import { DEFAULT_NAVIGABLE_OPTIONS } from './utils';
-import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
-import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-popup";
-/**
- * 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.
- *
- * @example
- * ```html
- * <kendo-diagram [shapes]="shapesData"></kendo-diagram>
- * ```
- */
-export class DiagramComponent {
-    wrapperElement;
-    renderer;
-    zone;
-    popupService;
-    viewContainer;
-    diagramClass = true;
-    /**
-     * Defines the default configuration options applicable to all connections.
-     *
-     */
-    connectionDefaults;
-    /**
-     * Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
-     * Accepts either an array of `ConnectionOptions` or an array of any objects
-     * that will be mapped using the `connectionModelFields` configuration.
-     *
-     */
-    connections = [];
-    /**
-     * Defines the field mapping configuration for connections data binding ([see example](slug:diagram_data_binding#field-mapping)).
-     * Maps source object properties to `Diagram` connection properties.
-     * Only used when `connections` is an array of custom objects instead of `ConnectionOptions`.
-     */
-    connectionModelFields;
-    /**
-     * A set of settings to configure the `Diagram` behavior when the user attempts to drag, resize, or remove shapes.
-     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
-     *
-     * @default true
-     */
-    editable = true;
-    /**
-     * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
-     *
-     */
-    layout;
-    /**
-     * Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
-     *
-     * @default true
-     */
-    pannable = true;
-    /**
-     * Defines the `Diagram` selection options.
-     *
-     * By default, you can select shapes in the `Diagram` in one of two ways:
-     * - Clicking a single shape to select it and deselect any previously selected shapes.
-     * - Holding the `Ctrl/Cmd on MacOS` key while clicking multiple shapes to select them and any other shapes between them.
-     *
-     * Use the `selectable` configuration to allow single selection only, enable selection by drawing a rectangular area with the mouse around shapes in the canvas, or disable selection altogether.
-     *
-     * @default true
-     */
-    selectable = true;
-    /**
-     * Defines the default configuration options applicable to all shapes.
-     */
-    shapeDefaults;
-    /**
-     * Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
-     * Accepts either an array of `ShapeOptions` or an array of any objects
-     * that will be mapped using the `shapeModelFields` configuration.
-     *
-     */
-    shapes = [];
-    /**
-     * Defines the field mapping configuration for shapes data binding ([see example](slug:diagram_data_binding#field-mapping)).
-     * Maps source object properties to `Diagram` shape properties.
-     * Only used when `shapes` is an array of custom objects instead of `ShapeOptions`.
-     */
-    shapeModelFields;
-    /**
-     * Defines the zoom level of the `Diagram`.
-     *
-     * @default 1
-     */
-    zoom = 1;
-    /**
-     * Defines the maximum zoom level of the `Diagram`.
-     *
-     * @default 2
-     */
-    zoomMax = 2;
-    /**
-     * Defines the minimum zoom level of the `Diagram`.
-     *
-     * @default 0.1
-     */
-    zoomMin = 0.1;
-    /**
-     * Defines the zoom rate of the `Diagram`.
-     *
-     * @default 0.1
-     */
-    zoomRate = 0.1;
-    /**
-     * Enables keyboard navigation in the `Diagram`.
-     * When set to `true`, navigate between shapes using arrow keys.
-     * Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
-     *
-     * @default true
-     */
-    set navigable(_navigable) {
-        if (typeof _navigable === 'boolean') {
-            this._navigable = _navigable ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false };
-        }
-        else {
-            this._navigable = _navigable;
-            this._navigable.enabled = isPresent(this._navigable.enabled) ? this._navigable.enabled : true;
-        }
-        this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
-        this.diagramWidget?.setOptions(this.options);
-    }
-    get navigable() {
-        return this._navigable;
-    }
-    /**
-     * Fires when a shape or connection is created or removed.
-     */
-    change = new EventEmitter();
-    /**
-     * Fires when the user clicks on a shape or a connection.
-     */
-    diagramClick = new EventEmitter();
-    /**
-     * Fires when the user drags an item.
-     */
-    drag = new EventEmitter();
-    /**
-     * Fires when the user stops dragging an item.
-     */
-    dragEnd = new EventEmitter();
-    /**
-     * Fires when the user starts dragging an item.
-     */
-    dragStart = new EventEmitter();
-    /**
-     * Fires when the location or size of an item are changed.
-     */
-    shapeBoundsChange = new EventEmitter();
-    /**
-     * Fires when the mouse pointer enters a shape or connection.
-     */
-    mouseEnter = new EventEmitter();
-    /**
-     * Fires when the mouse pointer leaves a shape or connection.
-     */
-    mouseLeave = new EventEmitter();
-    /**
-     * Fires when the user pans the `Diagram`.
-     */
-    onPan = new EventEmitter();
-    /**
-     * Fires when the user selects one or more items.
-     */
-    onSelect = new EventEmitter();
-    /**
-     * Fires when the `Diagram` has finished zooming out.
-     */
-    zoomEnd = new EventEmitter();
-    /**
-     * Fires when the `Diagram` starts zooming in or out.
-     */
-    zoomStart = new EventEmitter();
-    /**
-     * Fires when a tooltip should shown for a shape or connection.
-     */
-    tooltipShow = new EventEmitter();
-    /**
-     * Fires when a tooltip should be hidden.
-     */
-    tooltipHide = new EventEmitter();
-    /**
-     * @hidden
-     * Represents the Diagram instance, holding the core functionality of the Diagram.
-     */
-    diagramWidget;
-    /**
-     * The currently selected items in the `Diagram`.
-     */
-    get selection() {
-        return this.diagramWidget?.select();
-    }
-    /**
-     * The actual shapes created by the `Diagram`.
-     */
-    get diagramShapes() {
-        return this.diagramWidget?.shapes;
-    }
-    /**
-     * The actual connections created by the `Diagram`.
-     */
-    get diagramConnections() {
-        return this.diagramWidget?.connections;
-    }
-    /**
-     * @hidden
-     */
-    showLicenseWatermark = false;
-    /**
-     * @hidden
-     */
-    licenseMessage;
-    /**
-     * @hidden
-     */
-    customTemplate;
-    _navigable = DEFAULT_NAVIGABLE_OPTIONS;
-    options = {
-        shapes: this.shapes,
-        connections: this.connections,
-        selectable: this.selectable,
-        editable: this.editable,
-        zoom: this.zoom,
-        zoomMax: this.zoomMax,
-        zoomMin: this.zoomMin,
-        zoomRate: this.zoomRate,
-        shapeDefaults: this.shapeDefaults,
-        connectionDefaults: this.connectionDefaults,
-        navigation: this.getNormalizedNavigationOptions()
-    };
-    /**
-     * Stores the converted shapes from user data.
-     */
-    convertedShapes = [];
-    /**
-     * Stores the converted connections from user data.
-     */
-    convertedConnections = [];
-    /**
-     * Current popup instance for tooltip.
-     */
-    tooltipPopup;
-    defaultTooltipTemplate;
-    customTooltipTemplate;
-    shapeTooltipTemplate;
-    connectionTooltipTemplate;
-    /**
-     * @hidden
-     * The original data item provided by the user. Passed in the tooltip template context.
-     */
-    dataItem;
-    constructor(wrapperElement, renderer, zone, popupService, viewContainer) {
-        this.wrapperElement = wrapperElement;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.popupService = popupService;
-        this.viewContainer = viewContainer;
-        const isValid = validatePackage(packageMetadata);
-        this.licenseMessage = getLicenseMessage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-    }
-    ngOnChanges(changes) {
-        if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
-            this.convertUserData();
-            this.options = {
-                ...this.options,
-                shapes: this.convertedShapes,
-                connections: this.convertedConnections
-            };
-            this.loadOptions(this.options);
-        }
-        if (changes['connectionDefaults']) {
-            this.options.connectionDefaults = { ...this.options.connectionDefaults, ...this.connectionDefaults };
-            this.loadOptions(this.options);
-        }
-        if (changes['shapeDefaults']) {
-            this.options.shapeDefaults = { ...this.options.shapeDefaults, ...this.shapeDefaults };
-            this.loadOptions(this.options);
-        }
-        if (changes['editable']) {
-            this.options = { ...this.options, editable: this.editable };
-            if (this.diagramWidget) {
-                this.diagramWidget.destroy();
-                this.init();
-                this.bindDiagramEvents();
-            }
-        }
-        if (changes['zoomMax']) {
-            this.updateOptions('zoomMax');
-        }
-        if (changes['zoomMin']) {
-            this.updateOptions('zoomMin');
-        }
-        if (changes['zoomRate']) {
-            this.updateOptions('zoomRate');
-        }
-        if (changes['selectable']) {
-            this.updateOptions('selectable');
-        }
-        if (changes['layout']) {
-            this.updateOptions('layout');
-            this.diagramWidget?.layout(this.options.layout);
-        }
-        if (changes['pannable']) {
-            this.updateOptions('pannable');
-        }
-        if (changes['zoom']) {
-            this.updateOptions('zoom');
-            this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
-        }
-    }
-    ngAfterViewInit() {
-        this.convertUserData();
-        this.options.shapes = this.convertedShapes;
-        this.options.connections = this.convertedConnections;
-        this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
-        this.init();
-        this.bindDiagramEvents();
-    }
-    ngOnDestroy() {
-        this.hideTooltip();
-        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.diagramWidget?.save();
-    }
-    /**
-     * Focuses the `Diagram`.
-     * @returns {boolean} true if focus was set successfully.
-     */
-    focus() {
-        return this.diagramWidget?.focus();
-    }
-    /**
-     * Clears the `Diagram`.
-     */
-    clear() {
-        this.diagramWidget?.clear();
-    }
-    /**
-     * Determines whether two shapes are connected.
-     * @param {Shape} Shape.
-     * @param {Shape} Shape.
-     * @returns {boolean} true if the two shapes are connected.
-     */
-    connected(source, target) {
-        return this.diagramWidget?.connected(source, target);
-    }
-    /**
-     * Adds connection to the `Diagram`.
-     * @param {Connection} Connection.
-     * @param {boolean} Boolean.
-     * @returns {Connection} The newly created connection.
-     */
-    addConnection(connection, undoable) {
-        const newConnection = this.diagramWidget?.addConnection(connection, undoable);
-        return newConnection;
-    }
-    /**
-     * Adds shape to the `Diagram`.
-     * @param {ShapeOptions | Shape | Point} If you pass a `Point`, a new Shape with default options will be created and positioned at that point.
-     * @param {boolean} Boolean indicating if the action should be undoable.
-     * @returns {Shape} The newly created shape.
-     */
-    addShape(item, undoable) {
-        const newShape = this.diagramWidget?.addShape(item, undoable);
-        return newShape;
-    }
-    /**
-     * Removes shape(s) and/or connection(s) from the `Diagram`.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param {Boolean} Boolean indicating if the action should be undoable.
-     */
-    remove(items, undoable) {
-        this.diagramWidget?.remove(items, undoable);
-    }
-    /**
-     * Connects two items in the `Diagram`.
-     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
-     * @param {Shape | Connector | Point} Shape, Shape's Connector or Point.
-     * @param {ConnectionOptions} Connection options.
-     * @returns {Connection} The created connection.
-     */
-    connect(source, target, options) {
-        return this.diagramWidget?.connect(source, target, options);
-    }
-    /**
-     * Executes the next undoable action on top of the undo stack if any.
-     */
-    undo() {
-        this.diagramWidget?.undo();
-    }
-    /**
-     * Executes the previous undoable action on top of the redo stack if any.
-     */
-    redo() {
-        this.diagramWidget?.redo();
-    }
-    /**
-     * Selects items on the basis of the given input.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param Selection options.
-     * @returns {(Shape | Connection)[]} Array of selected items.
-     */
-    select(items, options) {
-        return this.diagramWidget?.select(items, options);
-    }
-    /**
-     * Selects all items in the `Diagram`.
-     */
-    selectAll() {
-        this.diagramWidget?.selectAll();
-    }
-    /**
-     * Selects items in the specified area.
-     * @param {Rect} rect Rectangle area to select.
-     */
-    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.diagramWidget?.deselect(items);
-    }
-    /**
-     * Brings to front the passed items.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param {boolean} By default the action is undoable.
-     */
-    bringToFront(items, undoable) {
-        this.diagramWidget?.toFront(items, undoable);
-    }
-    /**
-     * Sends to back the passed items.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param {boolean} By default the action is undoable.
-     */
-    bringToBack(items, undoable) {
-        this.diagramWidget?.toBack(items, undoable);
-    }
-    /**
-     * Bring into view the passed item(s) or rectangle.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param {DiagramAlignOptions} controls the position of the calculated rectangle relative to the viewport.
-     * "Center middle" will position the items in the center. animate - controls if the pan should be animated.
-     */
-    bringIntoView(item, options) {
-        this.diagramWidget?.bringIntoView(item, options);
-    }
-    /**
-     * Aligns shapes in the specified direction.
-     * @param {Direction} Direction to align shapes.
-     */
-    alignShapes(direction) {
-        this.diagramWidget?.alignShapes(direction);
-    }
-    /**
-     * @hidden
-     * Pans the Diagram.
-     * @param {Point} Pan coordinates.
-     * @param {boolean} Whether to animate the pan.
-     * @returns {Point} Current pan position.
-     */
-    pan(pan, animate) {
-        return this.diagramWidget?.pan(pan, animate);
-    }
-    /**
-     * Gets the current `Diagram` viewport rectangle.
-     * @returns {Rect} Viewport rectangle.
-     */
-    viewport() {
-        return this.diagramWidget?.viewport();
-    }
-    /**
-     * Copies selected items to clipboard.
-     */
-    copy() {
-        this.diagramWidget?.copy();
-    }
-    /**
-     * @hidden
-     * Cuts selected items to clipboard.
-     */
-    cut() {
-        this.diagramWidget?.cut();
-    }
-    /**
-     * Pastes items from clipboard.
-     */
-    paste() {
-        this.diagramWidget?.paste();
-    }
-    /**
-     * Gets the bounding rectangle of the given items.
-     * @param {Shape | Connection | (Shape | Connection)[]} Shape, Connection or an Array of Shapes and/or Connections.
-     * @param {boolean} Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
-     * @returns {Rect} Bounding rectangle.
-     */
-    boundingBox(items, origin) {
-        return this.diagramWidget?.boundingBox(items, origin);
-    }
-    /**
-     * Converts document coordinates to view coordinates.
-     * @param {Point} Point in document coordinates.
-     * @returns {Point} Point in view coordinates.
-     */
-    documentToView(point) {
-        return this.diagramWidget?.documentToView(point);
-    }
-    /**
-     * Converts view coordinates to document coordinates.
-     * @param {Point} Point in view coordinates.
-     * @returns {Point} Point in document coordinates.
-     */
-    viewToDocument(point) {
-        return this.diagramWidget?.viewToDocument(point);
-    }
-    /**
-     * Converts view coordinates to model coordinates.
-     * @param {Point} Point in view coordinates.
-     * @returns {Point} Point in model coordinates.
-     */
-    viewToModel(point) {
-        return this.diagramWidget?.viewToModel(point);
-    }
-    /**
-     * Converts model coordinates to view coordinates.
-     * @param {Point} Point in model coordinates.
-     * @returns {Point} Point in view coordinates.
-     */
-    modelToView(point) {
-        return this.diagramWidget?.modelToView(point);
-    }
-    /**
-     * Converts model coordinates to layer coordinates.
-     * @param {Point} Point in model coordinates.
-     * @returns {Point} Point in layer coordinates.
-     */
-    modelToLayer(point) {
-        return this.diagramWidget?.modelToLayer(point);
-    }
-    /**
-     * Converts layer coordinates to model coordinates.
-     * @param {Point} Point in layer coordinates.
-     * @returns {Point} Point in model coordinates.
-     */
-    layerToModel(point) {
-        return this.diagramWidget?.layerToModel(point);
-    }
-    /**
-     * Converts document coordinates to model coordinates.
-     * @param {Point} Point in document coordinates.
-     * @returns {Point} Point in model coordinates.
-     */
-    documentToModel(point) {
-        return this.diagramWidget?.documentToModel(point);
-    }
-    /**
-     * Converts model coordinates to document coordinates.
-     * @param {Point} Point in model coordinates.
-     * @returns {Point} Point in document coordinates.
-     */
-    modelToDocument(point) {
-        return this.diagramWidget?.modelToDocument(point);
-    }
-    /**
-     * Gets a shape on the basis of its identifier.
-     * @param {string} The identifier of a shape.
-     * @returns {Shape} The shape with the specified ID.
-     */
-    getShapeById(id) {
-        return this.diagramWidget?.getShapeById(id);
-    }
-    /**
-     * Exports the diagram's DOM visual representation for rendering or export purposes.
-     * Creates a clipped group containing the canvas content with proper transformations.
-     * @returns {Group} A drawing Group element containing the exported DOM visual
-     */
-    exportDOMVisual() {
-        return this.diagramWidget?.exportDOMVisual();
-    }
-    /**
-     * Exports the diagram's visual representation with proper scaling based on zoom level.
-     * Creates a scaled group containing the main layer content.
-     * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
-     */
-    exportVisual() {
-        return this.diagramWidget?.exportVisual();
-    }
-    /**
-     * Handles the tooltipShow event from the diagram widget.
-     */
-    handleTooltipShow(event) {
-        this.hideTooltip();
-        const dataItem = event.item.dataItem;
-        const isShape = event.item.name === "Shape";
-        const isConnection = event.item.name === "Connection";
-        this.setCustomTemplate(isShape, isConnection);
-        const defaultsEnabled = isShape
-            ? this.options.shapeDefaults?.tooltip?.visible
-            : this.options.connectionDefaults?.tooltip?.visible;
-        const itemTooltipEnabled = dataItem.tooltip?.visible;
-        const optionsArray = isShape ? this.options.shapes : this.options.connections;
-        const optionsItem = optionsArray?.find((item) => item.id === event.item.id);
-        const hasTooltipText = !!dataItem.tooltipText || !!optionsItem?.tooltipText;
-        if (!dataItem.tooltipText && optionsItem?.tooltipText) {
-            dataItem.tooltipText = optionsItem.tooltipText;
-        }
-        const shouldShowTooltip = itemTooltipEnabled !== false && hasTooltipText && (defaultsEnabled || itemTooltipEnabled);
-        if (shouldShowTooltip) {
-            this.dataItem = dataItem;
-            let popupContent = this.defaultTooltipTemplate;
-            const showCustomTemplate = Boolean((isShape && this.shapeTooltipTemplate) || (isConnection && this.connectionTooltipTemplate));
-            if (showCustomTemplate) {
-                popupContent = this.customTooltipTemplate;
-            }
-            const popupClass = this.popupClass(isShape, dataItem);
-            this.showTooltip(event, popupContent, popupClass);
-        }
-    }
-    showTooltip(event, content, popupClass) {
-        this.tooltipPopup = this.popupService.open({
-            content: content,
-            appendTo: this.viewContainer,
-            popupClass,
-            animate: false
-        });
-        const contentElement = this.tooltipPopup.popupElement.querySelector('.k-popup');
-        if (content === this.defaultTooltipTemplate) {
-            this.renderer.addClass(contentElement, 'k-tooltip');
-        }
-        const popupElementRect = contentElement.getBoundingClientRect();
-        const zoom = event.item.diagram.zoom();
-        const pan = event.item.diagram.pan();
-        const diagramRect = this.diagramWidget.element.getBoundingClientRect();
-        const win = this.diagramWidget.element.ownerDocument.defaultView;
-        const lines = this.diagramWidget.connections.map(con => con.allPoints());
-        const shapes = this.diagramWidget.shapes.map(shp => shp.bounds());
-        const pos = placeTooltip({
-            hovered: event.item,
-            mouse: event.point,
-            shapes: shapes,
-            connections: lines,
-            diagramRect: diagramRect,
-            zoom: zoom,
-            pan: pan,
-            tooltipSize: { width: popupElementRect.width, height: popupElementRect.height },
-            viewportBounds: new DOMRect(0, 0, win.innerWidth, win.innerHeight)
-        });
-        this.tooltipPopup.popup.instance.offset = { left: pos.left + win.scrollX, top: pos.top + win.scrollY };
-        this.tooltipShow.emit({ ...this.dataItem });
-    }
-    popupClass(isShape, dataItem) {
-        const defaultCssClass = isShape
-            ? this.options.shapeDefaults?.tooltip?.cssClass
-            : this.options.connectionDefaults?.tooltip?.cssClass;
-        const itemCssClass = dataItem.tooltip?.cssClass;
-        const popupClass = defaultCssClass || itemCssClass;
-        return popupClass;
-    }
-    setCustomTemplate(isShape, isConnection) {
-        this.customTemplate = null;
-        if (isShape && this.shapeTooltipTemplate) {
-            this.customTemplate = this.shapeTooltipTemplate.templateRef;
-        }
-        if (isConnection && this.connectionTooltipTemplate) {
-            this.customTemplate = this.connectionTooltipTemplate.templateRef;
-        }
-    }
-    /**
-     * Handles the tooltipHide event from the diagram widget.
-     */
-    handleTooltipHide() {
-        this.hideTooltip();
-        this.tooltipHide.emit({ ...this.dataItem });
-    }
-    /**
-     * Hides the current tooltip and cleans up resources.
-     */
-    hideTooltip() {
-        if (this.tooltipPopup) {
-            this.tooltipPopup.close();
-            this.tooltipPopup = undefined;
-        }
-    }
-    activeEmitter(name) {
-        const emitter = this[name];
-        if (emitter?.emit && hasObservers(emitter)) {
-            return emitter;
-        }
-    }
-    /**
-     * Binds event handlers to the diagram widget.
-     */
-    bindDiagramEvents() {
-        events.forEach((eventName) => {
-            this.diagramWidget.bind(eventName, (e) => {
-                if (eventName === 'click') {
-                    eventName = 'diagramClick';
-                }
-                if (eventName === 'select') {
-                    eventName = 'onSelect';
-                }
-                if (eventName === 'pan') {
-                    eventName = 'onPan';
-                }
-                if (eventName === 'itemBoundsChange') {
-                    eventName = 'shapeBoundsChange';
-                }
-                if (eventName === 'tooltipShow') {
-                    this.zone.run(() => {
-                        this.handleTooltipShow(e);
-                    });
-                    return;
-                }
-                if (eventName === 'tooltipHide') {
-                    this.zone.run(() => {
-                        this.handleTooltipHide();
-                    });
-                    return;
-                }
-                const emitter = this.activeEmitter(eventName);
-                if (emitter) {
-                    this.zone.run(() => {
-                        emitter.emit(e);
-                    });
-                }
-            });
-        });
-    }
-    /**
-     * Converts user data to Diagram model format using field mappings.
-     */
-    convertUserData() {
-        if (this.shapeModelFields || this.connectionModelFields) {
-            const mapping = {
-                shapes: {
-                    source: () => this.shapes || [],
-                    map: this.createFieldMapping(this.shapeModelFields)
-                },
-                connections: {
-                    source: () => this.connections || [],
-                    map: this.createFieldMapping(this.connectionModelFields)
-                }
-            };
-            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.options.connections }, mapping);
-            this.convertedShapes = this.addDataItemProperty(result.shapes, this.shapes);
-            this.convertedConnections = this.addDataItemProperty(result.connections, this.connections);
-        }
-        else {
-            this.convertedShapes = this.addDataItemProperty(this.shapes, this.shapes);
-            this.convertedConnections = this.addDataItemProperty(this.connections, this.connections);
-        }
-    }
-    addDataItemProperty(array, sourceArray) {
-        if (!array || !Array.isArray(array) || array.length === 0) {
-            return [];
-        }
-        if (!sourceArray || !Array.isArray(sourceArray)) {
-            return array;
-        }
-        return array.map((item, index) => ({
-            ...item,
-            dataItem: sourceArray[index]
-        }));
-    }
-    /**
-     * Creates field mapping configuration from model fields.
-     */
-    createFieldMapping(modelFields) {
-        if (!modelFields) {
-            return {};
-        }
-        const mapping = {};
-        Object.keys(modelFields).forEach(key => {
-            const fieldName = modelFields[key];
-            if (fieldName) {
-                mapping[key] = fieldName;
-            }
-        });
-        return mapping;
-    }
-    init() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.zone.runOutsideAngular(() => {
-            const theme = loadTheme(this.wrapperElement.nativeElement);
-            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.diagramWidget?.setOptions(this.options);
-    }
-    loadOptions(options) {
-        this.diagramWidget?.load(options);
-        this.diagramWidget?.layout(options);
-    }
-    getNormalizedNavigationOptions() {
-        return {
-            disabled: !this._navigable.enabled,
-            smallStep: this._navigable.smallStep,
-            largeStep: this._navigable.largeStep
-        };
-    }
-    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: "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", navigable: "navigable" }, 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>
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            {{dataItem?.tooltipText}}
-        </ng-template>
-        `, 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,
-            args: [{
-                    standalone: true,
-                    exportAs: 'kendoDiagram',
-                    selector: 'kendo-diagram',
-                    template: `
-        @if (showLicenseWatermark) {
-            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
-        }
-
-        <ng-template #customTooltipTemplate>
-            <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
-        </ng-template>
-
-        <ng-template #defaultTemplate>
-            {{dataItem?.tooltipText}}
-        </ng-template>
-        `,
-                    imports: [WatermarkOverlayComponent, NgTemplateOutlet],
-                    providers: [PopupService]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{
-                type: HostBinding,
-                args: ['class.k-diagram']
-            }], connectionDefaults: [{
-                type: Input
-            }], connections: [{
-                type: Input
-            }], connectionModelFields: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], pannable: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], shapeDefaults: [{
-                type: Input
-            }], shapes: [{
-                type: Input
-            }], shapeModelFields: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], zoomMax: [{
-                type: Input
-            }], zoomMin: [{
-                type: Input
-            }], zoomRate: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], diagramClick: [{
-                type: Output
-            }], drag: [{
-                type: Output
-            }], dragEnd: [{
-                type: Output
-            }], dragStart: [{
-                type: Output
-            }], shapeBoundsChange: [{
-                type: Output
-            }], mouseEnter: [{
-                type: Output
-            }], mouseLeave: [{
-                type: Output
-            }], onPan: [{
-                type: Output,
-                args: ['pan']
-            }], onSelect: [{
-                type: Output,
-                args: ['select']
-            }], zoomEnd: [{
-                type: Output
-            }], zoomStart: [{
-                type: Output
-            }], tooltipShow: [{
-                type: Output
-            }], tooltipHide: [{
-                type: Output
-            }], defaultTooltipTemplate: [{
-                type: ViewChild,
-                args: ['defaultTemplate']
-            }], customTooltipTemplate: [{
-                type: ViewChild,
-                args: ['customTooltipTemplate']
-            }], shapeTooltipTemplate: [{
-                type: ContentChild,
-                args: [ShapeTooltipTemplateDirective]
-            }], connectionTooltipTemplate: [{
-                type: ContentChild,
-                args: [ConnectionTooltipTemplateDirective]
-            }] } });

package/esm2022/diagram.module.mjs

@@ -1,53 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { NgModule } from '@angular/core';
-import { KENDO_DIAGRAM } from './directives';
-import * as i0 from "@angular/core";
-import * as i1 from "./diagram.component";
-import * as i2 from "./shape-tooltip-template.directive";
-import * as i3 from "./connection-tooltip-template.directive";
-/**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Diagram component.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the Diagram module
- * import { DiagramModule } from '@progress/kendo-angular-diagrams';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, DiagramModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-export class DiagramModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [i1.DiagramComponent, i2.ShapeTooltipTemplateDirective, i3.ConnectionTooltipTemplateDirective], exports: [i1.DiagramComponent, i2.ShapeTooltipTemplateDirective, i3.ConnectionTooltipTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [i1.DiagramComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...KENDO_DIAGRAM],
-                    exports: [...KENDO_DIAGRAM]
-                }]
-        }] });

package/esm2022/directives.mjs

@@ -1,31 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { DiagramComponent } from "./diagram.component";
-import { ConnectionTooltipTemplateDirective } from "./connection-tooltip-template.directive";
-import { ShapeTooltipTemplateDirective } from "./shape-tooltip-template.directive";
-/**
- * Represents the utility array that that contains all `Diagram`-related components and directives.
- *
- * Use `KENDO_DIAGRAM` to import all Diagram components and directives at once.
- *
- * @example
- * ```typescript
- * import { Component } from '@angular/core';
- * import { KENDO_DIAGRAM } from '@progress/kendo-angular-diagrams';
- *
- * @Component({
- *   selector: 'my-diagram-app',
- *   standalone: true,
- *   imports: [KENDO_DIAGRAM],
- *   template: `...`
- * })
- * export class DiagramAppComponent {}
- * ```
- */
-export const KENDO_DIAGRAM = [
-    DiagramComponent,
-    ShapeTooltipTemplateDirective,
-    ConnectionTooltipTemplateDirective
-];

package/esm2022/index.mjs

@@ -1,11 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export { Shape, Connection, Connector, 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, convertToDiagramModel } from '@progress/kendo-diagram-common';
-export { DiagramModule } from './diagram.module';
-export { DiagramComponent } from './diagram.component';
-export { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
-export { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
-export * from './directives';
-export * from './models';

package/esm2022/models.mjs

@@ -1,7 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-;
-;
-export {};

package/esm2022/package-metadata.mjs

@@ -1,16 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const packageMetadata = {
-    name: '@progress/kendo-angular-diagrams',
-    productName: 'Kendo UI for Angular',
-    productCode: 'KENDOUIANGULAR',
-    productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1768393344,
-    version: '21.4.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/esm2022/progress-kendo-angular-diagrams.mjs

@@ -1,8 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';

package/esm2022/shape-tooltip-template.directive.mjs

@@ -1,47 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Defines a custom template for shape tooltips within the `kendo-diagram` component.
- * Use this directive to customize how tooltips appear when hovering over shapes.
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-diagram>
- *       <ng-template kendoDiagramShapeTooltipTemplate let-dataItem>
- *         {{dataItem.tooltipContent}}
- *       </ng-template>
- *     </kendo-diagram>
- *   `
- * })
- * class AppComponent {
- * }
- *
- * ```
- */
-export class ShapeTooltipTemplateDirective {
-    /**
-     * @hidden
-     */
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoDiagramShapeTooltipTemplate]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

package/esm2022/utils.mjs

@@ -1,6 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/** @hidden */
-export const DEFAULT_NAVIGABLE_OPTIONS = { enabled: true, smallStep: 1, largeStep: 5 };