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

package/esm2022/diagram.component.mjs

@@ -2,15 +2,19 @@
 * 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, } from '@angular/core';
-import { Diagram } 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 { NgIf } from '@angular/common';
+import { PopupService } from '@progress/kendo-angular-popup';
+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";
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
  *
@@ -25,41 +29,57 @@ export class DiagramComponent {
     wrapperElement;
     renderer;
     zone;
+    popupService;
+    viewContainer;
     diagramClass = true;
     /**
      * Defines the default configuration options applicable to all connections.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
      */
     connectionDefaults = CONNECTION_DEFAULTS;
     /**
-     * Defines the connections that render between the shapes in the Diagram.
-     * Changing this property dynamically reinitializes the Diagram.
+     * 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.
+     * Changing this property dynamically reinitializes the `Diagram`.
+     *
      */
     connections = [];
     /**
-     * A set of settings to configure the Diagram behavior when the user attempts to drag, resize, or remove shapes.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * 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 = { drag: true, resize: true, remove: true };
     /**
-     * The layout of a diagram consists of arranging the shapes (sometimes also the connections) in some fashion in order to achieve an aesthetically pleasing experience to the user.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
      */
     layout;
     /**
-     * Defines the pannable options. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
+     * 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.
+     * Defines the `Diagram` selection options.
      *
-     * By default, you can select shapes in the Diagram in one of two ways:
+     * 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;
@@ -69,30 +89,39 @@ export class DiagramComponent {
      */
     shapeDefaults = SHAPE_DEFAULTS;
     /**
-     * Defines the shapes that render in the Diagram.
-     * Changing the property value dynamically triggers a reinitialization of the Diagram.
+     * 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.
+     * Changing the property value dynamically triggers a reinitialization of the `Diagram`.
+     *
      */
     shapes = [];
     /**
-     * Defines the zoom level of the Diagram.
+     * 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.
+     * Defines the maximum zoom level of the `Diagram`.
      *
      * @default 2
      */
     zoomMax = 2;
     /**
-     * Defines the minimum zoom level of the Diagram.
+     * Defines the minimum zoom level of the `Diagram`.
      *
      * @default 0.1
      */
     zoomMin = 0.1;
     /**
-     * Defines the zoom rate of the Diagram.
+     * Defines the zoom rate of the `Diagram`.
      *
      * @default 0.1
      */
@@ -130,7 +159,7 @@ export class DiagramComponent {
      */
     mouseLeave = new EventEmitter();
     /**
-     * Fires when the user pans the Diagram.
+     * Fires when the user pans the `Diagram`.
      */
     onPan = new EventEmitter();
     /**
@@ -138,32 +167,40 @@ export class DiagramComponent {
      */
     onSelect = new EventEmitter();
     /**
-     * Fires when the diagram has finished zooming out.
+     * Fires when the `Diagram` has finished zooming out.
      */
     zoomEnd = new EventEmitter();
     /**
-     * Fires when the diagram starts zooming in or out.
+     * 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.
+     * The currently selected items in the `Diagram`.
      */
     get selection() {
         return this.diagramWidget?.select();
     }
     /**
-     * The actual shapes created by the Diagram.
+     * The actual shapes created by the `Diagram`.
      */
     get diagramShapes() {
         return this.diagramWidget?.shapes;
     }
     /**
-     * The actual connections created by the Diagram.
+     * The actual connections created by the `Diagram`.
      */
     get diagramConnections() {
         return this.diagramWidget?.connections;
@@ -176,6 +213,10 @@ export class DiagramComponent {
      * @hidden
      */
     licenseMessage;
+    /**
+     * @hidden
+     */
+    customTemplate;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -188,22 +229,43 @@ export class DiagramComponent {
         shapeDefaults: this.shapeDefaults,
         connectionDefaults: this.connectionDefaults
     };
-    constructor(wrapperElement, renderer, zone) {
+    /**
+     * 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) {
         let recreate = false;
-        if (changes['shapes']) {
-            this.options.shapes = this.shapes;
-            recreate = true;
-        }
-        if (changes['connections']) {
-            this.options.connections = this.connections;
+        if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
+            this.convertUserData();
+            this.options.shapes = this.convertedShapes;
+            this.options.connections = this.convertedConnections;
             recreate = true;
         }
         if (changes['connectionDefaults']) {
@@ -260,53 +322,37 @@ export class DiagramComponent {
         }
         if (recreate) {
             this.init();
+            this.bindDiagramEvents();
         }
     }
     ngAfterViewInit() {
+        this.convertUserData();
+        this.options.shapes = this.convertedShapes;
+        this.options.connections = this.convertedConnections;
         this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
         this.init();
-        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';
-                }
-                const emitter = this.activeEmitter(eventName);
-                if (emitter) {
-                    this.zone.run(() => {
-                        emitter.emit(e);
-                    });
-                }
-            });
-        });
+        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.
+     * 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.
+     * Focuses the `Diagram`.
      * @returns {boolean} true if focus was set successfully.
      */
     focus() {
         return this.diagramWidget?.focus();
     }
     /**
-     * Clears the Diagram.
+     * Clears the `Diagram`.
      */
     clear() {
         this.diagramWidget?.clear();
@@ -321,7 +367,7 @@ export class DiagramComponent {
         return this.diagramWidget?.connected(source, target);
     }
     /**
-     * Adds connection to the Diagram.
+     * Adds connection to the `Diagram`.
      * @param {Connection} Connection.
      * @param {boolean} Boolean.
      * @returns {Connection} The newly created connection.
@@ -331,7 +377,7 @@ export class DiagramComponent {
         return newConnection;
     }
     /**
-     * Adds shape to the Diagram.
+     * 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.
@@ -341,7 +387,7 @@ export class DiagramComponent {
         return newShape;
     }
     /**
-     * Removes shape(s) and/or connection(s) from the Diagram.
+     * 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.
      */
@@ -349,7 +395,7 @@ export class DiagramComponent {
         this.diagramWidget?.remove(items, undoable);
     }
     /**
-     * Connects two items in the Diagram.
+     * 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.
@@ -380,7 +426,7 @@ export class DiagramComponent {
         return this.diagramWidget?.select(items, options);
     }
     /**
-     * Selects all items in the Diagram.
+     * Selects all items in the `Diagram`.
      */
     selectAll() {
         this.diagramWidget?.selectAll();
@@ -564,12 +610,199 @@ export class DiagramComponent {
     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 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() {
+        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;
@@ -589,10 +822,18 @@ export class DiagramComponent {
         this.options[prop] = this[prop];
         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 }], 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", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+
+        <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"] }, { 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,
@@ -602,16 +843,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-diagram',
                     template: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [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, NgIf]
+                    imports: [WatermarkOverlayComponent, NgIf, NgTemplateOutlet, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective],
+                    providers: [PopupService]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { diagramClass: [{
+        }], 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: [{
@@ -624,6 +876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], shapes: [{
                 type: Input
+            }], shapeModelFields: [{
+                type: Input
             }], zoom: [{
                 type: Input
             }], zoomMax: [{
@@ -658,4 +912,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 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

@@ -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,