@progress/kendo-angular-diagrams 21.0.0-develop.2 → 21.0.0-develop.21

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

@@ -2,12 +2,14 @@
 * 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 { placeTooltip, events, convertToDiagramModel, 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, convertToDiagramModel } from '@progress/kendo-diagram-common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, HostBinding, Input, Output, ViewChild, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import * as i1 from '@progress/kendo-angular-popup';
+import { PopupService } from '@progress/kendo-angular-popup';
 import { NgIf } from '@angular/common';
 
 /**
@@ -18,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761753129,
-    version: '21.0.0-develop.2',
+    publishDate: 1762427043,
+    version: '21.0.0-develop.21',
     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',
 };
 
@@ -63,41 +65,63 @@ 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.
+     * 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#custom-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 +131,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#custom-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 +201,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 +209,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;
@@ -226,22 +267,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;
+    /**
+     * Template reference for tooltip content.
+     */
+    tooltipTemplate;
+    /**
+     * @hidden
+     * Current tooltip content for template context.
+     */
+    tooltipContent = '';
+    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']) {
@@ -301,50 +363,33 @@ class DiagramComponent {
         }
     }
     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 +404,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 +414,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 +424,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 +432,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 +463,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 +647,141 @@ class DiagramComponent {
     exportVisual() {
         return this.diagramWidget?.exportVisual();
     }
+    /**
+     * Handles the tooltipShow event from the diagram widget.
+     */
+    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);
+        }
+    }
+    /**
+     * Handles the tooltipHide event from the diagram widget.
+     */
+    handleTooltipHide(event) {
+        this.hideTooltip();
+        this.tooltipHide.emit(event);
+    }
+    /**
+     * Hides the current tooltip and cleans up resources.
+     */
+    hideTooltip() {
+        if (this.tooltipPopup) {
+            this.tooltipPopup.close();
+            this.tooltipPopup = undefined;
+        }
+        this.tooltipContent = '';
+    }
     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 (this.tooltip && eventName === 'tooltipShow') {
+                    this.zone.run(() => {
+                        this.handleTooltipShow(e);
+                    });
+                    return;
+                }
+                if (this.tooltip && eventName === 'tooltipHide') {
+                    this.zone.run(() => {
+                        this.handleTooltipHide(e);
+                    });
+                    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.connections }, mapping);
+            this.convertedShapes = result.shapes;
+            this.convertedConnections = result.connections;
+        }
+        else {
+            this.convertedShapes = this.shapes || [];
+            this.convertedConnections = this.connections || [];
+        }
+    }
+    /**
+     * 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,9 +801,12 @@ 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", 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: `
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+        <ng-template *ngIf="tooltip" #tooltipTemplate let-content="content">
+            <div class="k-tooltip">{{tooltipContent}}</div>
+        </ng-template>
         `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, decorators: [{
@@ -640,16 +817,24 @@ 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>
         `,
-                    imports: [WatermarkOverlayComponent, NgIf]
+                    imports: [WatermarkOverlayComponent, NgIf],
+                    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
+            }], tooltip: [{
+                type: Input
+            }], connectionModelFields: [{
+                type: Input
             }], editable: [{
                 type: Input
             }], layout: [{
@@ -662,6 +847,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 +883,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], zoomStart: [{
                 type: Output
+            }], tooltipShow: [{
+                type: Output
+            }], tooltipHide: [{
+                type: Output
+            }], tooltipTemplate: [{
+                type: ViewChild,
+                args: ['tooltipTemplate']
             }] } });
 
 /**

package/index.d.ts

@@ -2,7 +2,8 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { DiagramOptions, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, ShapeDefaults, ShapeOptions, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, ConnectionOptions, ConnectionDefaults, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, 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, ConnectionCap, ConnectionContent, } from '@progress/kendo-diagram-common';
+export { DiagramOptions, ShapeConnector, ShapeContent, EditableDefaults, ShapeDefaultsEditable, ShapeEditable, ShapeFillGradientStop, ShapeFillGradient, ShapeFill, ShapeHover, ShapeRotation, Fill, Stroke, DashType, ShapeType, ShapeConnectorHover, ShapeConnectorDefaults, ShapeDefaults, ShapeOptions, Selectable, Pannable, LayoutGrid, DiagramLayout, DiagramEditable, Coordinate, ConnectionOptions, ConnectionDefaults, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramPanEvent, DiagramSelectEvent, DiagramChangeEvent, DiagramItemBoundsChangeEvent, Shape, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction, 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, ConnectionCap, ConnectionContent, convertToDiagramModel, DiagramMapping, ConvertResult, ConnectionMapping, ShapeMapping, MapSpec, FromPathOrFn } from '@progress/kendo-diagram-common';
 export { DiagramModule } from './diagram.module';
 export { DiagramComponent } from './diagram.component';
 export * from './directives';
+export * from './models';