@progress/kendo-angular-diagrams 21.0.0-develop.27 → 21.0.0-develop.28

package/connection-tooltip-template.directive.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { 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 declare class ConnectionTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTooltipTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTooltipTemplateDirective, "[kendoDiagramConnectionTooltipTemplate]", never, {}, {}, never, never, true, never>;
+}

package/diagram.component.d.ts

@@ -3,10 +3,12 @@
 * 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 { ConnectionDefaults, ConnectionOptions, DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, ShapeDefaults, ShapeOptions, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
+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 { PopupService } from '@progress/kendo-angular-popup';
 import { Group } from '@progress/kendo-drawing';
-import { ShapeModelFields, ConnectionModelFields } from './index';
+import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults } from './index';
+import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
+import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
@@ -39,12 +41,6 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      *
      */
     connections?: any[];
-    /**
-     * Controls whether the `Diagram` tooltips are displayed when hovering over shapes and connections ([see example](slug:diagram_tooltips)).
-     * @default false
-     *
-     */
-    tooltip?: boolean;
     /**
      * 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.
@@ -176,11 +172,11 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
     /**
      * Fires when a tooltip should shown for a shape or connection.
      */
-    tooltipShow: EventEmitter<any>;
+    tooltipShow: EventEmitter<ShapeOptions | ConnectionOptions>;
     /**
      * Fires when a tooltip should be hidden.
      */
-    tooltipHide: EventEmitter<any>;
+    tooltipHide: EventEmitter<ShapeOptions | ConnectionOptions>;
     /**
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
@@ -206,6 +202,10 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @hidden
      */
     licenseMessage?: string;
+    /**
+     * @hidden
+     */
+    customTemplate?: TemplateRef<any>;
     private options;
     /**
      * Stores the converted shapes from user data.
@@ -219,15 +219,15 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * Current popup instance for tooltip.
      */
     private tooltipPopup?;
-    /**
-     * Template reference for tooltip content.
-     */
-    tooltipTemplate: TemplateRef<any>;
+    defaultTooltipTemplate: TemplateRef<any>;
+    customTooltipTemplate: TemplateRef<any>;
+    shapeTooltipTemplate: ShapeTooltipTemplateDirective;
+    connectionTooltipTemplate: ConnectionTooltipTemplateDirective;
     /**
      * @hidden
-     * Current tooltip content for template context.
+     * The original data item provided by the user. Passed in the tooltip template context.
      */
-    tooltipContent: string;
+    dataItem: any;
     constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, popupService: PopupService, viewContainer: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -437,6 +437,9 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * Handles the tooltipShow event from the diagram widget.
      */
     private handleTooltipShow;
+    private showTooltip;
+    private popupClass;
+    private setCustomTemplate;
     /**
      * Handles the tooltipHide event from the diagram widget.
      */
@@ -454,6 +457,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * Converts user data to Diagram model format using field mappings.
      */
     private convertUserData;
+    private addDataItemProperty;
     /**
      * Creates field mapping configuration from model fields.
      */
