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

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

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Defines a custom template for connection tooltips within the `kendo-diagram` component.
+ * Use this directive to customize how tooltips appear when hovering over connections.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-diagram>
+ *       <ng-template kendoDiagramConnectionTooltipTemplate let-dataItem>
+ *         {{dataItem.tooltipContent}}
+ *       </ng-template>
+ *     </kendo-diagram>
+ *   `
+ * })
+ * class AppComponent {
+ * }
+ *
+ * ```
+ */
+export declare class ConnectionTooltipTemplateDirective {
+    /**
+     * @hidden
+     */
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConnectionTooltipTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ConnectionTooltipTemplateDirective, "[kendoDiagramConnectionTooltipTemplate]", never, {}, {}, never, never, true, never>;
+}

package/diagram.component.d.ts

@@ -2,9 +2,13 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
-import { ConnectionDefaults, ConnectionOptions, DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, ShapeDefaults, ShapeOptions, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ConnectionOptions, DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, ShapeOptions, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
+import { PopupService } from '@progress/kendo-angular-popup';
 import { Group } from '@progress/kendo-drawing';
+import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults } from './index';
+import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
+import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Diagram component for Angular](slug:overview_diagram).
@@ -20,41 +24,57 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
     private wrapperElement;
     private renderer;
     private zone;
+    private popupService;
+    private viewContainer;
     diagramClass: boolean;
     /**
      * 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?: ConnectionDefaults;
     /**
-     * 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?: any[];
+    /**
+     * 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`.
      */
-    connections?: ConnectionOptions[];
+    connectionModelFields?: 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.
+     * 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?: boolean | DiagramEditable;
     /**
-     * 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?: DiagramLayout;
     /**
-     * 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?: boolean | Pannable;
     /**
-     * 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?: boolean | Selectable;
@@ -64,30 +84,39 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     shapeDefaults?: ShapeDefaults;
     /**
-     * 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?: any[];
+    /**
+     * 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`.
      */
-    shapes?: ShapeOptions[];
+    shapeModelFields?: ShapeModelFields;
     /**
-     * Defines the zoom level of the Diagram.
+     * Defines the zoom level of the `Diagram`.
      *
      * @default 1
      */
     zoom?: number;
     /**
-     * Defines the maximum zoom level of the Diagram.
+     * Defines the maximum zoom level of the `Diagram`.
      *
      * @default 2
      */
     zoomMax?: number;
     /**
-     * Defines the minimum zoom level of the Diagram.
+     * Defines the minimum zoom level of the `Diagram`.
      *
      * @default 0.1
      */
     zoomMin?: number;
     /**
-     * Defines the zoom rate of the Diagram.
+     * Defines the zoom rate of the `Diagram`.
      *
      * @default 0.1
      */
@@ -125,7 +154,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     mouseLeave: EventEmitter<DiagramDomEvent>;
     /**
-     * Fires when the user pans the Diagram.
+     * Fires when the user pans the `Diagram`.
      */
     onPan: EventEmitter<DiagramPanEvent>;
     /**
@@ -133,28 +162,36 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     onSelect: EventEmitter<DiagramSelectEvent>;
     /**
-     * Fires when the diagram has finished zooming out.
+     * Fires when the `Diagram` has finished zooming out.
      */
     zoomEnd: EventEmitter<DiagramZoomEndEvent>;
     /**
-     * Fires when the diagram starts zooming in or out.
+     * Fires when the `Diagram` starts zooming in or out.
      */
     zoomStart: EventEmitter<DiagramZoomStartEvent>;
+    /**
+     * Fires when a tooltip should shown for a shape or connection.
+     */
+    tooltipShow: EventEmitter<ShapeOptions | ConnectionOptions>;
+    /**
+     * Fires when a tooltip should be hidden.
+     */
+    tooltipHide: EventEmitter<ShapeOptions | ConnectionOptions>;
     /**
      * @hidden
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
     diagramWidget: Diagram;
     /**
-     * The currently selected items in the Diagram.
+     * The currently selected items in the `Diagram`.
      */
     get selection(): (Shape | Connection)[];
     /**
-     * The actual shapes created by the Diagram.
+     * The actual shapes created by the `Diagram`.
      */
     get diagramShapes(): Shape[];
     /**
-     * The actual connections created by the Diagram.
+     * The actual connections created by the `Diagram`.
      */
     get diagramConnections(): Connection[];
     /**
@@ -165,23 +202,48 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @hidden
      */
     licenseMessage?: string;
+    /**
+     * @hidden
+     */
+    customTemplate?: TemplateRef<any>;
     private options;
