@progress/kendo-angular-diagrams 25.1.0-develop.3 → 25.1.0-develop.4

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

@@ -5,7 +5,7 @@
 import { 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 { Directive, EventEmitter, ContentChild, ViewChild, Output, Input, HostBinding, Component, NgModule } from '@angular/core';
+import { Directive, EventEmitter, signal, effect, ContentChild, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { isPresent, getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
@@ -20,8 +20,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1787037079,
-    version: '25.1.0-develop.3',
+    publishDate: 1787052849,
+    version: '25.1.0-develop.4',
     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',
 };
 
@@ -133,38 +133,74 @@ class DiagramComponent {
      * Defines the default configuration options applicable to all connections.
      *
      */
-    connectionDefaults;
+    set connectionDefaults(value) {
+        this._connectionDefaults.set(value);
+    }
+    get connectionDefaults() {
+        return this._connectionDefaults();
+    }
     /**
      * Defines the connections that render between the shapes in the `Diagram` (see [Connections article](https://www.telerik.com/kendo-angular-ui/components/diagrams/connections)).
      * Accepts either an array of `ConnectionOptions` or an array of any objects
      * that will be mapped using the `connectionModelFields` configuration.
      *
      */
-    connections = [];
+    set connections(value) {
+        this._connections.set(value);
+    }
+    get connections() {
+        return this._connections();
+    }
     /**
      * Defines the field mapping configuration for connections data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/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;
+    set connectionModelFields(value) {
+        this._connectionModelFields.set(value);
+    }
+    get connectionModelFields() {
+        return this._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 = true;
+    set editable(value) {
+        this._editable.set(value);
+        if (this.diagramWidget) {
+            this.options = { ...this.options, editable: value };
+            this.diagramWidget.destroy();
+            this.init();
+            this.bindDiagramEvents();
+        }
+    }
+    get editable() {
+        return this._editable();
+    }
     /**
      * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](https://www.telerik.com/kendo-angular-ui/components/diagrams/layouts)).
      *
      */
-    layout;
+    set layout(value) {
+        this._layout.set(value);
+    }
+    get layout() {
+        return this._layout();
+    }
     /**
      * Defines the pannable options. Use this setting to disable `Diagram` pan or change the key that activates the pan behavior.
      *
      * @default true
      */
-    pannable = true;
+    set pannable(value) {
+        this._pannable.set(value);
+    }
+    get pannable() {
+        return this._pannable();
+    }
     /**
      * Defines the `Diagram` selection options.
      *
@@ -176,48 +212,88 @@ class DiagramComponent {
      *
      * @default true
      */
-    selectable = true;
+    set selectable(value) {
+        this._selectable.set(value);
+    }
+    get selectable() {
+        return this._selectable();
+    }
     /**
      * Defines the default configuration options applicable to all shapes.
      */
-    shapeDefaults;
+    set shapeDefaults(value) {
+        this._shapeDefaults.set(value);
+    }
+    get shapeDefaults() {
+        return this._shapeDefaults();
+    }
     /**
      * Defines the shapes that render in the `Diagram` (see [Shapes article](https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes)).
      * Accepts either an array of `ShapeOptions` or an array of any objects
      * that will be mapped using the `shapeModelFields` configuration.
      *
      */
-    shapes = [];
+    set shapes(value) {
+        this._shapes.set(value);
+    }
+    get shapes() {
+        return this._shapes();
+    }
     /**
      * Defines the field mapping configuration for shapes data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/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;
+    set shapeModelFields(value) {
+        this._shapeModelFields.set(value);
+    }
+    get shapeModelFields() {
+        return this._shapeModelFields();
+    }
     /**
      * Defines the zoom level of the `Diagram`.
      *
      * @default 1
      */
-    zoom = 1;
+    set zoom(value) {
+        this._zoom.set(value);
+    }
+    get zoom() {
+        return this._zoom();
+    }
     /**
      * Defines the maximum zoom level of the `Diagram`.
      *
      * @default 2
      */
-    zoomMax = 2;
+    set zoomMax(value) {
+        this._zoomMax.set(value);
+    }
+    get zoomMax() {
+        return this._zoomMax();
+    }
     /**
      * Defines the minimum zoom level of the `Diagram`.
      *
      * @default 0.1
      */
-    zoomMin = 0.1;
+    set zoomMin(value) {
+        this._zoomMin.set(value);
+    }
+    get zoomMin() {
+        return this._zoomMin();
+    }
     /**
      * Defines the zoom rate of the `Diagram`.
      *
      * @default 0.1
      */
-    zoomRate = 0.1;
+    set zoomRate(value) {
+        this._zoomRate.set(value);
+    }
+    get zoomRate() {
+        return this._zoomRate();
+    }
     /**
      * Enables keyboard navigation in the `Diagram`.
      * When set to `true`, navigate between shapes using arrow keys.
@@ -228,19 +304,16 @@ class DiagramComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    set navigable(_navigable) {
-        if (typeof _navigable === 'boolean') {
-            this._navigable = _navigable ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false };
+    set navigable(value) {
+        if (typeof value === 'boolean') {
+            this._navigable.set(value ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false });
         }
         else {
-            this._navigable = _navigable;
-            this._navigable.enabled = isPresent(this._navigable.enabled) ? this._navigable.enabled : true;
+            this._navigable.set({ ...value, enabled: isPresent(value.enabled) ? value.enabled : true });
         }
-        this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
-        this.diagramWidget?.setOptions(this.options);
     }
     get navigable() {
-        return this._navigable;
+        return this._navigable();
     }
     /**
      * Fires when a shape or connection is created or removed.
@@ -333,20 +406,10 @@ class DiagramComponent {
      * @hidden
      */
     customTemplate;
-    _navigable = DEFAULT_NAVIGABLE_OPTIONS;
-    options = {
-        shapes: this.shapes,
-        connections: this.connections,
-        selectable: this.selectable,
-        editable: this.editable,
-        zoom: this.zoom,
-        zoomMax: this.zoomMax,
-        zoomMin: this.zoomMin,
-        zoomRate: this.zoomRate,
-        shapeDefaults: this.shapeDefaults,
-        connectionDefaults: this.connectionDefaults,
-        navigation: this.getNormalizedNavigationOptions()
-    };
+    /**
+     * Stores the live configuration that is pushed into the Diagram widget and updated by effects.
+     */
+    options;
     /**
      * Stores the converted shapes from user data.
      */
@@ -359,6 +422,91 @@ class DiagramComponent {
      * Current popup instance for tooltip.
      */
     tooltipPopup;
+    _navigable = signal(DEFAULT_NAVIGABLE_OPTIONS, ...(ngDevMode ? [{ debugName: "_navigable" }] : []));
+    _connectionDefaults = signal(undefined, ...(ngDevMode ? [{ debugName: "_connectionDefaults" }] : []));
+    _connections = signal([], ...(ngDevMode ? [{ debugName: "_connections" }] : []));
+    _connectionModelFields = signal(undefined, ...(ngDevMode ? [{ debugName: "_connectionModelFields" }] : []));
+    _editable = signal(true, ...(ngDevMode ? [{ debugName: "_editable" }] : []));
+    _layout = signal(undefined, ...(ngDevMode ? [{ debugName: "_layout" }] : []));
+    _pannable = signal(true, ...(ngDevMode ? [{ debugName: "_pannable" }] : []));
+    _selectable = signal(true, ...(ngDevMode ? [{ debugName: "_selectable" }] : []));
+    _shapeDefaults = signal(undefined, ...(ngDevMode ? [{ debugName: "_shapeDefaults" }] : []));
+    _shapes = signal([], ...(ngDevMode ? [{ debugName: "_shapes" }] : []));
+    _shapeModelFields = signal(undefined, ...(ngDevMode ? [{ debugName: "_shapeModelFields" }] : []));
+    _zoom = signal(1, ...(ngDevMode ? [{ debugName: "_zoom" }] : []));
+    _zoomMax = signal(2, ...(ngDevMode ? [{ debugName: "_zoomMax" }] : []));
+    _zoomMin = signal(0.1, ...(ngDevMode ? [{ debugName: "_zoomMin" }] : []));
+    _zoomRate = signal(0.1, ...(ngDevMode ? [{ debugName: "_zoomRate" }] : []));
+    dataBindingEffect = effect(() => {
+        this._shapes();
+        this._connections();
+        this._shapeModelFields();
+        this._connectionModelFields();
+        if (!this.diagramWidget) {
+            return;
+        }
+        this.convertUserData();
+        this.options = { ...this.options, shapes: this.convertedShapes, connections: this.convertedConnections };
+        this.loadOptions(this.options);
+    }, ...(ngDevMode ? [{ debugName: "dataBindingEffect" }] : []));
+    connectionDefaultsEffect = effect(() => {
+        const connectionDefaults = this._connectionDefaults();
+        if (!this.diagramWidget || connectionDefaults === undefined) {
+            return;
+        }
+        this.options.connectionDefaults = { ...this.options.connectionDefaults, ...connectionDefaults };
+        this.loadOptions(this.options);
+    }, ...(ngDevMode ? [{ debugName: "connectionDefaultsEffect" }] : []));
+    shapeDefaultsEffect = effect(() => {
+        const shapeDefaults = this._shapeDefaults();
+        if (!this.diagramWidget || shapeDefaults === undefined) {
+            return;
+        }
+        this.options.shapeDefaults = { ...this.options.shapeDefaults, ...shapeDefaults };
+        this.loadOptions(this.options);
+    }, ...(ngDevMode ? [{ debugName: "shapeDefaultsEffect" }] : []));
+    scalarOptionsEffect = effect(() => {
+        const zoomMax = this._zoomMax();
+        const zoomMin = this._zoomMin();
+        const zoomRate = this._zoomRate();
+        const selectable = this._selectable();
+        const pannable = this._pannable();
+        if (!this.diagramWidget) {
+            return;
+        }
+        this.options.zoomMax = zoomMax;
+        this.options.zoomMin = zoomMin;
+        this.options.zoomRate = zoomRate;
+        this.options.selectable = selectable;
+        this.options.pannable = pannable;
+        this.diagramWidget?.setOptions(this.options);
+    }, ...(ngDevMode ? [{ debugName: "scalarOptionsEffect" }] : []));
+    layoutEffect = effect(() => {
+        const layout = this._layout();
+        if (!this.diagramWidget) {
+            return;
+        }
+        this.options.layout = layout;
+        this.diagramWidget?.setOptions(this.options);
+        this.diagramWidget?.layout(this.options.layout);
+    }, ...(ngDevMode ? [{ debugName: "layoutEffect" }] : []));
+    zoomEffect = effect(() => {
+        const zoom = this._zoom();
+        if (!this.diagramWidget) {
+            return;
+        }
+        this.options.zoom = zoom;
+        this.diagramWidget?.setOptions(this.options);
+        this.diagramWidget?.zoom(this.diagramWidget?.options.zoom);
+    }, ...(ngDevMode ? [{ debugName: "zoomEffect" }] : []));
+    navigableEffect = effect(() => {
+        this._navigable();
+        if (!this.diagramWidget) {
+            return;
+        }
+        this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
+        this.diagramWidget?.setOptions(this.options);
+    }, ...(ngDevMode ? [{ debugName: "navigableEffect" }] : []));
     defaultTooltipTemplate;
     customTooltipTemplate;
     shapeTooltipTemplate;
@@ -378,60 +526,23 @@ class DiagramComponent {
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
-    ngOnChanges(changes) {
-        if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
-            this.convertUserData();
-            this.options = {
-                ...this.options,
-                shapes: this.convertedShapes,
-                connections: this.convertedConnections
-            };
-            this.loadOptions(this.options);
-        }
-        if (changes['connectionDefaults']) {
-            this.options.connectionDefaults = { ...this.options.connectionDefaults, ...this.connectionDefaults };
-            this.loadOptions(this.options);
-        }
-        if (changes['shapeDefaults']) {
-            this.options.shapeDefaults = { ...this.options.shapeDefaults, ...this.shapeDefaults };
-            this.loadOptions(this.options);
-        }
-        if (changes['editable']) {
-            this.options = { ...this.options, editable: this.editable };
-            if (this.diagramWidget) {
-                this.diagramWidget.destroy();
-                this.init();
-                this.bindDiagramEvents();
-            }
-        }
-        if (changes['zoomMax']) {
-            this.updateOptions('zoomMax');
-        }
-        if (changes['zoomMin']) {
-            this.updateOptions('zoomMin');
-        }
-        if (changes['zoomRate']) {
-            this.updateOptions('zoomRate');
-        }
-        if (changes['selectable']) {
-            this.updateOptions('selectable');
-        }
-        if (changes['layout']) {
-            this.updateOptions('layout');
-            this.diagramWidget?.layout(this.options.layout);
-        }
-        if (changes['pannable']) {
-            this.updateOptions('pannable');
-        }
-        if (changes['zoom']) {
-            this.updateOptions('zoom');
-            this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
-        }
-    }
     ngAfterViewInit() {
         this.convertUserData();
-        this.options.shapes = this.convertedShapes;
-        this.options.connections = this.convertedConnections;
+        this.options = {
+            shapes: this.convertedShapes,
+            connections: this.convertedConnections,
+            selectable: this.selectable,
+            editable: this.editable,
+            zoom: this.zoom,
+            zoomMax: this.zoomMax,
+            zoomMin: this.zoomMin,
+            zoomRate: this.zoomRate,
+            shapeDefaults: this.shapeDefaults,
+            connectionDefaults: this.connectionDefaults,
+            layout: this.layout,
+            pannable: this.pannable,
+            navigation: this.getNormalizedNavigationOptions(),
+        };
         this.renderer.setStyle(this.wrapperElement.nativeElement, 'display', 'block');
         this.init();
         this.bindDiagramEvents();
@@ -719,8 +830,11 @@ class DiagramComponent {
     handleTooltipShow(event) {
         this.hideTooltip();
         const dataItem = event.item.dataItem;
-        const isShape = event.item.name === "Shape";
-        const isConnection = event.item.name === "Connection";
+        if (!dataItem) {
+            return;
+        }
+        const isShape = event.item.name === 'Shape';
+        const isConnection = event.item.name === 'Connection';
         this.setCustomTemplate(isShape, isConnection);
         const defaultsEnabled = isShape
             ? this.options.shapeDefaults?.tooltip?.visible
@@ -749,19 +863,23 @@ class DiagramComponent {
             content: content,
             appendTo: this.viewContainer,
             popupClass,
-            animate: false
+            animate: false,
         });
         const contentElement = this.tooltipPopup.popupElement.querySelector('.k-popup');
         if (content === this.defaultTooltipTemplate) {
             this.renderer.addClass(contentElement, 'k-tooltip');
         }
+        // Force the popup to render before reading its dimensions.
+        // In zoneless mode NoopNgZone.run() does not trigger CD, so the popup
+        // template is not yet stamped when this code runs synchronously.
+        this.tooltipPopup.popup.changeDetectorRef.markForCheck();
         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 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,
@@ -771,7 +889,7 @@ class DiagramComponent {
             zoom: zoom,
             pan: pan,
             tooltipSize: { width: popupElementRect.width, height: popupElementRect.height },
-            viewportBounds: new DOMRect(0, 0, win.innerWidth, win.innerHeight)
+            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 });
@@ -862,20 +980,20 @@ class DiagramComponent {
             const mapping = {
                 shapes: {
                     source: () => this.shapes || [],
-                    map: this.createFieldMapping(this.shapeModelFields)
+                    map: this.createFieldMapping(this.shapeModelFields),
                 },
                 connections: {
                     source: () => this.connections || [],
-                    map: this.createFieldMapping(this.connectionModelFields)
-                }
+                    map: this.createFieldMapping(this.connectionModelFields),
+                },
             };
-            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.options.connections }, mapping);
+            const result = convertToDiagramModel({ shapes: this.shapes, connections: this.connections }, mapping);
             this.convertedShapes = this.addDataItemProperty(result.shapes, this.shapes);
-            this.convertedConnections = this.addDataItemProperty(result.connections, this.connections);
+            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);
+            this.convertedConnections = (this.addDataItemProperty(this.connections, this.connections));
         }
     }
     addDataItemProperty(array, sourceArray) {
@@ -887,7 +1005,7 @@ class DiagramComponent {
         }
         return array.map((item, index) => ({
             ...item,
-            dataItem: sourceArray[index]
+            dataItem: sourceArray[index],
         }));
     }
     /**
@@ -927,16 +1045,17 @@ class DiagramComponent {
         this.diagramWidget?.layout(options);
     }
     getNormalizedNavigationOptions() {
+        const nav = this._navigable();
         return {
-            disabled: !this._navigable.enabled,
-            smallStep: this._navigable.smallStep,
-            largeStep: this._navigable.largeStep
+            disabled: !nav.enabled,
+            smallStep: nav.smallStep,
+            largeStep: nav.largeStep,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", 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: "17.0.0", version: "20.3.27", 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", navigable: "navigable" }, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", 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", navigable: "navigable" }, 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"], ngImport: i0, template: `
         @if (showLicenseWatermark) {
-            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
 
         <ng-template #customTooltipTemplate>
@@ -946,7 +1065,7 @@ class DiagramComponent {
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
@@ -956,7 +1075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     selector: 'kendo-diagram',
                     template: `
         @if (showLicenseWatermark) {
-            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
 
         <ng-template #customTooltipTemplate>
@@ -966,9 +1085,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
-        `,
+    `,
                     imports: [WatermarkOverlayComponent, NgTemplateOutlet],
-                    providers: [PopupService]
+                    providers: [PopupService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PopupService }, { type: i0.ViewContainerRef }], propDecorators: { diagramClass: [{
                 type: HostBinding,

package/index.d.ts

@@ -5,7 +5,7 @@
 import { ConnectionDefaultsBase, ConnectionOptionsBase, ShapeDefaultsBase, NavigationOptions, ShapeOptionsBase, DiagramEditable, DiagramLayout, Pannable, Selectable, DiagramChangeEvent, DiagramDomEvent, DiagramDragEvent, DiagramItemBoundsChangeEvent, DiagramPanEvent, DiagramSelectEvent, DiagramZoomEndEvent, DiagramZoomStartEvent, Diagram, Shape, Connection, DiagramState, Point, Connector, SelectionOptions, Rect, BringIntoViewOptions, Direction } from '@progress/kendo-diagram-common';
 export { ArrowMarker, BringIntoViewOptions, Circle, CircleMarker, Collate, Connection, ConnectionCap, ConnectionContent, ConnectionDefaultsBase, ConnectionDefaultsEditable, ConnectionEditingPoint, ConnectionMapping, ConnectionOptionsBase, ConnectionPointsEditable, ConnectionRichTextContent, Connector, ConvertResult, Coordinate, DashType, DataInputOutput, DataStorage, Database, Decision, Delay, DiagramChangeEvent, DiagramDomEvent, DiagramDragEvent, DiagramEditable, DiagramItemBoundsChangeEvent, DiagramLayout, DiagramMapping, DiagramPanEvent, DiagramSelectEvent, DiagramState, DiagramZoomEndEvent, DiagramZoomStartEvent, DirectAccessStorage, Direction, Display, Document, EditableDefaults, Extract, Fill, FlowchartShapeType, FromPathOrFn, Group, Image, InlineImage, InternalStorage, Layout, LayoutGrid, Line, LineBreak, LogicalOr, ManualInputOutput, ManualOperation, MapSpec, MarkerType, Merge, MultiLineTextBlock, MultipleDocuments, OffPageConnector, OnPageConnector, Padding, Pannable, Paragraph, ParagraphMargin, Path, Point, Polyline, PredefinedProcess, Preparation, Process, Rect, Rectangle, Selectable, SelectionOptions, Shape, ShapeConnector, ShapeConnectorDefaults, ShapeConnectorHover, ShapeContent, ShapeDefaultsBase, ShapeDefaultsEditable, ShapeEditable, ShapeFill, ShapeFillGradient, ShapeFillGradientStop, ShapeHover, ShapeMapping, ShapeOptionsBase, ShapeRichTextContent, ShapeRotation, ShapeType, Sort, Stroke, SummingJunction, Terminator, TextBlock, TextRun, convertToDiagramModel } from '@progress/kendo-diagram-common';
 import * as i0 from '@angular/core';
-import { TemplateRef, AfterViewInit, OnChanges, OnDestroy, EventEmitter, ElementRef, Renderer2, NgZone, ViewContainerRef, SimpleChanges } from '@angular/core';
+import { TemplateRef, AfterViewInit, OnDestroy, EventEmitter, ElementRef, Renderer2, NgZone, ViewContainerRef } from '@angular/core';
 import { LicenseMessage } from '@progress/kendo-licensing';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { Group } from '@progress/kendo-drawing';
@@ -290,7 +290,7 @@ declare class ConnectionTooltipTemplateDirective {
  * <kendo-diagram [shapes]="shapesData"></kendo-diagram>
  * ```
  */
-declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
+declare class DiagramComponent implements AfterViewInit, OnDestroy {
     private wrapperElement;
     private renderer;
     private zone;
@@ -301,38 +301,44 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      * Defines the default configuration options applicable to all connections.
      *
      */
-    connectionDefaults?: ConnectionDefaults;
+    set connectionDefaults(value: ConnectionDefaults | undefined);
+    get connectionDefaults(): ConnectionDefaults | undefined;
     /**
      * Defines the connections that render between the shapes in the `Diagram` (see [Connections article](https://www.telerik.com/kendo-angular-ui/components/diagrams/connections)).
      * Accepts either an array of `ConnectionOptions` or an array of any objects
      * that will be mapped using the `connectionModelFields` configuration.
      *
      */
-    connections?: any[];
+    set connections(value: any[] | undefined);
+    get connections(): any[] | undefined;
     /**
      * Defines the field mapping configuration for connections data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/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?: ConnectionModelFields;
+    set connectionModelFields(value: ConnectionModelFields | undefined);
+    get connectionModelFields(): ConnectionModelFields | undefined;
     /**
      * 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;
+    set editable(value: boolean | DiagramEditable | undefined);
+    get editable(): boolean | DiagramEditable | undefined;
     /**
      * Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](https://www.telerik.com/kendo-angular-ui/components/diagrams/layouts)).
      *
      */
-    layout?: DiagramLayout;
+    set layout(value: DiagramLayout | undefined);
+    get layout(): DiagramLayout | undefined;
     /**
      * 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;
+    set pannable(value: boolean | Pannable | undefined);
+    get pannable(): boolean | Pannable | undefined;
     /**
      * Defines the `Diagram` selection options.
      *
@@ -344,48 +350,56 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      *
      * @default true
      */
-    selectable?: boolean | Selectable;
+    set selectable(value: boolean | Selectable | undefined);
+    get selectable(): boolean | Selectable | undefined;
     /**
      * Defines the default configuration options applicable to all shapes.
      */
-    shapeDefaults?: ShapeDefaults;
+    set shapeDefaults(value: ShapeDefaults | undefined);
+    get shapeDefaults(): ShapeDefaults | undefined;
     /**
      * Defines the shapes that render in the `Diagram` (see [Shapes article](https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes)).
      * Accepts either an array of `ShapeOptions` or an array of any objects
      * that will be mapped using the `shapeModelFields` configuration.
      *
      */
-    shapes?: any[];
+    set shapes(value: any[] | undefined);
+    get shapes(): any[] | undefined;
     /**
      * Defines the field mapping configuration for shapes data binding ([see example](https://www.telerik.com/kendo-angular-ui/components/diagrams/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?: ShapeModelFields;
+    set shapeModelFields(value: ShapeModelFields | undefined);
+    get shapeModelFields(): ShapeModelFields | undefined;
     /**
      * Defines the zoom level of the `Diagram`.
      *
      * @default 1
      */
-    zoom?: number;
+    set zoom(value: number | undefined);
+    get zoom(): number | undefined;
     /**
      * Defines the maximum zoom level of the `Diagram`.
      *
      * @default 2
      */
-    zoomMax?: number;
+    set zoomMax(value: number | undefined);
+    get zoomMax(): number | undefined;
     /**
      * Defines the minimum zoom level of the `Diagram`.
      *
      * @default 0.1
      */
-    zoomMin?: number;
+    set zoomMin(value: number | undefined);
+    get zoomMin(): number | undefined;
     /**
      * Defines the zoom rate of the `Diagram`.
      *
      * @default 0.1
      */
-    zoomRate?: number;
+    set zoomRate(value: number | undefined);
+    get zoomRate(): number | undefined;
     /**
      * Enables keyboard navigation in the `Diagram`.
      * When set to `true`, navigate between shapes using arrow keys.
@@ -396,7 +410,7 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      * @remarks
      * This property is related to accessibility.
      */
-    set navigable(_navigable: boolean | DiagramNavigationOptions);
+    set navigable(value: boolean | DiagramNavigationOptions);
     get navigable(): boolean | DiagramNavigationOptions;
     /**
      * Fires when a shape or connection is created or removed.
@@ -483,7 +497,9 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      * @hidden
      */
     customTemplate?: TemplateRef<any>;
-    private _navigable;
+    /**
+     * Stores the live configuration that is pushed into the Diagram widget and updated by effects.
+     */
     private options;
     /**
      * Stores the converted shapes from user data.
@@ -497,6 +513,28 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      * Current popup instance for tooltip.
      */
     private tooltipPopup?;
+    private _navigable;
+    private _connectionDefaults;
+    private _connections;
+    private _connectionModelFields;
+    private _editable;
+    private _layout;
+    private _pannable;
+    private _selectable;
+    private _shapeDefaults;
+    private _shapes;
+    private _shapeModelFields;
+    private _zoom;
+    private _zoomMax;
+    private _zoomMin;
+    private _zoomRate;
+    private dataBindingEffect;
+    private connectionDefaultsEffect;
+    private shapeDefaultsEffect;
+    private scalarOptionsEffect;
+    private layoutEffect;
+    private zoomEffect;
+    private navigableEffect;
     defaultTooltipTemplate: TemplateRef<any>;
     customTooltipTemplate: TemplateRef<any>;
     shapeTooltipTemplate: ShapeTooltipTemplateDirective;
@@ -507,7 +545,6 @@ declare class DiagramComponent implements AfterViewInit, OnChanges, OnDestroy {
      */
     dataItem: any;
     constructor(wrapperElement: ElementRef<HTMLElement>, renderer: Renderer2, zone: NgZone, popupService: PopupService, viewContainer: ViewContainerRef);
-    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1787037079,
-  "version": "25.1.0-develop.3",
+  "publishDate": 1787052849,
+  "version": "25.1.0-develop.4",
   "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"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-diagrams",
-  "version": "25.1.0-develop.3",
+  "version": "25.1.0-develop.4",
   "description": "Kendo UI Angular diagrams component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1787037079,
+      "publishDate": 1787052849,
       "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"
     }
   },
@@ -29,19 +29,19 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.1.0-develop.3",
-    "@progress/kendo-angular-buttons": "25.1.0-develop.3",
-    "@progress/kendo-angular-dialog": "25.1.0-develop.3",
-    "@progress/kendo-angular-dropdowns": "25.1.0-develop.3",
-    "@progress/kendo-angular-icons": "25.1.0-develop.3",
-    "@progress/kendo-angular-inputs": "25.1.0-develop.3",
-    "@progress/kendo-angular-popup": "25.1.0-develop.3",
+    "@progress/kendo-angular-common": "25.1.0-develop.4",
+    "@progress/kendo-angular-buttons": "25.1.0-develop.4",
+    "@progress/kendo-angular-dialog": "25.1.0-develop.4",
+    "@progress/kendo-angular-dropdowns": "25.1.0-develop.4",
+    "@progress/kendo-angular-icons": "25.1.0-develop.4",
+    "@progress/kendo-angular-inputs": "25.1.0-develop.4",
+    "@progress/kendo-angular-popup": "25.1.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "@progress/kendo-diagram-common": "^2.3.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.1.0-develop.3"
+    "@progress/kendo-angular-schematics": "25.1.0-develop.4"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-diagrams.mjs",