@progress/kendo-angular-diagrams 21.0.0-develop.8 → 21.0.0

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

@@ -2,13 +2,15 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { events, loadTheme, Diagram } from '@progress/kendo-diagram-common';
-export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, DataInputOutput, DataStorage, Database, Decision, Delay, Diagram, DirectAccessStorage, Display, Document, Extract, FlowchartShapeType, Group, Image, InternalStorage, Layout, Line, LogicalOr, ManualInputOutput, ManualOperation, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Shape, Sort, SummingJunction, Terminator, TextBlock } from '@progress/kendo-diagram-common';
+import { Shape, Connection, 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 { EventEmitter, Component, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { Directive, EventEmitter, Component, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
-import { NgIf } from '@angular/common';
+import * as i1 from '@progress/kendo-angular-popup';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 
 /**
  * @hidden
@@ -18,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761844729,
-    version: '21.0.0-develop.8',
+    publishDate: 1762934790,
+    version: '21.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',
 };
 
@@ -49,6 +51,90 @@ const SHAPE_DEFAULTS = {
     selectable: true,
 };
 
+/**
+ * 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 {
+ * }
+ *
+ * ```
+ */
+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 }] });
+
+/**
+ * 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 {
+ * }
+ *
+ * ```
+ */
+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 }] });
+
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
  *
@@ -63,41 +149,57 @@ 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;
@@ -107,30 +209,39 @@ 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
      */
@@ -168,7 +279,7 @@ class DiagramComponent {
      */
     mouseLeave = new EventEmitter();
     /**
-     * Fires when the user pans the Diagram.
+     * Fires when the user pans the `Diagram`.
      */
     onPan = new EventEmitter();
     /**
@@ -176,32 +287,40 @@ 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;
@@ -214,6 +333,10 @@ class DiagramComponent {
      * @hidden
      */
     licenseMessage;
+    /**
+     * @hidden
+     */
+    customTemplate;
     options = {
         shapes: this.shapes,
         connections: this.connections,
@@ -226,22 +349,43 @@ 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']) {
@@ -298,53 +442,37 @@ 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();
@@ -359,7 +487,7 @@ 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.
@@ -369,7 +497,7 @@ 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.
@@ -379,7 +507,7 @@ 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.
      */
@@ -387,7 +515,7 @@ 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.
@@ -418,7 +546,7 @@ class DiagramComponent {
         return this.diagramWidget?.select(items, options);
     }
     /**
-     * Selects all items in the Diagram.
+     * Selects all items in the `Diagram`.
      */
     selectAll() {
         this.diagramWidget?.selectAll();
@@ -602,12 +730,199 @@ 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;
@@ -627,10 +942,18 @@ 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,
@@ -640,16 +963,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: [{
@@ -662,6 +996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], shapes: [{
                 type: Input
+            }], shapeModelFields: [{
+                type: Input
             }], zoom: [{
                 type: Input
             }], zoomMax: [{
@@ -696,6 +1032,22 @@ 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]
             }] } });
 
 /**
@@ -718,7 +1070,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 const KENDO_DIAGRAM = [
-    DiagramComponent
+    DiagramComponent,
+    ShapeTooltipTemplateDirective,
+    ConnectionTooltipTemplateDirective
 ];
 
 /**
@@ -754,8 +1108,8 @@ 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], exports: [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: [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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramModule, decorators: [{
             type: NgModule,
@@ -765,9 +1119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+;
+;
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DiagramComponent, DiagramModule, KENDO_DIAGRAM };
+export { ConnectionTooltipTemplateDirective, DiagramComponent, DiagramModule, KENDO_DIAGRAM, ShapeTooltipTemplateDirective };