@@ -461,5 +465,5 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
     private init;
     private updateOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, { "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"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, { "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"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
 }

package/diagram.module.d.ts

@@ -4,6 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 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.
@@ -37,6 +39,6 @@ import * as i1 from "./diagram.component";
  */
 export declare class DiagramModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DiagramModule, never, [typeof i1.DiagramComponent], [typeof i1.DiagramComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DiagramModule, never, [typeof i1.DiagramComponent, typeof i2.ShapeTooltipTemplateDirective, typeof i3.ConnectionTooltipTemplateDirective], [typeof i1.DiagramComponent, typeof i2.ShapeTooltipTemplateDirective, typeof i3.ConnectionTooltipTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DiagramModule>;
 }

package/directives.d.ts

@@ -3,6 +3,8 @@
 * 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.
  *
@@ -22,4 +24,4 @@ import { DiagramComponent } from "./diagram.component";
  * export class DiagramAppComponent {}
  * ```
  */
-export declare const KENDO_DIAGRAM: readonly [typeof DiagramComponent];
+export declare const KENDO_DIAGRAM: readonly [typeof DiagramComponent, typeof ShapeTooltipTemplateDirective, typeof ConnectionTooltipTemplateDirective];

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

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 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

@@ -2,15 +2,17 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
-import { Diagram, convertToDiagramModel, placeTooltip } from '@progress/kendo-diagram-common';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
+import { Shape, Connection, 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 } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { NgIf } from '@angular/common';
+import { NgIf, 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';
+import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 /**
@@ -44,12 +46,6 @@ export class DiagramComponent {
      *
      */
     connections = [];
-    /**
-     * Controls whether the `Diagram` tooltips are displayed when hovering over shapes and connections ([see example](slug:diagram_tooltips)).
-     * @default false
-     *
-     */
-    tooltip = false;
     /**
      * 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.
@@ -217,6 +213,10 @@ export class DiagramComponent {
      * @hidden
      */
     licenseMessage;
+    /**
+     * @hidden
+     */
+    customTemplate;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -241,15 +241,15 @@ export class DiagramComponent {
      * Current popup instance for tooltip.
      */
     tooltipPopup;
-    /**
-     * Template reference for tooltip content.
-     */
-    tooltipTemplate;
+    defaultTooltipTemplate;
+    customTooltipTemplate;
+    shapeTooltipTemplate;
+    connectionTooltipTemplate;
     /**
      * @hidden
-     * Current tooltip content for template context.
+     * The original data item provided by the user. Passed in the tooltip template context.
      */
-    tooltipContent = '';
+    dataItem;
     constructor(wrapperElement, renderer, zone, popupService, viewContainer) {
         this.wrapperElement = wrapperElement;
         this.renderer = renderer;
@@ -322,6 +322,7 @@ export class DiagramComponent {
         }
         if (recreate) {
             this.init();
+            this.bindDiagramEvents();
         }
     }
     ngAfterViewInit() {
@@ -614,40 +615,87 @@ export class DiagramComponent {
      */
     handleTooltipShow(event) {
         this.hideTooltip();
-        if (event.item.options.tooltip?.visible) {
-            this.tooltipContent = event.item.options.tooltip?.text;
-            this.tooltipPopup = this.popupService.open({
-                content: this.tooltipTemplate,
-                appendTo: this.viewContainer
-            });
-            const popupElementRect = this.tooltipPopup.popup.instance.container.nativeElement.querySelector('.k-tooltip').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(event);
+        const dataItem = event.item.dataItem;
+        const isShape = event.item instanceof Shape;
+        const isConnection = event.item instanceof 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(event) {
+    handleTooltipHide() {
         this.hideTooltip();
-        this.tooltipHide.emit(event);
+        this.tooltipHide.emit({ ...this.dataItem });
     }
     /**
      * Hides the current tooltip and cleans up resources.
@@ -657,7 +705,6 @@ export class DiagramComponent {
             this.tooltipPopup.close();
             this.tooltipPopup = undefined;
         }
-        this.tooltipContent = '';
     }
     activeEmitter(name) {
         const emitter = this[name];
@@ -683,15 +730,15 @@ export class DiagramComponent {
                 if (eventName === 'itemBoundsChange') {
                     eventName = 'shapeBoundsChange';
                 }
-                if (this.tooltip && eventName === 'tooltipShow') {
+                if (eventName === 'tooltipShow') {
                     this.zone.run(() => {
                         this.handleTooltipShow(e);
                     });
                     return;
                 }
-                if (this.tooltip && eventName === 'tooltipHide') {
+                if (eventName === 'tooltipHide') {
                     this.zone.run(() => {
-                        this.handleTooltipHide(e);
+                        this.handleTooltipHide();
                     });
                     return;
                 }
@@ -719,14 +766,26 @@ export class DiagramComponent {
                     map: this.createFieldMapping(this.connectionModelFields)
                 }
             };
-            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.connections }, mapping);
-            this.convertedShapes = result.shapes;
-            this.convertedConnections = result.connections;
+            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.shapes || [];
-            this.convertedConnections = this.connections || [];
+            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.
@@ -764,12 +823,17 @@ 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", tooltip: "tooltip", 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], viewQueries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
+    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>
-        <ng-template *ngIf="tooltip" #tooltipTemplate let-content="content">
-            <div class="k-tooltip">{{tooltipContent}}</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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -779,11 +843,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-diagram',
                     template: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-        <ng-template *ngIf="tooltip" #tooltipTemplate let-content="content">
-            <div class="k-tooltip">{{tooltipContent}}</div>
+
+        <ng-template #customTooltipTemplate>
+            <ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: dataItem }"></ng-container>
+        </ng-template>
+
+        <ng-template #defaultTemplate>
+            {{dataItem?.tooltipText}}
         </ng-template>
         `,
-                    imports: [WatermarkOverlayComponent, NgIf],
+                    imports: [WatermarkOverlayComponent, NgIf, NgTemplateOutlet, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective],
                     providers: [PopupService]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{
@@ -793,8 +862,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], connections: [{
                 type: Input
-            }], tooltip: [{
-                type: Input
             }], connectionModelFields: [{
                 type: Input
             }], editable: [{
@@ -849,7 +916,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], tooltipHide: [{
                 type: Output
-            }], tooltipTemplate: [{
+            }], defaultTooltipTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate']
+            }], customTooltipTemplate: [{
                 type: ViewChild,
-                args: ['tooltipTemplate']
+                args: ['customTooltipTemplate']
+            }], shapeTooltipTemplate: [{
+                type: ContentChild,
+                args: [ShapeTooltipTemplateDirective]
+            }], connectionTooltipTemplate: [{
+                type: ContentChild,
+                args: [ConnectionTooltipTemplateDirective]
             }] } });

package/esm2022/diagram.module.mjs

@@ -6,6 +6,8 @@ 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.
@@ -39,8 +41,8 @@ import * as i1 from "./diagram.component";
  */
 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], exports: [i1.DiagramComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, imports: [KENDO_DIAGRAM] });
+    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,

package/esm2022/directives.mjs

@@ -3,6 +3,8 @@
 * 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.
  *
@@ -23,5 +25,7 @@ import { DiagramComponent } from "./diagram.component";
  * ```
  */
 export const KENDO_DIAGRAM = [
-    DiagramComponent
+    DiagramComponent,
+    ShapeTooltipTemplateDirective,
+    ConnectionTooltipTemplateDirective
 ];

package/esm2022/index.mjs

@@ -2,8 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { Shape, Connection, Connector, Diagram, Point, Rect, Circle, Group, FlowchartShapeType, 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 { 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

@@ -2,4 +2,6 @@
 * Copyright © 2025 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

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762863300,
-    version: '21.0.0-develop.27',
+    publishDate: 1762875162,
+    version: '21.0.0-develop.28',
     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',
 };