-    constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone);
+    /**
+     * Stores the converted shapes from user data.
+     */
+    private convertedShapes;
+    /**
+     * Stores the converted connections from user data.
+     */
+    private convertedConnections;
+    /**
+     * Current popup instance for tooltip.
+     */
+    private tooltipPopup?;
+    defaultTooltipTemplate: TemplateRef<any>;
+    customTooltipTemplate: TemplateRef<any>;
+    shapeTooltipTemplate: ShapeTooltipTemplateDirective;
+    connectionTooltipTemplate: ConnectionTooltipTemplateDirective;
+    /**
+     * @hidden
+     * The original data item provided by the user. Passed in the tooltip template context.
+     */
+    dataItem: any;
+    constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, popupService: PopupService, viewContainer: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
-     * 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(): DiagramState;
     /**
-     * Focuses the Diagram.
+     * Focuses the `Diagram`.
      * @returns {boolean} true if focus was set successfully.
      */
     focus(): boolean;
     /**
-     * Clears the Diagram.
+     * Clears the `Diagram`.
      */
     clear(): void;
     /**
@@ -192,27 +254,27 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     connected(source: Shape, target: Shape): boolean;
     /**
-     * Adds connection to the Diagram.
+     * Adds connection to the `Diagram`.
      * @param {Connection} Connection.
      * @param {boolean} Boolean.
      * @returns {Connection} The newly created connection.
      */
     addConnection(connection: Connection, undoable?: boolean): Connection;
     /**
-     * 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.
      */
     addShape(item: ShapeOptions | Shape | Point, undoable?: boolean): Shape;
     /**
-     * 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.
      */
     remove(items: Shape | Connection | (Shape | Connection)[], undoable?: boolean): void;
     /**
-     * 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.
@@ -235,7 +297,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      */
     select(items: Shape | Connection | (Shape | Connection)[], options?: SelectionOptions): (Shape | Connection)[];
     /**
-     * Selects all items in the Diagram.
+     * Selects all items in the `Diagram`.
      */
     selectAll(): void;
     /**
@@ -371,9 +433,37 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
      * @returns {Group} A drawing Group element containing the exported visual with inverse zoom scaling
      */
     exportVisual(): Group;
+    /**
+     * Handles the tooltipShow event from the diagram widget.
+     */
+    private handleTooltipShow;
+    private showTooltip;
+    private popupClass;
+    private setCustomTemplate;
+    /**
+     * Handles the tooltipHide event from the diagram widget.
+     */
+    private handleTooltipHide;
+    /**
+     * Hides the current tooltip and cleans up resources.
+     */
+    private hideTooltip;
     protected activeEmitter(name: string): any;
+    /**
+     * Binds event handlers to the diagram widget.
+     */
+    private bindDiagramEvents;
+    /**
+     * Converts user data to Diagram model format using field mappings.
+     */
+    private convertUserData;
+    private addDataItemProperty;
+    /**
+     * Creates field mapping configuration from model fields.
+     */
+    private createFieldMapping;
     private init;
     private updateOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "tooltipShow": "tooltipShow"; "tooltipHide": "tooltipHide"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
 }

package/diagram.module.d.ts

@@ -4,6 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from "@angular/core";
 import * as i1 from "./diagram.component";
+import * as i2 from "./shape-tooltip-template.directive";
+import * as i3 from "./connection-tooltip-template.directive";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Diagram component.
@@ -37,6 +39,6 @@ import * as i1 from "./diagram.component";
  */
 export declare class DiagramModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DiagramModule, never, [typeof i1.DiagramComponent], [typeof i1.DiagramComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DiagramModule, never, [typeof i1.DiagramComponent, typeof i2.ShapeTooltipTemplateDirective, typeof i3.ConnectionTooltipTemplateDirective], [typeof i1.DiagramComponent, typeof i2.ShapeTooltipTemplateDirective, typeof i3.ConnectionTooltipTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DiagramModule>;
 }

package/directives.d.ts

@@ -3,6 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { DiagramComponent } from "./diagram.component";
+import { ConnectionTooltipTemplateDirective } from "./connection-tooltip-template.directive";
+import { ShapeTooltipTemplateDirective } from "./shape-tooltip-template.directive";
 /**
  * Represents the utility array that that contains all `Diagram`-related components and directives.
  *
@@ -22,4 +24,4 @@ import { DiagramComponent } from "./diagram.component";
  * export class DiagramAppComponent {}
  * ```
  */
-export declare const KENDO_DIAGRAM: readonly [typeof DiagramComponent];
+export declare const KENDO_DIAGRAM: readonly [typeof DiagramComponent, typeof ShapeTooltipTemplateDirective, typeof ConnectionTooltipTemplateDirective];

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

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