@progress/kendo-angular-diagrams 25.3.0-develop.1 → 25.3.0-develop.11

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

@@ -2,15 +2,26 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-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 { placeTooltip, events, convertToDiagramModel, loadTheme, Diagram, EditingUtils, FlowchartShapeType, resolveFloatingToolbarPlacement, emptyDiagramEditorSnapshot, getContextToolbarAnchors, isDiagramItemVisibleInViewport, DiagramEditorController } from '@progress/kendo-diagram-common';
+export { ArrowMarker, CapType, 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, signal, effect, ContentChild, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directive, EventEmitter, signal, effect, ContentChild, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component, ElementRef, computed, forwardRef, inject, ViewContainerRef, afterNextRender, viewChild, Optional, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import { isPresent, getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { isPresent, getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent, PrefixTemplateDirective } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-popup';
-import { PopupService } from '@progress/kendo-angular-popup';
+import { PopupService, POPUP_CONTAINER, PopupComponent } from '@progress/kendo-angular-popup';
 import { NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { EditorComponent, Schema, Node, Plugin, EditorState, keymap, baseKeymap, TextSelection } from '@progress/kendo-angular-editor';
+import { bold, italic, underline, placeholder, getInlineStyles, hasMark } from '@progress/kendo-editor-common';
+import { ToolBarToolComponent, ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarSeparatorComponent } from '@progress/kendo-angular-toolbar';
+import { chevronDownIcon, shapesIcon, undoIcon, redoIcon, pointerIcon, handIcon, freeTextIcon, borderTypeIcon, borderWidthIcon, rowsIcon, borderColorIcon, bringToFrontIcon, bringToBackIcon, rotateLeftIcon, rotateRightIcon, copyIcon, trashIcon, alignLeftIcon, alignTopIcon, boldIcon, foregroundColorIcon, italicIcon, underlineIcon, alignCenterIcon, alignRightIcon, alignMiddleIcon, alignBottomIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { SVGIconComponent } from '@progress/kendo-angular-icons';
+import { NumericTextBoxComponent, ColorPickerComponent } from '@progress/kendo-angular-inputs';
+import { Subscription } from 'rxjs';
+import { DropDownListComponent, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
 
 /**
  * @hidden
@@ -20,8 +31,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1790689543,
-    version: '25.3.0-develop.1',
+    publishDate: 1791365611,
+    version: '25.3.0-develop.11',
     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',
 };
 
@@ -59,10 +70,10 @@ class ShapeTooltipTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ShapeTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramShapeTooltipTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeTooltipTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDiagramShapeTooltipTemplate]',
@@ -101,10 +112,10 @@ class ConnectionTooltipTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ConnectionTooltipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: ConnectionTooltipTemplateDirective, isStandalone: true, selector: "[kendoDiagramConnectionTooltipTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ConnectionTooltipTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDiagramConnectionTooltipTemplate]',
@@ -376,6 +387,13 @@ class DiagramComponent {
      * Represents the Diagram instance, holding the core functionality of the Diagram.
      */
     diagramWidget;
+    /**
+     * @hidden
+     * Reactive reference to the underlying `Diagram` instance. Set once the widget is
+     * created in `init` so content-projected children (for example, the Diagram editor)
+     * can react to its availability instead of racing lifecycle hooks.
+     */
+    diagramInstance = signal(null, ...(ngDevMode ? [{ debugName: "diagramInstance" }] : []));
     /**
      * The currently selected items in the `Diagram`.
      */
@@ -462,7 +480,11 @@ class DiagramComponent {
         if (!this.diagramWidget || shapeDefaults === undefined) {
             return;
         }
-        this.options.shapeDefaults = { ...this.options.shapeDefaults, ...shapeDefaults };
+        this.options.shapeDefaults = {
+            ...this.options.shapeDefaults,
+            ...shapeDefaults,
+            content: { ...this.options.shapeDefaults?.content, ...shapeDefaults.content }
+        };
         this.loadOptions(this.options);
     }, ...(ngDevMode ? [{ debugName: "shapeDefaultsEffect" }] : []));
     scalarOptionsEffect = effect(() => {
@@ -537,7 +559,7 @@ class DiagramComponent {
             zoomMax: this.zoomMax,
             zoomMin: this.zoomMin,
             zoomRate: this.zoomRate,
-            shapeDefaults: this.shapeDefaults,
+            shapeDefaults: this.getShapeDefaults(),
             connectionDefaults: this.connectionDefaults,
             layout: this.layout,
             pannable: this.pannable,
@@ -550,6 +572,7 @@ class DiagramComponent {
     ngOnDestroy() {
         this.hideTooltip();
         this.diagramWidget?.destroy();
+        this.diagramInstance.set(null);
     }
     /**
      * Provides the current `Diagram`'s shapes and connections that can be used to create a new `Diagram` when needed.
@@ -558,6 +581,17 @@ class DiagramComponent {
     getState() {
         return this.diagramWidget?.save();
     }
+    getShapeDefaults() {
+        const shapeDefaults = this.shapeDefaults ?? {};
+        return {
+            ...shapeDefaults,
+            content: {
+                ...shapeDefaults.content,
+                fontSize: shapeDefaults.content?.fontSize,
+                fontFamily: shapeDefaults.content?.fontFamily
+            }
+        };
+    }
     /**
      * Focuses the `Diagram`.
      * @returns {boolean} true if focus was set successfully.
@@ -637,7 +671,8 @@ class DiagramComponent {
      * @returns {(Shape | Connection)[]} Array of selected items.
      */
     select(items, options) {
-        return this.diagramWidget?.select(items, options);
+        this.diagramWidget?.select(items, options);
+        return this.diagramWidget?.select() ?? [];
     }
     /**
      * Selects all items in the `Diagram`.
@@ -699,7 +734,8 @@ class DiagramComponent {
      * @returns {Point} Current pan position.
      */
     pan(pan, animate) {
-        return this.diagramWidget?.pan(pan, animate);
+        this.diagramWidget?.pan(pan, animate);
+        return this.diagramWidget?.pan();
     }
     /**
      * Gets the current `Diagram` viewport rectangle.
@@ -876,10 +912,11 @@ class DiagramComponent {
         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 diagram = this.diagramWidget;
+        const diagramRect = diagram.element.getBoundingClientRect();
+        const win = diagram.element.ownerDocument.defaultView;
+        const lines = diagram.connections.map((con) => con.allPoints());
+        const shapes = diagram.shapes.map((shp) => shp.bounds());
         const pos = placeTooltip({
             hovered: event.item,
             mouse: event.point,
@@ -938,7 +975,7 @@ class DiagramComponent {
      */
     bindDiagramEvents() {
         events.forEach((eventName) => {
-            this.diagramWidget.bind(eventName, (e) => {
+            this.diagramWidget?.bind(eventName, (e) => {
                 if (eventName === 'click') {
                     eventName = 'diagramClick';
                 }
@@ -1030,10 +1067,12 @@ class DiagramComponent {
         }
         this.zone.runOutsideAngular(() => {
             const theme = loadTheme(this.wrapperElement.nativeElement);
-            this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
-            this.diagramWidget._createOptionElements();
-            this.diagramWidget.zoom(this.diagramWidget.options.zoom);
-            this.diagramWidget.canvas.draw();
+            const diagram = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
+            diagram._createOptionElements();
+            diagram.zoom(diagram.options.zoom);
+            diagram.canvas.draw();
+            this.diagramWidget = diagram;
+            this.diagramInstance.set(this.diagramWidget);
         });
     }
     updateOptions(prop) {
@@ -1052,8 +1091,8 @@ class DiagramComponent {
             largeStep: nav.largeStep,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", 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.30", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", 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.32", 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>
         }
@@ -1065,9 +1104,11 @@ class DiagramComponent {
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
+
+        <ng-content></ng-content>
     `, 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.30", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -1085,6 +1126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
         <ng-template #defaultTemplate>
             {{dataItem?.tooltipText}}
         </ng-template>
+
+        <ng-content></ng-content>
     `,
                     imports: [WatermarkOverlayComponent, NgTemplateOutlet],
                     providers: [PopupService],
@@ -1167,6 +1210,4147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                 args: [ConnectionTooltipTemplateDirective]
             }] } });
 
+let nextIconsDropdownOverlayId = 0;
+const popupBodyFactory = () => {
+    if (isDocumentAvailable()) {
+        return new ElementRef(document.body);
+    }
+};
+/**
+ * @hidden
+ * Renders a button that opens a popup with a grid of icon buttons. Used by the shape type and
+ * border style tools of the shape and connection toolbars.
+ */
+class IconsDropdownComponent {
+    popupService;
+    controller = null;
+    value = null;
+    active;
+    buttonTitle = '';
+    buttonIcon;
+    data = [];
+    columns = 4;
+    popupClass;
+    overlayOwner = 'shape-toolbar';
+    valueSelect = new EventEmitter();
+    escape = new EventEmitter();
+    anchor;
+    popupContent;
+    chevronDownIcon = chevronDownIcon;
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    containerStyle = computed(() => this.columns === 4 ? '' : `grid-template-columns: repeat(${this.columns}, max-content);`, ...(ngDevMode ? [{ debugName: "containerStyle" }] : []));
+    overlayId = `icons-dropdown-${nextIconsDropdownOverlayId++}`;
+    surfaceCleanup = null;
+    returnFocus = false;
+    popupRef = null;
+    constructor(popupService) {
+        this.popupService = popupService;
+    }
+    ngOnDestroy() {
+        this.returnFocus = false;
+        this.open.set(false);
+        this.closePopup();
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+        this.controller?.closeOverlay(this.overlayId);
+    }
+    toggle() {
+        this.setOpen(!this.open());
+    }
+    onOpen() {
+        const popupElement = this.popupRef?.popup.instance.contentContainer?.nativeElement;
+        if (!popupElement) {
+            return;
+        }
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = this.controller?.registerSurface(popupElement) ?? null;
+        const container = popupElement.querySelector('.k-diagram-shapes-container');
+        const selectedIndex = this.data.findIndex((item) => item.value === this.value);
+        const optionIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        container?.querySelectorAll('button')[optionIndex]?.focus();
+    }
+    onClose() {
+        this.popupRef = null;
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+        if (this.open()) {
+            this.open.set(false);
+            this.controller?.closeOverlay(this.overlayId);
+        }
+        if (this.returnFocus) {
+            this.returnFocus = false;
+            this.anchor?.nativeElement.focus();
+        }
+    }
+    select(value) {
+        this.returnFocus = true;
+        this.setOpen(false);
+        this.valueSelect.emit(value);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.returnFocus = true;
+            this.setOpen(false);
+            this.escape.emit();
+            return;
+        }
+        const options = Array.from(event.currentTarget.querySelectorAll('button'));
+        const currentIndex = options.indexOf(event.target);
+        if (currentIndex < 0) {
+            return;
+        }
+        const rowStart = Math.floor(currentIndex / this.columns) * this.columns;
+        const column = currentIndex - rowStart;
+        const lastRowStart = Math.floor((options.length - 1) / this.columns) * this.columns;
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                nextIndex = currentIndex === 0 ? options.length - 1 : currentIndex - 1;
+                break;
+            case 'ArrowRight':
+                nextIndex = currentIndex === options.length - 1 ? 0 : currentIndex + 1;
+                break;
+            case 'ArrowUp':
+                nextIndex = currentIndex - this.columns;
+                if (nextIndex < 0) {
+                    nextIndex = Math.min(lastRowStart + column, options.length - 1);
+                }
+                break;
+            case 'ArrowDown':
+                nextIndex = currentIndex + this.columns;
+                if (nextIndex >= options.length) {
+                    nextIndex = column;
+                }
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        options[nextIndex].focus();
+    }
+    onBlur(event) {
+        const nextTarget = event.relatedTarget;
+        if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+            this.setOpen(false);
+        }
+    }
+    setOpen(next) {
+        if (next === this.open()) {
+            return;
+        }
+        this.open.set(next);
+        if (next) {
+            this.controller?.openOverlay(this.overlayId, this.overlayOwner);
+            this.openPopup();
+        }
+        else {
+            this.controller?.closeOverlay(this.overlayId);
+            this.closePopup();
+        }
+    }
+    openPopup() {
+        this.popupRef = this.popupService.open({
+            anchor: this.anchor,
+            content: this.popupContent,
+            popupClass: this.popupClass,
+            animate: false
+        });
+        this.popupRef.popupOpen.subscribe(() => this.onOpen());
+        this.popupRef.popupClose.subscribe(() => this.onClose());
+    }
+    closePopup() {
+        const popupRef = this.popupRef;
+        this.popupRef = null;
+        popupRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: IconsDropdownComponent, deps: [{ token: i1.PopupService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: IconsDropdownComponent, isStandalone: true, selector: "kendo-diagram-icons-dropdown", inputs: { controller: "controller", value: "value", active: "active", buttonTitle: "buttonTitle", buttonIcon: "buttonIcon", data: "data", columns: "columns", popupClass: "popupClass", overlayOwner: "overlayOwner" }, outputs: { valueSelect: "valueSelect", escape: "escape" }, providers: [
+            PopupService,
+            {
+                provide: POPUP_CONTAINER,
+                useFactory: popupBodyFactory
+            }
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, static: true }], ngImport: i0, template: `
+        <button
+            #anchor
+            kendoButton
+            type="button"
+            fillMode="flat"
+            [svgIcon]="buttonIcon"
+            [toggleable]="active !== undefined"
+            [selected]="active === true"
+            [title]="buttonTitle"
+            [attr.aria-label]="buttonTitle"
+            (click)="toggle()"
+        >
+            <kendo-svgicon [icon]="chevronDownIcon"></kendo-svgicon>
+        </button>
+        <ng-template #popupContent>
+            <div
+                class="k-diagram-shapes-container"
+                [style]="containerStyle()"
+                (keydown)="onKeyDown($event)"
+                (focusout)="onBlur($event)"
+            >
+                @for (item of data; track item.value) {
+                    <button
+                        kendoButton
+                        type="button"
+                        fillMode="flat"
+                        size="large"
+                        [svgIcon]="item.icon"
+                        [toggleable]="true"
+                        [selected]="value === item.value"
+                        [title]="item.label"
+                        [attr.aria-label]="item.label"
+                        (mousedown)="$event.preventDefault()"
+                        (click)="select(item.value)"
+                    ></button>
+                }
+            </div>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: IconsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-icons-dropdown',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        PopupService,
+                        {
+                            provide: POPUP_CONTAINER,
+                            useFactory: popupBodyFactory
+                        }
+                    ],
+                    imports: [ButtonComponent, SVGIconComponent],
+                    template: `
+        <button
+            #anchor
+            kendoButton
+            type="button"
+            fillMode="flat"
+            [svgIcon]="buttonIcon"
+            [toggleable]="active !== undefined"
+            [selected]="active === true"
+            [title]="buttonTitle"
+            [attr.aria-label]="buttonTitle"
+            (click)="toggle()"
+        >
+            <kendo-svgicon [icon]="chevronDownIcon"></kendo-svgicon>
+        </button>
+        <ng-template #popupContent>
+            <div
+                class="k-diagram-shapes-container"
+                [style]="containerStyle()"
+                (keydown)="onKeyDown($event)"
+                (focusout)="onBlur($event)"
+            >
+                @for (item of data; track item.value) {
+                    <button
+                        kendoButton
+                        type="button"
+                        fillMode="flat"
+                        size="large"
+                        [svgIcon]="item.icon"
+                        [toggleable]="true"
+                        [selected]="value === item.value"
+                        [title]="item.label"
+                        [attr.aria-label]="item.label"
+                        (mousedown)="$event.preventDefault()"
+                        (click)="select(item.value)"
+                    ></button>
+                }
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1.PopupService }], propDecorators: { controller: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], buttonIcon: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], popupClass: [{
+                type: Input
+            }], overlayOwner: [{
+                type: Input
+            }], valueSelect: [{
+                type: Output
+            }], escape: [{
+                type: Output
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { read: ElementRef }]
+            }], popupContent: [{
+                type: ViewChild,
+                args: ['popupContent', { static: true }]
+            }] } });
+
+/**
+ * The default content style for shapes and connections in the diagram for text editing.
+ */
+const diagramEditingContentDefaults = {
+    fontSize: 16,
+    fontFamily: EditingUtils.Data.fontNames[0].value
+};
+/**
+ * @hidden
+ */
+const mainToolbarPopupClass = 'k-diagram-main-toolbar-popup';
+/**
+ * @hidden
+ */
+const dropdownPopupClass = 'k-diagram-context-toolbar-popup';
+/**
+ * @hidden
+ */
+const toolbarPopupWrapClass = 'k-diagram-context-toolbar-container';
+/**
+ * The default set of tools for the main toolbar.
+ * @hidden
+ */
+const defaultMainToolbarTools = [
+    'undo',
+    'redo',
+    'separator',
+    'select',
+    'pan',
+    'separator',
+    'text',
+    'separator',
+    'shape'
+];
+const defaultConnectionToolbarTools = [
+    'color',
+    'separator',
+    'width',
+    'separator',
+    'style',
+    'separator',
+    'text',
+    'separator',
+    'startCap',
+    'separator',
+    'type',
+    'separator',
+    'endCap',
+    'separator',
+    'delete'
+];
+/**
+ * @hidden
+ * Maps a flowchart shape type to the localization message key of its label.
+ */
+const shapeMessageKeyMap = {
+    [FlowchartShapeType.Collate]: 'shapeCollateLabel',
+    [FlowchartShapeType.OnPageConnector]: 'shapeConnectorLabel',
+    [FlowchartShapeType.DataStorage]: 'shapeDataStorageLabel',
+    [FlowchartShapeType.Database]: 'shapeDatabaseLabel',
+    [FlowchartShapeType.Decision]: 'shapeDecisionLabel',
+    [FlowchartShapeType.Delay]: 'shapeDelayLabel',
+    [FlowchartShapeType.DirectAccessStorage]: 'shapeDirectAccessStorageLabel',
+    [FlowchartShapeType.Display]: 'shapeDisplayLabel',
+    [FlowchartShapeType.Document]: 'shapeDocumentLabel',
+    [FlowchartShapeType.Extract]: 'shapeExtractLabel',
+    [FlowchartShapeType.DataInputOutput]: 'shapeInputOutputLabel',
+    [FlowchartShapeType.InternalStorage]: 'shapeInternalStorageLabel',
+    [FlowchartShapeType.LogicalOr]: 'shapeLogicalOrLabel',
+    [FlowchartShapeType.ManualInputOutput]: 'shapeManualInputOutputLabel',
+    [FlowchartShapeType.ManualOperation]: 'shapeManualOperationLabel',
+    [FlowchartShapeType.Merge]: 'shapeMergeLabel',
+    [FlowchartShapeType.MultipleDocuments]: 'shapeMultipleDocumentsLabel',
+    [FlowchartShapeType.OffPageConnector]: 'shapeOffPageConnectorLabel',
+    [FlowchartShapeType.PredefinedProcess]: 'shapePredefinedProcessLabel',
+    [FlowchartShapeType.Preparation]: 'shapePreparationLabel',
+    [FlowchartShapeType.Process]: 'shapeProcessLabel',
+    [FlowchartShapeType.Sort]: 'shapeSortLabel',
+    [FlowchartShapeType.SummingJunction]: 'shapeSummingJunctionLabel',
+    [FlowchartShapeType.Terminator]: 'shapeTerminatorLabel'
+};
+/**
+ * @hidden
+ * Maps a border dash type to the localization message key of its label.
+ */
+const borderStyleMessageKeyMap = {
+    solid: 'borderStyleSolidLabel',
+    dot: 'borderStyleDottedLabel',
+    dash: 'borderStyleDashedLabel',
+    dashDot: 'borderStyleDashDotLabel',
+    longDash: 'borderStyleLongDashLabel',
+    longDashDot: 'borderStyleLongDashDotLabel',
+    longDashDotDot: 'borderStyleLongDashDotDotLabel'
+};
+
+/**
+ * @hidden
+ * Renders the shape type tool used by both the main toolbar's shape insertion tool and the
+ * shape editing toolbar's shape type tool.
+ */
+class ShapeSelectorComponent {
+    localization;
+    controller = null;
+    value = null;
+    active;
+    buttonTitle = '';
+    popupClass;
+    overlayOwner = 'main-toolbar';
+    set shapes(value) {
+        this._shapes.set(value);
+    }
+    get shapes() {
+        return this._shapes();
+    }
+    valueSelect = new EventEmitter();
+    buttonIcon = shapesIcon;
+    columns = 4;
+    shapeItems = computed(() => {
+        const shapesData = EditingUtils.Icons.shapesData;
+        const dataByType = new Map(shapesData.map(({ label, icon, type }) => [type, { label, icon }]));
+        const types = this._shapes() || EditingUtils.Data.workflowShapes;
+        return types.map((type) => {
+            const data = dataByType.get(type) || shapesData[0];
+            const messageKey = shapeMessageKeyMap[type];
+            const label = (messageKey && this.localization.get(messageKey)) || data.label;
+            return { label, icon: data.icon, value: type };
+        });
+    }, ...(ngDevMode ? [{ debugName: "shapeItems" }] : []));
+    _shapes = signal(undefined, ...(ngDevMode ? [{ debugName: "_shapes" }] : []));
+    constructor(localization) {
+        this.localization = localization;
+    }
+    onEscape() {
+        if (this.active) {
+            this.controller?.dispatch({ type: 'setActiveTool', tool: { type: 'select' } });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeSelectorComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: ShapeSelectorComponent, isStandalone: true, selector: "kendo-diagram-shape-selector", inputs: { controller: "controller", value: "value", active: "active", buttonTitle: "buttonTitle", popupClass: "popupClass", overlayOwner: "overlayOwner", shapes: "shapes" }, outputs: { valueSelect: "valueSelect" }, ngImport: i0, template: `
+        <kendo-diagram-icons-dropdown
+            [controller]="controller"
+            [value]="value"
+            [buttonTitle]="buttonTitle"
+            [buttonIcon]="buttonIcon"
+            [data]="shapeItems()"
+            [columns]="columns"
+            [popupClass]="popupClass"
+            [overlayOwner]="overlayOwner"
+            (valueSelect)="valueSelect.emit($event)"
+            (escape)="onEscape()"
+        ></kendo-diagram-icons-dropdown>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconsDropdownComponent, selector: "kendo-diagram-icons-dropdown", inputs: ["controller", "value", "active", "buttonTitle", "buttonIcon", "data", "columns", "popupClass", "overlayOwner"], outputs: ["valueSelect", "escape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-shape-selector',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconsDropdownComponent],
+                    template: `
+        <kendo-diagram-icons-dropdown
+            [controller]="controller"
+            [value]="value"
+            [buttonTitle]="buttonTitle"
+            [buttonIcon]="buttonIcon"
+            [data]="shapeItems()"
+            [columns]="columns"
+            [popupClass]="popupClass"
+            [overlayOwner]="overlayOwner"
+            (valueSelect)="valueSelect.emit($event)"
+            (escape)="onEscape()"
+        ></kendo-diagram-icons-dropdown>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { controller: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], popupClass: [{
+                type: Input
+            }], overlayOwner: [{
+                type: Input
+            }], shapes: [{
+                type: Input
+            }], valueSelect: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ * Provides a Toolbar tool container for custom diagram controls.
+ */
+class DiagramToolbarToolComponent extends ToolBarToolComponent {
+    content;
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return Boolean(this.getFocusableButton());
+    }
+    /**
+     * @hidden
+     */
+    focus(event) {
+        if (event?.type === 'click') {
+            return;
+        }
+        this.getFocusableButton()?.focus({ preventScroll: true });
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        return false;
+    }
+    getFocusableButton() {
+        return this.content?.nativeElement.querySelector('button') ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramToolbarToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: DiagramToolbarToolComponent, isStandalone: true, selector: "kendo-diagram-toolbar-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => DiagramToolbarToolComponent) }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <span #content [style.display]="'contents'">
+                <ng-content></ng-content>
+            </span>
+        </ng-template>
+    `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramToolbarToolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-toolbar-tool',
+                    standalone: true,
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => DiagramToolbarToolComponent) }],
+                    template: `
+        <ng-template #toolbarTemplate>
+            <span #content [style.display]="'contents'">
+                <ng-content></ng-content>
+            </span>
+        </ng-template>
+    `
+                }]
+        }], propDecorators: { content: [{
+                type: ViewChild,
+                args: ['content', { read: ElementRef }]
+            }] } });
+
+const topToolbarOffset = 2;
+const scrollbarWidth = 10;
+const floatingToolbarBorderRadius = '8px';
+const topAnchorAlign = { horizontal: 'center', vertical: 'top' };
+const bottomAnchorAlign = { horizontal: 'center', vertical: 'bottom' };
+const topPopupAlign = { horizontal: 'center', vertical: 'top' };
+const bottomPopupAlign = { horizontal: 'center', vertical: 'bottom' };
+const topPopupOffset = { left: 0, top: topToolbarOffset };
+const bottomPopupOffset = { left: 0, top: -(topToolbarOffset + scrollbarWidth) };
+const topToolbarPopupClasses = [mainToolbarPopupClass, 'k-diagram-top-toolbar-container'];
+/**
+ * @hidden
+ * Renders the main diagram toolbar with the undo, redo, select, pan, text, and shape tools.
+ */
+class MainToolbarComponent {
+    localization;
+    controller = null;
+    diagram = null;
+    snapshot = null;
+    tools = defaultMainToolbarTools;
+    position = 'top';
+    shapes;
+    visible = true;
+    ariaLabel;
+    undoIcon = undoIcon;
+    redoIcon = redoIcon;
+    pointerIcon = pointerIcon;
+    handIcon = handIcon;
+    freeTextIcon = freeTextIcon;
+    mainToolbarPopupClass = mainToolbarPopupClass;
+    topAnchorAlign = topAnchorAlign;
+    bottomAnchorAlign = bottomAnchorAlign;
+    topPopupAlign = topPopupAlign;
+    bottomPopupAlign = bottomPopupAlign;
+    topPopupOffset = topPopupOffset;
+    bottomPopupOffset = bottomPopupOffset;
+    topToolbarPopupClasses = topToolbarPopupClasses;
+    topToolbarOffset = topToolbarOffset;
+    scrollbarWidth = scrollbarWidth;
+    floatingToolbarBorderRadius = floatingToolbarBorderRadius;
+    set popup(value) {
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+        const popupElement = value?.contentContainer?.nativeElement;
+        if (popupElement) {
+            popupElement.style.borderRadius = floatingToolbarBorderRadius;
+            this.surfaceCleanup = this.controller?.registerSurface(popupElement) ?? null;
+        }
+    }
+    surfaceCleanup = null;
+    constructor(localization) {
+        this.localization = localization;
+    }
+    ngOnDestroy() {
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+    }
+    get canUndo() {
+        return Boolean(this.diagram && this.diagram.canUndo());
+    }
+    get canRedo() {
+        return Boolean(this.diagram && this.diagram.canRedo());
+    }
+    get activeToolType() {
+        return this.snapshot?.activeTool.type;
+    }
+    get activeShape() {
+        const tool = this.snapshot?.activeTool;
+        return tool && tool.type === 'insert-shape' ? tool.shape : null;
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    execute(type) {
+        this.controller?.execute({ type });
+    }
+    setActiveTool(tool) {
+        this.controller?.dispatch({ type: 'setActiveTool', tool });
+    }
+    onInsertShape(shape) {
+        this.setActiveTool({ type: 'insert-shape', shape });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: MainToolbarComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: MainToolbarComponent, isStandalone: true, selector: "kendo-diagram-main-toolbar", inputs: { controller: "controller", diagram: "diagram", snapshot: "snapshot", tools: "tools", position: "position", shapes: "shapes", visible: "visible", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "popup", first: true, predicate: PopupComponent, descendants: true }], ngImport: i0, template: `
+        @if (diagram) {
+            <kendo-popup
+                [anchor]="diagram.element"
+                [anchorAlign]="position === 'top' ? topAnchorAlign : bottomAnchorAlign"
+                [popupAlign]="position === 'top' ? topPopupAlign : bottomPopupAlign"
+                [offset]="position === 'top' ? topPopupOffset : bottomPopupOffset"
+                [animate]="false"
+                [positionMode]="'fixed'"
+                [popupClass]="topToolbarPopupClasses"
+                [style.opacity]="visible ? 1 : 0"
+                [style.visibility]="visible ? 'visible' : 'hidden'"
+                [style.pointer-events]="visible ? 'auto' : 'none'"
+            >
+            <div
+                (pointerenter)="controller?.handlePointerEnter()"
+                (pointerleave)="controller?.handlePointerLeave()"
+            >
+                <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel">
+                    <ng-template #toolTemplate let-tool>
+                        @switch (tool) {
+                            @case ('undo') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="undoIcon"
+                                    [disabled]="!canUndo"
+                                    [title]="messageFor('undoTitle')"
+                                    (click)="execute('undo')"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('redo') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="redoIcon"
+                                    [disabled]="!canRedo"
+                                    [title]="messageFor('redoTitle')"
+                                    (click)="execute('redo')"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('select') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="pointerIcon"
+                                    [selected]="activeToolType === 'select'"
+                                    [title]="messageFor('selectTitle')"
+                                    (click)="setActiveTool({ type: 'select' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('pan') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="handIcon"
+                                    [selected]="activeToolType === 'pan'"
+                                    [title]="messageFor('panTitle')"
+                                    (click)="setActiveTool({ type: 'pan' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('text') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="freeTextIcon"
+                                    [selected]="activeToolType === 'insert-text'"
+                                    [title]="messageFor('textTitle')"
+                                    (click)="setActiveTool({ type: 'insert-text' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('shape') {
+                                <kendo-diagram-toolbar-tool>
+                                    <kendo-diagram-shape-selector
+                                        [controller]="controller"
+                                        [shapes]="shapes"
+                                        [value]="activeToolType === 'insert-shape' ? activeShape : null"
+                                        [active]="activeToolType === 'insert-shape'"
+                                        [buttonTitle]="messageFor('shapeTitle')"
+                                        [popupClass]="mainToolbarPopupClass"
+                                        overlayOwner="main-toolbar"
+                                        (valueSelect)="onInsertShape($event)"
+                                    ></kendo-diagram-shape-selector>
+                                </kendo-diagram-toolbar-tool>
+                            }
+                            @case ('separator') {
+                                <kendo-toolbar-separator></kendo-toolbar-separator>
+                            }
+                        }
+                    </ng-template>
+                    @for (tool of tools; track $index) {
+                        @if (isArray(tool)) {
+                            <kendo-toolbar-buttongroup>
+                                @for (subTool of $any(tool); track $index) {
+                                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                                }
+                            </kendo-toolbar-buttongroup>
+                        } @else {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                        }
+                    }
+                </kendo-toolbar>
+            </div>
+            </kendo-popup>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText", "toolsSource"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: DiagramToolbarToolComponent, selector: "kendo-diagram-toolbar-tool" }, { kind: "component", type: ShapeSelectorComponent, selector: "kendo-diagram-shape-selector", inputs: ["controller", "value", "active", "buttonTitle", "popupClass", "overlayOwner", "shapes"], outputs: ["valueSelect"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: MainToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-main-toolbar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [PopupComponent, ToolBarComponent, ToolBarButtonComponent, ToolBarButtonGroupComponent, ToolBarSeparatorComponent, DiagramToolbarToolComponent, ShapeSelectorComponent, NgTemplateOutlet],
+                    template: `
+        @if (diagram) {
+            <kendo-popup
+                [anchor]="diagram.element"
+                [anchorAlign]="position === 'top' ? topAnchorAlign : bottomAnchorAlign"
+                [popupAlign]="position === 'top' ? topPopupAlign : bottomPopupAlign"
+                [offset]="position === 'top' ? topPopupOffset : bottomPopupOffset"
+                [animate]="false"
+                [positionMode]="'fixed'"
+                [popupClass]="topToolbarPopupClasses"
+                [style.opacity]="visible ? 1 : 0"
+                [style.visibility]="visible ? 'visible' : 'hidden'"
+                [style.pointer-events]="visible ? 'auto' : 'none'"
+            >
+            <div
+                (pointerenter)="controller?.handlePointerEnter()"
+                (pointerleave)="controller?.handlePointerLeave()"
+            >
+                <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel">
+                    <ng-template #toolTemplate let-tool>
+                        @switch (tool) {
+                            @case ('undo') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="undoIcon"
+                                    [disabled]="!canUndo"
+                                    [title]="messageFor('undoTitle')"
+                                    (click)="execute('undo')"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('redo') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="redoIcon"
+                                    [disabled]="!canRedo"
+                                    [title]="messageFor('redoTitle')"
+                                    (click)="execute('redo')"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('select') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="pointerIcon"
+                                    [selected]="activeToolType === 'select'"
+                                    [title]="messageFor('selectTitle')"
+                                    (click)="setActiveTool({ type: 'select' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('pan') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="handIcon"
+                                    [selected]="activeToolType === 'pan'"
+                                    [title]="messageFor('panTitle')"
+                                    (click)="setActiveTool({ type: 'pan' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('text') {
+                                <kendo-toolbar-button
+                                    fillMode="flat"
+                                    [svgIcon]="freeTextIcon"
+                                    [selected]="activeToolType === 'insert-text'"
+                                    [title]="messageFor('textTitle')"
+                                    (click)="setActiveTool({ type: 'insert-text' })"
+                                ></kendo-toolbar-button>
+                            }
+                            @case ('shape') {
+                                <kendo-diagram-toolbar-tool>
+                                    <kendo-diagram-shape-selector
+                                        [controller]="controller"
+                                        [shapes]="shapes"
+                                        [value]="activeToolType === 'insert-shape' ? activeShape : null"
+                                        [active]="activeToolType === 'insert-shape'"
+                                        [buttonTitle]="messageFor('shapeTitle')"
+                                        [popupClass]="mainToolbarPopupClass"
+                                        overlayOwner="main-toolbar"
+                                        (valueSelect)="onInsertShape($event)"
+                                    ></kendo-diagram-shape-selector>
+                                </kendo-diagram-toolbar-tool>
+                            }
+                            @case ('separator') {
+                                <kendo-toolbar-separator></kendo-toolbar-separator>
+                            }
+                        }
+                    </ng-template>
+                    @for (tool of tools; track $index) {
+                        @if (isArray(tool)) {
+                            <kendo-toolbar-buttongroup>
+                                @for (subTool of $any(tool); track $index) {
+                                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                                }
+                            </kendo-toolbar-buttongroup>
+                        } @else {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                        }
+                    }
+                </kendo-toolbar>
+            </div>
+            </kendo-popup>
+        }
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { controller: [{
+                type: Input
+            }], diagram: [{
+                type: Input
+            }], snapshot: [{
+                type: Input
+            }], tools: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], shapes: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], popup: [{
+                type: ViewChild,
+                args: [PopupComponent]
+            }] } });
+
+/**
+ * @hidden
+ * Renders the border style tool of the shape and connection editing toolbars.
+ */
+class BorderStyleComponent {
+    localization;
+    controller = null;
+    value = null;
+    buttonTitle = '';
+    overlayOwner = 'shape-toolbar';
+    valueSelect = new EventEmitter();
+    buttonIcon = borderTypeIcon;
+    dropdownPopupClass = dropdownPopupClass;
+    items = computed(() => {
+        return EditingUtils.Data.borderTypes.map(({ label, icon, value }) => {
+            const messageKey = borderStyleMessageKeyMap[value];
+            return { label: (messageKey && this.localization.get(messageKey)) || label, icon, value };
+        });
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    constructor(localization) {
+        this.localization = localization;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BorderStyleComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: BorderStyleComponent, isStandalone: true, selector: "kendo-diagram-border-style", inputs: { controller: "controller", value: "value", buttonTitle: "buttonTitle", overlayOwner: "overlayOwner" }, outputs: { valueSelect: "valueSelect" }, ngImport: i0, template: `
+        <kendo-diagram-icons-dropdown
+            [controller]="controller"
+            [value]="value"
+            [buttonTitle]="buttonTitle"
+            [buttonIcon]="buttonIcon"
+            [data]="items()"
+            [columns]="items().length"
+            [popupClass]="dropdownPopupClass"
+            [overlayOwner]="overlayOwner"
+            (valueSelect)="valueSelect.emit($event)"
+        ></kendo-diagram-icons-dropdown>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconsDropdownComponent, selector: "kendo-diagram-icons-dropdown", inputs: ["controller", "value", "active", "buttonTitle", "buttonIcon", "data", "columns", "popupClass", "overlayOwner"], outputs: ["valueSelect", "escape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BorderStyleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-border-style',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [IconsDropdownComponent],
+                    template: `
+        <kendo-diagram-icons-dropdown
+            [controller]="controller"
+            [value]="value"
+            [buttonTitle]="buttonTitle"
+            [buttonIcon]="buttonIcon"
+            [data]="items()"
+            [columns]="items().length"
+            [popupClass]="dropdownPopupClass"
+            [overlayOwner]="overlayOwner"
+            (valueSelect)="valueSelect.emit($event)"
+        ></kendo-diagram-icons-dropdown>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { controller: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], overlayOwner: [{
+                type: Input
+            }], valueSelect: [{
+                type: Output
+            }] } });
+
+let nextBorderWidthOverlayId = 0;
+const maxValue = 20;
+const step = 1;
+const borderWidthInputWidth = 60;
+/**
+ * @hidden
+ * Renders the border width tool of the shape and connection editing toolbars.
+ */
+class BorderWidthComponent {
+    controller = null;
+    value = 1;
+    min = 0;
+    label = '';
+    overlayOwner = 'shape-toolbar';
+    valueSelect = new EventEmitter();
+    anchor;
+    numericInput;
+    borderWidthIcon = borderWidthIcon;
+    chevronDownIcon = chevronDownIcon;
+    rowsIcon = rowsIcon;
+    dropdownPopupClass = dropdownPopupClass;
+    maxValue = maxValue;
+    step = step;
+    borderWidthInputWidth = borderWidthInputWidth;
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    overlayId = `border-width-${nextBorderWidthOverlayId++}`;
+    surfaceCleanup = null;
+    ngOnDestroy() {
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+        this.controller?.closeOverlay(this.overlayId);
+    }
+    toggle() {
+        this.setOpen(!this.open());
+    }
+    onOpen() {
+        if (!this.controller || !this.anchor) {
+            return;
+        }
+        const popupElement = this.anchor.nativeElement.ownerDocument.querySelector(`.${dropdownPopupClass}`);
+        if (popupElement) {
+            this.surfaceCleanup?.();
+            this.surfaceCleanup = this.controller.registerSurface(popupElement);
+        }
+        const input = popupElement?.querySelector('input');
+        input?.focus();
+        input?.select();
+    }
+    onClose() {
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+    }
+    onValueChange(value) {
+        this.valueSelect.emit(value || 0);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.onValueChange(this.numericInput?.value ?? this.value);
+            this.setOpen(false);
+            this.anchor?.nativeElement.focus();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.setOpen(false);
+            this.anchor?.nativeElement.focus();
+        }
+    }
+    onBlur() {
+        this.setOpen(false);
+    }
+    setOpen(next) {
+        if (next === this.open()) {
+            return;
+        }
+        this.open.set(next);
+        if (!this.controller) {
+            return;
+        }
+        if (next) {
+            this.controller.openOverlay(this.overlayId, this.overlayOwner);
+        }
+        else {
+            this.controller.closeOverlay(this.overlayId);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BorderWidthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: BorderWidthComponent, isStandalone: true, selector: "kendo-diagram-border-width", inputs: { controller: "controller", value: "value", min: "min", label: "label", overlayOwner: "overlayOwner" }, outputs: { valueSelect: "valueSelect" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef }, { propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true }], ngImport: i0, template: `
+        <button
+            #anchor
+            kendoButton
+            type="button"
+            fillMode="flat"
+            [svgIcon]="borderWidthIcon"
+            [title]="label"
+            [attr.aria-label]="label"
+            (click)="toggle()"
+            (mousedown)="$event.preventDefault()"
+        >
+            <kendo-svgicon [icon]="chevronDownIcon"></kendo-svgicon>
+        </button>
+        @if (open()) {
+            <kendo-popup
+                [anchor]="anchor"
+                [popupClass]="dropdownPopupClass"
+                [animate]="false"
+                (open)="onOpen()"
+                (close)="onClose()"
+            >
+                <kendo-numerictextbox
+                    #numericInput
+                    [style.width.px]="borderWidthInputWidth"
+                    [spinners]="false"
+                    [value]="value"
+                    [min]="min"
+                    [max]="maxValue"
+                    [step]="step"
+                    fillMode="flat"
+                    (keydown)="onKeyDown($event)"
+                    (blur)="onBlur()"
+                    (valueChange)="onValueChange($event)"
+                >
+                    <ng-template kendoPrefixTemplate>
+                        <kendo-svgicon [icon]="rowsIcon"></kendo-svgicon>
+                    </ng-template>
+                </kendo-numerictextbox>
+            </kendo-popup>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PrefixTemplateDirective, selector: "[kendoPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: BorderWidthComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-border-width',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ButtonComponent, PopupComponent, NumericTextBoxComponent, PrefixTemplateDirective, SVGIconComponent],
+                    template: `
+        <button
+            #anchor
+            kendoButton
+            type="button"
+            fillMode="flat"
+            [svgIcon]="borderWidthIcon"
+            [title]="label"
+            [attr.aria-label]="label"
+            (click)="toggle()"
+            (mousedown)="$event.preventDefault()"
+        >
+            <kendo-svgicon [icon]="chevronDownIcon"></kendo-svgicon>
+        </button>
+        @if (open()) {
+            <kendo-popup
+                [anchor]="anchor"
+                [popupClass]="dropdownPopupClass"
+                [animate]="false"
+                (open)="onOpen()"
+                (close)="onClose()"
+            >
+                <kendo-numerictextbox
+                    #numericInput
+                    [style.width.px]="borderWidthInputWidth"
+                    [spinners]="false"
+                    [value]="value"
+                    [min]="min"
+                    [max]="maxValue"
+                    [step]="step"
+                    fillMode="flat"
+                    (keydown)="onKeyDown($event)"
+                    (blur)="onBlur()"
+                    (valueChange)="onValueChange($event)"
+                >
+                    <ng-template kendoPrefixTemplate>
+                        <kendo-svgicon [icon]="rowsIcon"></kendo-svgicon>
+                    </ng-template>
+                </kendo-numerictextbox>
+            </kendo-popup>
+        }
+    `
+                }]
+        }], propDecorators: { controller: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], overlayOwner: [{
+                type: Input
+            }], valueSelect: [{
+                type: Output
+            }], anchor: [{
+                type: ViewChild,
+                args: ['anchor', { read: ElementRef }]
+            }], numericInput: [{
+                type: ViewChild,
+                args: ['numericInput']
+            }] } });
+
+/**
+ * The default set of tools for the shape editing toolbar.
+ * @hidden
+ */
+const defaultShapeToolbarTools = [
+    'type',
+    'backColor',
+    'separator',
+    'borderWidth',
+    'borderColor',
+    'borderStyle',
+    'separator',
+    'toFront',
+    'toBack',
+    'separator',
+    'rotateLeft',
+    'rotateRight',
+    'separator',
+    'duplicate',
+    'delete'
+];
+/**
+ * @hidden
+ * Renders the contextual toolbar shown next to a selected shape.
+ */
+class ShapeEditingToolbarComponent {
+    localization;
+    controller = null;
+    shape = null;
+    stateVersion;
+    tools = defaultShapeToolbarTools;
+    shapes;
+    ariaLabel;
+    borderColorIcon = borderColorIcon;
+    bringToFrontIcon = bringToFrontIcon;
+    bringToBackIcon = bringToBackIcon;
+    rotateLeftIcon = rotateLeftIcon;
+    rotateRightIcon = rotateRightIcon;
+    copyIcon = copyIcon;
+    trashIcon = trashIcon;
+    dropdownPopupClass = dropdownPopupClass;
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get options() {
+        return (this.shape?.options ?? {});
+    }
+    get shapeType() {
+        return this.options.type ?? FlowchartShapeType.Process;
+    }
+    get fillColor() {
+        const fill = this.options.fill;
+        return typeof fill === 'string' ? fill : fill?.color || '#ffffff';
+    }
+    get strokeColor() {
+        return this.shape?.shapeVisual?.options?.stroke?.color || '';
+    }
+    get strokeWidth() {
+        return this.shape?.shapeVisual?.options?.stroke?.width || 1;
+    }
+    get strokeDashType() {
+        return this.shape?.shapeVisual?.options?.stroke?.dashType || 'solid';
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    execute(type) {
+        this.controller?.execute({ type });
+    }
+    setShapeType(value) {
+        if (value !== this.shapeType) {
+            this.controller?.execute({ type: 'setShapeType', value });
+        }
+    }
+    setFillColor(value, picker) {
+        this.controller?.execute({ type: 'setShapeFillColor', value });
+        this.closePopup(picker);
+    }
+    setStrokeColor(value, picker) {
+        this.controller?.execute({ type: 'setShapeStrokeColor', value });
+        this.closePopup(picker);
+    }
+    setStrokeWidth(value) {
+        this.controller?.execute({ type: 'setShapeStrokeWidth', value });
+    }
+    setStrokeDashType(value) {
+        this.controller?.execute({ type: 'setShapeStrokeDashType', value });
+    }
+    closePopup(picker) {
+        if (picker?.isOpen) {
+            picker.togglePopup();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeEditingToolbarComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ShapeEditingToolbarComponent, isStandalone: true, selector: "kendo-diagram-shape-editing-toolbar", inputs: { controller: "controller", shape: "shape", stateVersion: "stateVersion", tools: "tools", shapes: "shapes", ariaLabel: "ariaLabel" }, ngImport: i0, template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('type') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-shape-selector
+                                [controller]="controller"
+                                [shapes]="shapes"
+                                [value]="shapeType"
+                                [buttonTitle]="messageFor('shapeTypeTitle')"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setShapeType($event)"
+                            ></kendo-diagram-shape-selector>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('backColor') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #fillPicker="kendoColorPicker"
+                                [value]="fillColor"
+                                [clearButton]="false"
+                                [views]="['palette']"
+                                [gradientSettings]="{ opacity: false }"
+                                fillMode="flat"
+                                [attr.title]="messageFor('fillColorTitle')"
+                                [attr.aria-label]="messageFor('fillColorTitle')"
+                                (valueChange)="setFillColor($event, fillPicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderWidth') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-width
+                                [controller]="controller"
+                                [value]="strokeWidth"
+                                [label]="messageFor('borderWidthTitle')"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setStrokeWidth($event)"
+                            ></kendo-diagram-border-width>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderColor') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #strokePicker="kendoColorPicker"
+                                [value]="strokeColor"
+                                [clearButton]="false"
+                                [svgIcon]="borderColorIcon"
+                                [views]="['palette']"
+                                [gradientSettings]="{ opacity: false }"
+                                fillMode="flat"
+                                [attr.title]="messageFor('borderColorTitle')"
+                                [attr.aria-label]="messageFor('borderColorTitle')"
+                                (valueChange)="setStrokeColor($event, strokePicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderStyle') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-style
+                                [controller]="controller"
+                                [value]="strokeDashType"
+                                [buttonTitle]="messageFor('borderStyleTitle')"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setStrokeDashType($event)"
+                            ></kendo-diagram-border-style>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('toFront') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="bringToFrontIcon"
+                            [title]="messageFor('toFrontTitle')"
+                            [attr.aria-label]="messageFor('toFrontTitle')"
+                            (click)="execute('shapeToFront')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('toBack') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="bringToBackIcon"
+                            [title]="messageFor('toBackTitle')"
+                            [attr.aria-label]="messageFor('toBackTitle')"
+                            (click)="execute('shapeToBack')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('rotateLeft') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="rotateLeftIcon"
+                            [title]="messageFor('rotateLeftTitle')"
+                            [attr.aria-label]="messageFor('rotateLeftTitle')"
+                            (click)="execute('rotateShapeLeft')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('rotateRight') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="rotateRightIcon"
+                            [title]="messageFor('rotateRightTitle')"
+                            [attr.aria-label]="messageFor('rotateRightTitle')"
+                            (click)="execute('rotateShapeRight')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('duplicate') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="copyIcon"
+                            [title]="messageFor('duplicateTitle')"
+                            [attr.aria-label]="messageFor('duplicateTitle')"
+                            (click)="execute('duplicateSelection')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('delete') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="trashIcon"
+                            [title]="messageFor('deleteTitle')"
+                            [attr.aria-label]="messageFor('deleteTitle')"
+                            (click)="execute('deleteSelection')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `, isInline: true, dependencies: [{ kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText", "toolsSource"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: DiagramToolbarToolComponent, selector: "kendo-diagram-toolbar-tool" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: BorderWidthComponent, selector: "kendo-diagram-border-width", inputs: ["controller", "value", "min", "label", "overlayOwner"], outputs: ["valueSelect"] }, { kind: "component", type: BorderStyleComponent, selector: "kendo-diagram-border-style", inputs: ["controller", "value", "buttonTitle", "overlayOwner"], outputs: ["valueSelect"] }, { kind: "component", type: ShapeSelectorComponent, selector: "kendo-diagram-shape-selector", inputs: ["controller", "value", "active", "buttonTitle", "popupClass", "overlayOwner", "shapes"], outputs: ["valueSelect"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ShapeEditingToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-shape-editing-toolbar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        ToolBarComponent,
+                        ToolBarButtonComponent,
+                        ToolBarButtonGroupComponent,
+                        ToolBarSeparatorComponent,
+                        DiagramToolbarToolComponent,
+                        ColorPickerComponent,
+                        BorderWidthComponent,
+                        BorderStyleComponent,
+                        ShapeSelectorComponent,
+                        NgTemplateOutlet
+                    ],
+                    template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('type') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-shape-selector
+                                [controller]="controller"
+                                [shapes]="shapes"
+                                [value]="shapeType"
+                                [buttonTitle]="messageFor('shapeTypeTitle')"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setShapeType($event)"
+                            ></kendo-diagram-shape-selector>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('backColor') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #fillPicker="kendoColorPicker"
+                                [value]="fillColor"
+                                [clearButton]="false"
+                                [views]="['palette']"
+                                [gradientSettings]="{ opacity: false }"
+                                fillMode="flat"
+                                [attr.title]="messageFor('fillColorTitle')"
+                                [attr.aria-label]="messageFor('fillColorTitle')"
+                                (valueChange)="setFillColor($event, fillPicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderWidth') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-width
+                                [controller]="controller"
+                                [value]="strokeWidth"
+                                [label]="messageFor('borderWidthTitle')"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setStrokeWidth($event)"
+                            ></kendo-diagram-border-width>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderColor') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #strokePicker="kendoColorPicker"
+                                [value]="strokeColor"
+                                [clearButton]="false"
+                                [svgIcon]="borderColorIcon"
+                                [views]="['palette']"
+                                [gradientSettings]="{ opacity: false }"
+                                fillMode="flat"
+                                [attr.title]="messageFor('borderColorTitle')"
+                                [attr.aria-label]="messageFor('borderColorTitle')"
+                                (valueChange)="setStrokeColor($event, strokePicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('borderStyle') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-style
+                                [controller]="controller"
+                                [value]="strokeDashType"
+                                [buttonTitle]="messageFor('borderStyleTitle')"
+                                overlayOwner="shape-toolbar"
+                                (valueSelect)="setStrokeDashType($event)"
+                            ></kendo-diagram-border-style>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('toFront') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="bringToFrontIcon"
+                            [title]="messageFor('toFrontTitle')"
+                            [attr.aria-label]="messageFor('toFrontTitle')"
+                            (click)="execute('shapeToFront')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('toBack') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="bringToBackIcon"
+                            [title]="messageFor('toBackTitle')"
+                            [attr.aria-label]="messageFor('toBackTitle')"
+                            (click)="execute('shapeToBack')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('rotateLeft') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="rotateLeftIcon"
+                            [title]="messageFor('rotateLeftTitle')"
+                            [attr.aria-label]="messageFor('rotateLeftTitle')"
+                            (click)="execute('rotateShapeLeft')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('rotateRight') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="rotateRightIcon"
+                            [title]="messageFor('rotateRightTitle')"
+                            [attr.aria-label]="messageFor('rotateRightTitle')"
+                            (click)="execute('rotateShapeRight')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('duplicate') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="copyIcon"
+                            [title]="messageFor('duplicateTitle')"
+                            [attr.aria-label]="messageFor('duplicateTitle')"
+                            (click)="execute('duplicateSelection')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('delete') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="trashIcon"
+                            [title]="messageFor('deleteTitle')"
+                            [attr.aria-label]="messageFor('deleteTitle')"
+                            (click)="execute('deleteSelection')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { controller: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], stateVersion: [{
+                type: Input
+            }], tools: [{
+                type: Input
+            }], shapes: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+const { connectionTypes, leftCapTypes, rightCapTypes } = EditingUtils.Data;
+class ConnectionEditingToolbarComponent {
+    localization;
+    controller = null;
+    connection = null;
+    stateVersion;
+    tools = defaultConnectionToolbarTools;
+    ariaLabel;
+    connectionTypes = connectionTypes;
+    leftCapTypes = leftCapTypes;
+    rightCapTypes = rightCapTypes;
+    dropdownPopupClass = dropdownPopupClass;
+    freeTextIcon = freeTextIcon;
+    trashIcon = trashIcon;
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get connectionTypeItems() {
+        return connectionTypes.map(({ label, icon, value }) => ({
+            label: this.messageFor(`connectionType${value[0].toUpperCase()}${value.slice(1)}Label`) || label,
+            icon,
+            value
+        }));
+    }
+    get startCapItems() {
+        return leftCapTypes.map(({ label, icon, value }) => ({ label: this.capLabel(value, label), icon, value }));
+    }
+    get endCapItems() {
+        return rightCapTypes.map(({ label, icon, value }) => ({ label: this.capLabel(value, label), icon, value }));
+    }
+    get connectionOptions() {
+        return (this.connection?.serialize().options ?? {});
+    }
+    get connectionType() {
+        return this.connectionOptions.type ?? 'polyline';
+    }
+    get connectionTypeIcon() {
+        return connectionTypes.find(({ value }) => value === this.connectionType)?.icon || connectionTypes[0].icon;
+    }
+    get strokeColor() {
+        const stroke = this.connectionOptions.stroke;
+        return typeof stroke === 'string' ? stroke : stroke?.color || '';
+    }
+    get strokeWidth() {
+        const stroke = this.connectionOptions.stroke;
+        return typeof stroke === 'object' ? stroke.width || 1 : 1;
+    }
+    get strokeDashType() {
+        const stroke = this.connectionOptions.stroke;
+        return typeof stroke === 'object' ? stroke.dashType || 'solid' : 'solid';
+    }
+    get startCap() {
+        return EditingUtils.getCapTypeValue(this.connectionOptions.startCap, 'start');
+    }
+    get startCapIcon() {
+        return leftCapTypes.find(({ value }) => value === this.startCap)?.icon || leftCapTypes[0].icon;
+    }
+    get endCap() {
+        return EditingUtils.getCapTypeValue(this.connectionOptions.endCap, 'end');
+    }
+    get endCapIcon() {
+        return rightCapTypes.find(({ value }) => value === this.endCap)?.icon || rightCapTypes[0].icon;
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    setConnectionType(value) {
+        this.controller?.execute({ type: 'setConnectionType', value });
+    }
+    setStrokeColor(value, picker) {
+        this.controller?.execute({ type: 'setConnectionStrokeColor', value });
+        if (picker?.isOpen) {
+            picker.togglePopup();
+        }
+    }
+    setStrokeWidth(value) {
+        this.controller?.execute({ type: 'setConnectionStrokeWidth', value });
+    }
+    setStrokeDashType(value) {
+        this.controller?.execute({ type: 'setConnectionStrokeDashType', value });
+    }
+    setStartCap(value) {
+        this.controller?.execute({ type: 'setConnectionStartCap', value });
+    }
+    setEndCap(value) {
+        this.controller?.execute({ type: 'setConnectionEndCap', value });
+    }
+    deleteSelection() {
+        this.controller?.execute({ type: 'deleteSelection' });
+    }
+    openTextEditor() {
+        this.controller?.execute({ type: 'openSelectedTextEditor' });
+    }
+    capLabel(value, fallback) {
+        const capLabelKeys = {
+            none: 'capNoneLabel',
+            TriangleArrow: 'capTriangleArrowLabel',
+            LineArrow: 'capLineArrowLabel',
+            FilledCircle: 'capFilledCircleLabel',
+            FilledDiamond: 'capFilledDiamondLabel'
+        };
+        const key = capLabelKeys[value] ?? 'capArrowLabel';
+        return this.messageFor(key) || fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ConnectionEditingToolbarComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: ConnectionEditingToolbarComponent, isStandalone: true, selector: "kendo-diagram-connection-editing-toolbar", inputs: { controller: "controller", connection: "connection", stateVersion: "stateVersion", tools: "tools", ariaLabel: "ariaLabel" }, ngImport: i0, template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('type') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="connectionType"
+                                [buttonTitle]="messageFor('connectionTypeTitle')"
+                                [buttonIcon]="connectionTypeIcon"
+                                [data]="connectionTypeItems"
+                                [columns]="connectionTypeItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setConnectionType($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('width') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-width
+                                [controller]="controller"
+                                [value]="strokeWidth"
+                                [label]="messageFor('connectionWidthTitle')"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStrokeWidth($event)"
+                            ></kendo-diagram-border-width>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('color') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #strokePicker="kendoColorPicker"
+                                [value]="strokeColor"
+                                [views]="['palette']"
+                                fillMode="flat"
+                                [attr.title]="messageFor('connectionColorTitle')"
+                                [attr.aria-label]="messageFor('connectionColorTitle')"
+                                (valueChange)="setStrokeColor($event, strokePicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('style') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-style
+                                [controller]="controller"
+                                [value]="strokeDashType"
+                                [buttonTitle]="messageFor('connectionStyleTitle')"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStrokeDashType($event)"
+                            ></kendo-diagram-border-style>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('startCap') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="startCap"
+                                [buttonTitle]="messageFor('startCapTitle')"
+                                [buttonIcon]="startCapIcon"
+                                [data]="startCapItems"
+                                [columns]="startCapItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStartCap($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('endCap') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="endCap"
+                                [buttonTitle]="messageFor('endCapTitle')"
+                                [buttonIcon]="endCapIcon"
+                                [data]="endCapItems"
+                                [columns]="endCapItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setEndCap($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('text') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="freeTextIcon"
+                            [title]="messageFor('editTextTitle')"
+                            [attr.aria-label]="messageFor('editTextTitle')"
+                            (click)="openTextEditor()"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('delete') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="trashIcon"
+                            [title]="messageFor('deleteTitle')"
+                            [attr.aria-label]="messageFor('deleteTitle')"
+                            (click)="deleteSelection()"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `, isInline: true, dependencies: [{ kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText", "toolsSource"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: DiagramToolbarToolComponent, selector: "kendo-diagram-toolbar-tool" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: BorderWidthComponent, selector: "kendo-diagram-border-width", inputs: ["controller", "value", "min", "label", "overlayOwner"], outputs: ["valueSelect"] }, { kind: "component", type: BorderStyleComponent, selector: "kendo-diagram-border-style", inputs: ["controller", "value", "buttonTitle", "overlayOwner"], outputs: ["valueSelect"] }, { kind: "component", type: IconsDropdownComponent, selector: "kendo-diagram-icons-dropdown", inputs: ["controller", "value", "active", "buttonTitle", "buttonIcon", "data", "columns", "popupClass", "overlayOwner"], outputs: ["valueSelect", "escape"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: ConnectionEditingToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-connection-editing-toolbar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        ToolBarComponent,
+                        ToolBarButtonComponent,
+                        ToolBarButtonGroupComponent,
+                        ToolBarSeparatorComponent,
+                        DiagramToolbarToolComponent,
+                        ColorPickerComponent,
+                        BorderWidthComponent,
+                        BorderStyleComponent,
+                        IconsDropdownComponent,
+                        NgTemplateOutlet
+                    ],
+                    template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('type') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="connectionType"
+                                [buttonTitle]="messageFor('connectionTypeTitle')"
+                                [buttonIcon]="connectionTypeIcon"
+                                [data]="connectionTypeItems"
+                                [columns]="connectionTypeItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setConnectionType($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('width') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-width
+                                [controller]="controller"
+                                [value]="strokeWidth"
+                                [label]="messageFor('connectionWidthTitle')"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStrokeWidth($event)"
+                            ></kendo-diagram-border-width>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('color') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                #strokePicker="kendoColorPicker"
+                                [value]="strokeColor"
+                                [views]="['palette']"
+                                fillMode="flat"
+                                [attr.title]="messageFor('connectionColorTitle')"
+                                [attr.aria-label]="messageFor('connectionColorTitle')"
+                                (valueChange)="setStrokeColor($event, strokePicker)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('style') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-border-style
+                                [controller]="controller"
+                                [value]="strokeDashType"
+                                [buttonTitle]="messageFor('connectionStyleTitle')"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStrokeDashType($event)"
+                            ></kendo-diagram-border-style>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('startCap') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="startCap"
+                                [buttonTitle]="messageFor('startCapTitle')"
+                                [buttonIcon]="startCapIcon"
+                                [data]="startCapItems"
+                                [columns]="startCapItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setStartCap($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('endCap') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [value]="endCap"
+                                [buttonTitle]="messageFor('endCapTitle')"
+                                [buttonIcon]="endCapIcon"
+                                [data]="endCapItems"
+                                [columns]="endCapItems.length"
+                                [popupClass]="dropdownPopupClass"
+                                overlayOwner="connection-toolbar"
+                                (valueSelect)="setEndCap($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('text') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="freeTextIcon"
+                            [title]="messageFor('editTextTitle')"
+                            [attr.aria-label]="messageFor('editTextTitle')"
+                            (click)="openTextEditor()"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('delete') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [svgIcon]="trashIcon"
+                            [title]="messageFor('deleteTitle')"
+                            [attr.aria-label]="messageFor('deleteTitle')"
+                            (click)="deleteSelection()"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }], propDecorators: { controller: [{
+                type: Input
+            }], connection: [{
+                type: Input
+            }], stateVersion: [{
+                type: Input
+            }], tools: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+const defaultTextToolbarTools = [
+    'color',
+    'separator',
+    'fontSize',
+    'separator',
+    'fontType',
+    'separator',
+    'bold',
+    'italic',
+    'underline',
+    'separator',
+    'align'
+];
+class TextEditingToolbarComponent {
+    localization;
+    injector;
+    cdr;
+    controller = null;
+    editor = null;
+    tools = defaultTextToolbarTools;
+    fontTypes = EditingUtils.Data.fontNames;
+    fontSizes = EditingUtils.Data.fontSizes;
+    fontSize;
+    fontType;
+    color;
+    bold = false;
+    italic = false;
+    underline = false;
+    renderVerticalAlignment = false;
+    ariaLabel;
+    alignmentChange = new EventEmitter();
+    stateChange = new EventEmitter();
+    set alignment(value) {
+        const { horizontal, vertical } = EditingUtils.parseAlignment(value ?? '');
+        this.horizontalAlignment = horizontal;
+        this.horizontalAlignmentIcon = this.horizontalAlignments.find((item) => item.value === horizontal)?.icon ?? alignLeftIcon;
+        this.verticalAlignment = vertical;
+        this.verticalAlignmentIcon = this.verticalAlignments.find((item) => item.value === vertical)?.icon ?? alignTopIcon;
+    }
+    popupViewContainer = inject(ViewContainerRef);
+    boldIcon = boldIcon;
+    foregroundColorIcon = foregroundColorIcon;
+    italicIcon = italicIcon;
+    underlineIcon = underlineIcon;
+    alignLeftIcon = alignLeftIcon;
+    alignCenterIcon = alignCenterIcon;
+    alignRightIcon = alignRightIcon;
+    alignTopIcon = alignTopIcon;
+    alignMiddleIcon = alignMiddleIcon;
+    alignBottomIcon = alignBottomIcon;
+    horizontalAlignment = 'left';
+    horizontalAlignmentIcon = alignLeftIcon;
+    verticalAlignment = 'top';
+    verticalAlignmentIcon = alignTopIcon;
+    horizontalAlignments = [];
+    verticalAlignments = [];
+    subs = new Subscription();
+    overlaySurfaceCleanup = null;
+    constructor(localization, injector, cdr) {
+        this.localization = localization;
+        this.injector = injector;
+        this.cdr = cdr;
+        this.buildAlignmentItems();
+        this.subs.add(this.localization.changes.subscribe(() => {
+            this.buildAlignmentItems();
+            this.cdr.markForCheck();
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+        this.releaseOverlaySurface();
+    }
+    isArray(value) {
+        return Array.isArray(value);
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    execute(command, value) {
+        this.editor?.exec(command, value);
+        this.stateChange.emit();
+        this.editor?.focus();
+    }
+    onColorPickerOpen() {
+        afterNextRender(() => this.registerOverlaySurface('k-colorpicker-popup'), { injector: this.injector });
+    }
+    onColorPickerClose() {
+        this.releaseOverlaySurface();
+    }
+    // Registers a toolbar overlay popup as an editor surface so interacting with it does not close the text editor.
+    registerOverlaySurface(popupClass) {
+        const doc = this.popupViewContainer.element.nativeElement.ownerDocument;
+        const popupElement = doc?.querySelector(`.${popupClass}`);
+        if (this.controller && popupElement) {
+            this.releaseOverlaySurface();
+            this.overlaySurfaceCleanup = this.controller.registerSurface(popupElement);
+        }
+    }
+    releaseOverlaySurface() {
+        this.overlaySurfaceCleanup?.();
+        this.overlaySurfaceCleanup = null;
+    }
+    setHorizontalAlignment(value) {
+        this.horizontalAlignment = value;
+        this.horizontalAlignmentIcon = this.horizontalAlignments.find((item) => item.value === value)?.icon ?? alignLeftIcon;
+        this.alignmentChange.emit(`${value} ${this.verticalAlignment}`);
+        this.editor?.focus();
+    }
+    setVerticalAlignment(value) {
+        this.verticalAlignment = value;
+        this.verticalAlignmentIcon = this.verticalAlignments.find((item) => item.value === value)?.icon ?? alignTopIcon;
+        this.alignmentChange.emit(`${this.horizontalAlignment} ${value}`);
+        this.editor?.focus();
+    }
+    buildAlignmentItems() {
+        this.horizontalAlignments = [
+            { label: this.messageFor('alignLeftLabel'), value: 'left', icon: alignLeftIcon },
+            { label: this.messageFor('alignCenterLabel'), value: 'center', icon: alignCenterIcon },
+            { label: this.messageFor('alignRightLabel'), value: 'right', icon: alignRightIcon }
+        ];
+        this.verticalAlignments = [
+            { label: this.messageFor('alignTopLabel'), value: 'top', icon: alignTopIcon },
+            { label: this.messageFor('alignMiddleLabel'), value: 'middle', icon: alignMiddleIcon },
+            { label: this.messageFor('alignBottomLabel'), value: 'bottom', icon: alignBottomIcon }
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: TextEditingToolbarComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: TextEditingToolbarComponent, isStandalone: true, selector: "kendo-diagram-text-editing-toolbar", inputs: { controller: "controller", editor: "editor", tools: "tools", fontTypes: "fontTypes", fontSizes: "fontSizes", fontSize: "fontSize", fontType: "fontType", color: "color", bold: "bold", italic: "italic", underline: "underline", renderVerticalAlignment: "renderVerticalAlignment", ariaLabel: "ariaLabel", alignment: "alignment" }, outputs: { alignmentChange: "alignmentChange", stateChange: "stateChange" }, ngImport: i0, template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('color') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                [value]="color"
+                                [views]="['palette']"
+                                [clearButton]="false"
+                                fillMode="flat"
+                                [svgIcon]="foregroundColorIcon"
+                                [attr.title]="messageFor('textColorTitle')"
+                                [attr.aria-label]="messageFor('textColorTitle')"
+                                (open)="onColorPickerOpen()"
+                                (close)="onColorPickerClose()"
+                                (valueChange)="execute('foreColor', $event)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('fontSize') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-dropdownlist
+                                [data]="fontSizes"
+                                textField="text"
+                                valueField="value"
+                                [value]="fontSize"
+                                [valuePrimitive]="true"
+                                [popupSettings]="{ popupClass: 'k-diagram-font-size-popup' }"
+                                [attr.title]="messageFor('fontSizeTitle')"
+                                [attr.aria-label]="messageFor('fontSizeTitle')"
+                                (opened)="registerOverlaySurface('k-diagram-font-size-popup')"
+                                (closed)="releaseOverlaySurface()"
+                                (valueChange)="execute('fontSize', $event)"
+                            ></kendo-dropdownlist>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('fontType') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-dropdownlist
+                                [data]="fontTypes"
+                                textField="text"
+                                valueField="value"
+                                [value]="fontType"
+                                [valuePrimitive]="true"
+                                [popupSettings]="{ popupClass: 'k-diagram-font-type-popup' }"
+                                [attr.title]="messageFor('fontTypeTitle')"
+                                [attr.aria-label]="messageFor('fontTypeTitle')"
+                                (opened)="registerOverlaySurface('k-diagram-font-type-popup')"
+                                (closed)="releaseOverlaySurface()"
+                                (valueChange)="execute('fontFamily', $event)"
+                            >
+                                <ng-template kendoDropDownListItemTemplate let-dataItem>
+                                    <span [style.font-family]="dataItem.value">{{ dataItem.text }}</span>
+                                </ng-template>
+                            </kendo-dropdownlist>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('bold') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="bold"
+                            [svgIcon]="boldIcon"
+                            [title]="messageFor('boldTitle')"
+                            [attr.aria-label]="messageFor('boldTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            (click)="execute('bold')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('italic') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="italic"
+                            [svgIcon]="italicIcon"
+                            [title]="messageFor('italicTitle')"
+                            [attr.aria-label]="messageFor('italicTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            (click)="execute('italic')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('underline') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="underline"
+                            [svgIcon]="underlineIcon"
+                            [title]="messageFor('underlineTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            [attr.aria-label]="messageFor('underlineTitle')"
+                            (click)="execute('underline')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('align') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [data]="horizontalAlignments"
+                                [value]="horizontalAlignment"
+                                [buttonIcon]="horizontalAlignmentIcon"
+                                [buttonTitle]="messageFor('alignHorizontalTitle')"
+                                overlayOwner="text-toolbar"
+                                [columns]="3"
+                                (valueSelect)="setHorizontalAlignment($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                        @if (renderVerticalAlignment) {
+                            <kendo-diagram-toolbar-tool>
+                                <kendo-diagram-icons-dropdown
+                                    [controller]="controller"
+                                    [data]="verticalAlignments"
+                                    [value]="verticalAlignment"
+                                    [buttonIcon]="verticalAlignmentIcon"
+                                    [buttonTitle]="messageFor('alignVerticalTitle')"
+                                    overlayOwner="text-toolbar"
+                                    [columns]="3"
+                                    (valueSelect)="setVerticalAlignment($event)"
+                                ></kendo-diagram-icons-dropdown>
+                            </kendo-diagram-toolbar-tool>
+                        }
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `, isInline: true, dependencies: [{ kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText", "toolsSource"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: DiagramToolbarToolComponent, selector: "kendo-diagram-toolbar-tool" }, { kind: "component", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: IconsDropdownComponent, selector: "kendo-diagram-icons-dropdown", inputs: ["controller", "value", "active", "buttonTitle", "buttonIcon", "data", "columns", "popupClass", "overlayOwner"], outputs: ["valueSelect", "escape"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: TextEditingToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-text-editing-toolbar',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        ToolBarComponent,
+                        ToolBarButtonComponent,
+                        ToolBarButtonGroupComponent,
+                        ToolBarSeparatorComponent,
+                        DiagramToolbarToolComponent,
+                        ColorPickerComponent,
+                        DropDownListComponent,
+                        ItemTemplateDirective,
+                        IconsDropdownComponent,
+                        NgTemplateOutlet
+                    ],
+                    template: `
+        <kendo-toolbar fillMode="flat" [attr.aria-label]="ariaLabel" overflow="scroll">
+            <ng-template #toolTemplate let-tool>
+                @switch (tool) {
+                    @case ('color') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-colorpicker
+                                [value]="color"
+                                [views]="['palette']"
+                                [clearButton]="false"
+                                fillMode="flat"
+                                [svgIcon]="foregroundColorIcon"
+                                [attr.title]="messageFor('textColorTitle')"
+                                [attr.aria-label]="messageFor('textColorTitle')"
+                                (open)="onColorPickerOpen()"
+                                (close)="onColorPickerClose()"
+                                (valueChange)="execute('foreColor', $event)"
+                            ></kendo-colorpicker>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('fontSize') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-dropdownlist
+                                [data]="fontSizes"
+                                textField="text"
+                                valueField="value"
+                                [value]="fontSize"
+                                [valuePrimitive]="true"
+                                [popupSettings]="{ popupClass: 'k-diagram-font-size-popup' }"
+                                [attr.title]="messageFor('fontSizeTitle')"
+                                [attr.aria-label]="messageFor('fontSizeTitle')"
+                                (opened)="registerOverlaySurface('k-diagram-font-size-popup')"
+                                (closed)="releaseOverlaySurface()"
+                                (valueChange)="execute('fontSize', $event)"
+                            ></kendo-dropdownlist>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('fontType') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-dropdownlist
+                                [data]="fontTypes"
+                                textField="text"
+                                valueField="value"
+                                [value]="fontType"
+                                [valuePrimitive]="true"
+                                [popupSettings]="{ popupClass: 'k-diagram-font-type-popup' }"
+                                [attr.title]="messageFor('fontTypeTitle')"
+                                [attr.aria-label]="messageFor('fontTypeTitle')"
+                                (opened)="registerOverlaySurface('k-diagram-font-type-popup')"
+                                (closed)="releaseOverlaySurface()"
+                                (valueChange)="execute('fontFamily', $event)"
+                            >
+                                <ng-template kendoDropDownListItemTemplate let-dataItem>
+                                    <span [style.font-family]="dataItem.value">{{ dataItem.text }}</span>
+                                </ng-template>
+                            </kendo-dropdownlist>
+                        </kendo-diagram-toolbar-tool>
+                    }
+                    @case ('bold') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="bold"
+                            [svgIcon]="boldIcon"
+                            [title]="messageFor('boldTitle')"
+                            [attr.aria-label]="messageFor('boldTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            (click)="execute('bold')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('italic') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="italic"
+                            [svgIcon]="italicIcon"
+                            [title]="messageFor('italicTitle')"
+                            [attr.aria-label]="messageFor('italicTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            (click)="execute('italic')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('underline') {
+                        <kendo-toolbar-button
+                            fillMode="flat"
+                            [selected]="underline"
+                            [svgIcon]="underlineIcon"
+                            [title]="messageFor('underlineTitle')"
+                            (pointerdown)="$event.preventDefault()"
+                            [attr.aria-label]="messageFor('underlineTitle')"
+                            (click)="execute('underline')"
+                        ></kendo-toolbar-button>
+                    }
+                    @case ('align') {
+                        <kendo-diagram-toolbar-tool>
+                            <kendo-diagram-icons-dropdown
+                                [controller]="controller"
+                                [data]="horizontalAlignments"
+                                [value]="horizontalAlignment"
+                                [buttonIcon]="horizontalAlignmentIcon"
+                                [buttonTitle]="messageFor('alignHorizontalTitle')"
+                                overlayOwner="text-toolbar"
+                                [columns]="3"
+                                (valueSelect)="setHorizontalAlignment($event)"
+                            ></kendo-diagram-icons-dropdown>
+                        </kendo-diagram-toolbar-tool>
+                        @if (renderVerticalAlignment) {
+                            <kendo-diagram-toolbar-tool>
+                                <kendo-diagram-icons-dropdown
+                                    [controller]="controller"
+                                    [data]="verticalAlignments"
+                                    [value]="verticalAlignment"
+                                    [buttonIcon]="verticalAlignmentIcon"
+                                    [buttonTitle]="messageFor('alignVerticalTitle')"
+                                    overlayOwner="text-toolbar"
+                                    [columns]="3"
+                                    (valueSelect)="setVerticalAlignment($event)"
+                                ></kendo-diagram-icons-dropdown>
+                            </kendo-diagram-toolbar-tool>
+                        }
+                    }
+                    @case ('separator') {
+                        <kendo-toolbar-separator></kendo-toolbar-separator>
+                    }
+                }
+            </ng-template>
+            @for (tool of tools; track $index) {
+                @if (isArray(tool)) {
+                    <kendo-toolbar-buttongroup>
+                        @for (subTool of $any(tool); track $index) {
+                            <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: subTool }"></ng-container>
+                        }
+                    </kendo-toolbar-buttongroup>
+                } @else {
+                    <ng-container [ngTemplateOutlet]="toolTemplate" [ngTemplateOutletContext]="{ $implicit: tool }"></ng-container>
+                }
+            }
+        </kendo-toolbar>
+    `
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { controller: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], tools: [{
+                type: Input
+            }], fontTypes: [{
+                type: Input
+            }], fontSizes: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], fontType: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], bold: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }], underline: [{
+                type: Input
+            }], renderVerticalAlignment: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], alignmentChange: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], alignment: [{
+                type: Input
+            }] } });
+
+const { floatingToolbarStyle } = EditingUtils.Data;
+const centeredAlign = { horizontal: 'center', vertical: 'center' };
+const popupAboveAnchor = { horizontal: 'center', vertical: 'bottom' };
+const popupAtAnchorTop = { horizontal: 'center', vertical: 'top' };
+const zeroOffset = { left: 0, top: 0 };
+const hiddenPlacement = { offset: zeroOffset, placement: 'above', visible: false };
+/**
+ * @hidden
+ * Positions a contextual toolbar next to a diagram item, flipping between the space above and
+ * below the item's anchor point depending on the available room within `boundaryElement`.
+ */
+class FloatingToolbarPopupComponent {
+    controller = null;
+    set show(value) {
+        this._show.set(value);
+    }
+    get show() {
+        return this._show();
+    }
+    set baseAnchor(value) {
+        this._baseAnchor.set(value);
+    }
+    get baseAnchor() {
+        return this._baseAnchor();
+    }
+    set fallbackAnchor(value) {
+        this._fallbackAnchor.set(value);
+    }
+    get fallbackAnchor() {
+        return this._fallbackAnchor();
+    }
+    set boundaryElement(value) {
+        this._boundaryElement.set(value ?? null);
+    }
+    get boundaryElement() {
+        return this._boundaryElement();
+    }
+    set popup(value) {
+        this._popup = value;
+        if (value) {
+            this.onOpen();
+        }
+        else {
+            this.surfaceCleanup?.();
+            this.surfaceCleanup = null;
+        }
+    }
+    centeredAlign = centeredAlign;
+    shouldRender = computed(() => this._show() && Boolean(this._baseAnchor()), ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    resolvedOffset = computed(() => {
+        const current = this.placement();
+        return current.visible ? current.offset : this._baseAnchor() ?? zeroOffset;
+    }, ...(ngDevMode ? [{ debugName: "resolvedOffset" }] : []));
+    resolvedPopupAlign = computed(() => {
+        const current = this.placement();
+        return current.visible && current.placement === 'below' ? popupAtAnchorTop : popupAboveAnchor;
+    }, ...(ngDevMode ? [{ debugName: "resolvedPopupAlign" }] : []));
+    // Popup content is measured asynchronously because kendo-popup renders it a tick after `shouldRender` becomes true.
+    recomputePlacementEffect = effect(() => {
+        const base = this._baseAnchor();
+        const fallback = this._fallbackAnchor();
+        const boundary = this._boundaryElement();
+        const visible = this.shouldRender();
+        if (!visible || !base) {
+            this.placement.set(hiddenPlacement);
+            return;
+        }
+        if (!boundary || !fallback) {
+            this.placement.set({ offset: base, placement: 'above', visible: true });
+            return;
+        }
+        this.measurePlacement();
+    }, ...(ngDevMode ? [{ debugName: "recomputePlacementEffect" }] : []));
+    _show = signal(false, ...(ngDevMode ? [{ debugName: "_show" }] : []));
+    _baseAnchor = signal(null, ...(ngDevMode ? [{ debugName: "_baseAnchor" }] : []));
+    _fallbackAnchor = signal(null, ...(ngDevMode ? [{ debugName: "_fallbackAnchor" }] : []));
+    _boundaryElement = signal(null, ...(ngDevMode ? [{ debugName: "_boundaryElement" }] : []));
+    placement = signal(hiddenPlacement, ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    popupHeight = 0;
+    surfaceCleanup = null;
+    _popup;
+    get popupElement() {
+        return this._popup?.contentContainer?.nativeElement;
+    }
+    ngOnDestroy() {
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = null;
+    }
+    onOpen() {
+        const popupElement = this.popupElement;
+        if (!isDocumentAvailable() || !popupElement) {
+            return;
+        }
+        Object.assign(popupElement.style, floatingToolbarStyle);
+        this.surfaceCleanup?.();
+        this.surfaceCleanup = this.controller?.registerSurface(popupElement) ?? null;
+    }
+    measurePlacement() {
+        const base = this._baseAnchor();
+        const fallback = this._fallbackAnchor();
+        const boundary = this._boundaryElement();
+        if (!isDocumentAvailable() || !base || !fallback || !boundary) {
+            return;
+        }
+        const popupElement = this.popupElement;
+        const measuredHeight = popupElement?.getBoundingClientRect().height || 0;
+        if (measuredHeight > 0) {
+            this.popupHeight = measuredHeight;
+        }
+        if (this.popupHeight <= 0) {
+            this.placement.set({ offset: base, placement: 'above', visible: true });
+            return;
+        }
+        const boundaryRect = boundary.getBoundingClientRect();
+        const ownerWindow = boundary.ownerDocument.defaultView;
+        const scrollY = ownerWindow?.scrollY ?? 0;
+        this.placement.set(resolveFloatingToolbarPlacement({
+            baseAnchor: base,
+            fallbackAnchor: fallback,
+            popupHeight: this.popupHeight,
+            boundaryTop: boundaryRect.top + scrollY,
+            boundaryBottom: boundaryRect.bottom + scrollY
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolbarPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: FloatingToolbarPopupComponent, isStandalone: true, selector: "kendo-diagram-floating-toolbar-popup", inputs: { controller: "controller", show: "show", baseAnchor: "baseAnchor", fallbackAnchor: "fallbackAnchor", boundaryElement: "boundaryElement" }, viewQueries: [{ propertyName: "popup", first: true, predicate: PopupComponent, descendants: true }], ngImport: i0, template: `
+        @if (shouldRender()) {
+            <kendo-popup
+                [anchorAlign]="centeredAlign"
+                [popupAlign]="resolvedPopupAlign()"
+                [offset]="resolvedOffset()"
+                [animate]="false"
+                positionMode="fixed"
+            >
+                <ng-content></ng-content>
+            </kendo-popup>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: FloatingToolbarPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-floating-toolbar-popup',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [PopupComponent],
+                    template: `
+        @if (shouldRender()) {
+            <kendo-popup
+                [anchorAlign]="centeredAlign"
+                [popupAlign]="resolvedPopupAlign()"
+                [offset]="resolvedOffset()"
+                [animate]="false"
+                positionMode="fixed"
+            >
+                <ng-content></ng-content>
+            </kendo-popup>
+        }
+    `
+                }]
+        }], propDecorators: { controller: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], baseAnchor: [{
+                type: Input
+            }], fallbackAnchor: [{
+                type: Input
+            }], boundaryElement: [{
+                type: Input
+            }], popup: [{
+                type: ViewChild,
+                args: [PopupComponent]
+            }] } });
+
+/**
+ * @hidden
+ */
+class DiagramEditorMessages extends ComponentMessages {
+    /**
+     * Sets the title of the undo tool in the main toolbar.
+     */
+    undoTitle;
+    /**
+     * Sets the title of the redo tool in the main toolbar.
+     */
+    redoTitle;
+    /**
+     * Sets the title of the select tool in the main toolbar.
+     */
+    selectTitle;
+    /**
+     * Sets the title of the pan tool in the main toolbar.
+     */
+    panTitle;
+    /**
+     * Sets the title of the text insertion tool in the main toolbar.
+     */
+    textTitle;
+    /**
+     * Sets the title of the shape insertion tool in the main toolbar.
+     */
+    shapeTitle;
+    /**
+     * Sets the label of the collate shape.
+     */
+    shapeCollateLabel;
+    /**
+     * Sets the label of the connector shape.
+     */
+    shapeConnectorLabel;
+    /**
+     * Sets the label of the data storage shape.
+     */
+    shapeDataStorageLabel;
+    /**
+     * Sets the label of the database shape.
+     */
+    shapeDatabaseLabel;
+    /**
+     * Sets the label of the decision shape.
+     */
+    shapeDecisionLabel;
+    /**
+     * Sets the label of the delay shape.
+     */
+    shapeDelayLabel;
+    /**
+     * Sets the label of the direct access storage shape.
+     */
+    shapeDirectAccessStorageLabel;
+    /**
+     * Sets the label of the display shape.
+     */
+    shapeDisplayLabel;
+    /**
+     * Sets the label of the document shape.
+     */
+    shapeDocumentLabel;
+    /**
+     * Sets the label of the extract shape.
+     */
+    shapeExtractLabel;
+    /**
+     * Sets the label of the input output shape.
+     */
+    shapeInputOutputLabel;
+    /**
+     * Sets the label of the internal storage shape.
+     */
+    shapeInternalStorageLabel;
+    /**
+     * Sets the label of the logical OR shape.
+     */
+    shapeLogicalOrLabel;
+    /**
+     * Sets the label of the manual input output shape.
+     */
+    shapeManualInputOutputLabel;
+    /**
+     * Sets the label of the manual operation shape.
+     */
+    shapeManualOperationLabel;
+    /**
+     * Sets the label of the merge shape.
+     */
+    shapeMergeLabel;
+    /**
+     * Sets the label of the multiple documents shape.
+     */
+    shapeMultipleDocumentsLabel;
+    /**
+     * Sets the label of the off-page connector shape.
+     */
+    shapeOffPageConnectorLabel;
+    /**
+     * Sets the label of the predefined process shape.
+     */
+    shapePredefinedProcessLabel;
+    /**
+     * Sets the label of the preparation shape.
+     */
+    shapePreparationLabel;
+    /**
+     * Sets the label of the process shape.
+     */
+    shapeProcessLabel;
+    /**
+     * Sets the label of the sort shape.
+     */
+    shapeSortLabel;
+    /**
+     * Sets the label of the summing junction shape.
+     */
+    shapeSummingJunctionLabel;
+    /**
+     * Sets the label of the terminator shape.
+     */
+    shapeTerminatorLabel;
+    /**
+     * Sets the title of the shape type tool in the shape editing toolbar.
+     */
+    shapeTypeTitle;
+    /**
+     * Sets the title of the fill color tool in the shape editing toolbar.
+     */
+    fillColorTitle;
+    /**
+     * Sets the title of the border width tool in the shape and connection editing toolbars.
+     */
+    borderWidthTitle;
+    /**
+     * Sets the title of the border color tool in the shape editing toolbar.
+     */
+    borderColorTitle;
+    /**
+     * Sets the title of the border style tool in the shape and connection editing toolbars.
+     */
+    borderStyleTitle;
+    /**
+     * Sets the label of the solid border style.
+     */
+    borderStyleSolidLabel;
+    /**
+     * Sets the label of the dotted border style.
+     */
+    borderStyleDottedLabel;
+    /**
+     * Sets the label of the dashed border style.
+     */
+    borderStyleDashedLabel;
+    /**
+     * Sets the label of the dash-dot border style.
+     */
+    borderStyleDashDotLabel;
+    /**
+     * Sets the label of the long dash border style.
+     */
+    borderStyleLongDashLabel;
+    /**
+     * Sets the label of the long dash-dot border style.
+     */
+    borderStyleLongDashDotLabel;
+    /**
+     * Sets the label of the long dash-dot-dot border style.
+     */
+    borderStyleLongDashDotDotLabel;
+    /**
+     * Sets the title of the bring-to-front tool in the shape editing toolbar.
+     */
+    toFrontTitle;
+    /**
+     * Sets the title of the send-to-back tool in the shape editing toolbar.
+     */
+    toBackTitle;
+    /**
+     * Sets the title of the rotate-left tool in the shape editing toolbar.
+     */
+    rotateLeftTitle;
+    /**
+     * Sets the title of the rotate-right tool in the shape editing toolbar.
+     */
+    rotateRightTitle;
+    /**
+     * Sets the title of the duplicate tool in the shape editing toolbar.
+     */
+    duplicateTitle;
+    /**
+     * Sets the title of the delete tool in the shape editing toolbar.
+     */
+    deleteTitle;
+    /**
+     * Sets the title of the connection type tool in the connection editing toolbar.
+     */
+    connectionTypeTitle;
+    /**
+     * Sets the label of the cascading connection type.
+     */
+    connectionTypeCascadingLabel;
+    /**
+     * Sets the label of the polyline connection type.
+     */
+    connectionTypePolylineLabel;
+    /**
+     * Sets the title of the start cap tool in the connection editing toolbar.
+     */
+    startCapTitle;
+    /**
+     * Sets the title of the end cap tool in the connection editing toolbar.
+     */
+    endCapTitle;
+    /**
+     * Sets the label of the no-cap option.
+     */
+    capNoneLabel;
+    /**
+     * Sets the label of the arrow cap option.
+     */
+    capArrowLabel;
+    /**
+     * Sets the label of the triangle arrow cap option.
+     */
+    capTriangleArrowLabel;
+    /**
+     * Sets the label of the line arrow cap option.
+     */
+    capLineArrowLabel;
+    /**
+     * Sets the label of the filled circle cap option.
+     */
+    capFilledCircleLabel;
+    /**
+     * Sets the label of the filled diamond cap option.
+     */
+    capFilledDiamondLabel;
+    /**
+     * Sets the title of the connection color tool in the connection editing toolbar.
+     */
+    connectionColorTitle;
+    /**
+     * Sets the title of the connection width tool in the connection editing toolbar.
+     */
+    connectionWidthTitle;
+    /**
+     * Sets the title of the connection style tool in the connection editing toolbar.
+     */
+    connectionStyleTitle;
+    /**
+     * Sets the title of the text color tool in the text editing toolbar.
+     */
+    textColorTitle;
+    /**
+     * Sets the title of the font size tool in the text editing toolbar.
+     */
+    fontSizeTitle;
+    /**
+     * Sets the title of the font type tool in the text editing toolbar.
+     */
+    fontTypeTitle;
+    /**
+     * Sets the title of the bold tool in the text editing toolbar.
+     */
+    boldTitle;
+    /**
+     * Sets the title of the italic tool in the text editing toolbar.
+     */
+    italicTitle;
+    /**
+     * Sets the title of the underline tool in the text editing toolbar.
+     */
+    underlineTitle;
+    /**
+     * Sets the title of the horizontal alignment tool in the text editing toolbar.
+     */
+    alignHorizontalTitle;
+    /**
+     * Sets the title of the vertical alignment tool in the text editing toolbar.
+     */
+    alignVerticalTitle;
+    /**
+     * Sets the label of the left horizontal alignment option in the text editing toolbar.
+     */
+    alignLeftLabel;
+    /**
+     * Sets the label of the center horizontal alignment option in the text editing toolbar.
+     */
+    alignCenterLabel;
+    /**
+     * Sets the label of the right horizontal alignment option in the text editing toolbar.
+     */
+    alignRightLabel;
+    /**
+     * Sets the label of the top vertical alignment option in the text editing toolbar.
+     */
+    alignTopLabel;
+    /**
+     * Sets the label of the middle vertical alignment option in the text editing toolbar.
+     */
+    alignMiddleLabel;
+    /**
+     * Sets the label of the bottom vertical alignment option in the text editing toolbar.
+     */
+    alignBottomLabel;
+    /**
+     * Sets the title of the text editing tool in the shape and connection editing toolbars.
+     */
+    editTextTitle;
+    /**
+     * Sets the placeholder text of the text editor.
+     */
+    textEditorPlaceholder;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: DiagramEditorMessages, isStandalone: true, selector: "kendoDiagramEditorMessages", inputs: { undoTitle: "undoTitle", redoTitle: "redoTitle", selectTitle: "selectTitle", panTitle: "panTitle", textTitle: "textTitle", shapeTitle: "shapeTitle", shapeCollateLabel: "shapeCollateLabel", shapeConnectorLabel: "shapeConnectorLabel", shapeDataStorageLabel: "shapeDataStorageLabel", shapeDatabaseLabel: "shapeDatabaseLabel", shapeDecisionLabel: "shapeDecisionLabel", shapeDelayLabel: "shapeDelayLabel", shapeDirectAccessStorageLabel: "shapeDirectAccessStorageLabel", shapeDisplayLabel: "shapeDisplayLabel", shapeDocumentLabel: "shapeDocumentLabel", shapeExtractLabel: "shapeExtractLabel", shapeInputOutputLabel: "shapeInputOutputLabel", shapeInternalStorageLabel: "shapeInternalStorageLabel", shapeLogicalOrLabel: "shapeLogicalOrLabel", shapeManualInputOutputLabel: "shapeManualInputOutputLabel", shapeManualOperationLabel: "shapeManualOperationLabel", shapeMergeLabel: "shapeMergeLabel", shapeMultipleDocumentsLabel: "shapeMultipleDocumentsLabel", shapeOffPageConnectorLabel: "shapeOffPageConnectorLabel", shapePredefinedProcessLabel: "shapePredefinedProcessLabel", shapePreparationLabel: "shapePreparationLabel", shapeProcessLabel: "shapeProcessLabel", shapeSortLabel: "shapeSortLabel", shapeSummingJunctionLabel: "shapeSummingJunctionLabel", shapeTerminatorLabel: "shapeTerminatorLabel", shapeTypeTitle: "shapeTypeTitle", fillColorTitle: "fillColorTitle", borderWidthTitle: "borderWidthTitle", borderColorTitle: "borderColorTitle", borderStyleTitle: "borderStyleTitle", borderStyleSolidLabel: "borderStyleSolidLabel", borderStyleDottedLabel: "borderStyleDottedLabel", borderStyleDashedLabel: "borderStyleDashedLabel", borderStyleDashDotLabel: "borderStyleDashDotLabel", borderStyleLongDashLabel: "borderStyleLongDashLabel", borderStyleLongDashDotLabel: "borderStyleLongDashDotLabel", borderStyleLongDashDotDotLabel: "borderStyleLongDashDotDotLabel", toFrontTitle: "toFrontTitle", toBackTitle: "toBackTitle", rotateLeftTitle: "rotateLeftTitle", rotateRightTitle: "rotateRightTitle", duplicateTitle: "duplicateTitle", deleteTitle: "deleteTitle", connectionTypeTitle: "connectionTypeTitle", connectionTypeCascadingLabel: "connectionTypeCascadingLabel", connectionTypePolylineLabel: "connectionTypePolylineLabel", startCapTitle: "startCapTitle", endCapTitle: "endCapTitle", capNoneLabel: "capNoneLabel", capArrowLabel: "capArrowLabel", capTriangleArrowLabel: "capTriangleArrowLabel", capLineArrowLabel: "capLineArrowLabel", capFilledCircleLabel: "capFilledCircleLabel", capFilledDiamondLabel: "capFilledDiamondLabel", connectionColorTitle: "connectionColorTitle", connectionWidthTitle: "connectionWidthTitle", connectionStyleTitle: "connectionStyleTitle", textColorTitle: "textColorTitle", fontSizeTitle: "fontSizeTitle", fontTypeTitle: "fontTypeTitle", boldTitle: "boldTitle", italicTitle: "italicTitle", underlineTitle: "underlineTitle", alignHorizontalTitle: "alignHorizontalTitle", alignVerticalTitle: "alignVerticalTitle", alignLeftLabel: "alignLeftLabel", alignCenterLabel: "alignCenterLabel", alignRightLabel: "alignRightLabel", alignTopLabel: "alignTopLabel", alignMiddleLabel: "alignMiddleLabel", alignBottomLabel: "alignBottomLabel", editTextTitle: "editTextTitle", textEditorPlaceholder: "textEditorPlaceholder" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendoDiagramEditorMessages'
+                }]
+        }], propDecorators: { undoTitle: [{
+                type: Input
+            }], redoTitle: [{
+                type: Input
+            }], selectTitle: [{
+                type: Input
+            }], panTitle: [{
+                type: Input
+            }], textTitle: [{
+                type: Input
+            }], shapeTitle: [{
+                type: Input
+            }], shapeCollateLabel: [{
+                type: Input
+            }], shapeConnectorLabel: [{
+                type: Input
+            }], shapeDataStorageLabel: [{
+                type: Input
+            }], shapeDatabaseLabel: [{
+                type: Input
+            }], shapeDecisionLabel: [{
+                type: Input
+            }], shapeDelayLabel: [{
+                type: Input
+            }], shapeDirectAccessStorageLabel: [{
+                type: Input
+            }], shapeDisplayLabel: [{
+                type: Input
+            }], shapeDocumentLabel: [{
+                type: Input
+            }], shapeExtractLabel: [{
+                type: Input
+            }], shapeInputOutputLabel: [{
+                type: Input
+            }], shapeInternalStorageLabel: [{
+                type: Input
+            }], shapeLogicalOrLabel: [{
+                type: Input
+            }], shapeManualInputOutputLabel: [{
+                type: Input
+            }], shapeManualOperationLabel: [{
+                type: Input
+            }], shapeMergeLabel: [{
+                type: Input
+            }], shapeMultipleDocumentsLabel: [{
+                type: Input
+            }], shapeOffPageConnectorLabel: [{
+                type: Input
+            }], shapePredefinedProcessLabel: [{
+                type: Input
+            }], shapePreparationLabel: [{
+                type: Input
+            }], shapeProcessLabel: [{
+                type: Input
+            }], shapeSortLabel: [{
+                type: Input
+            }], shapeSummingJunctionLabel: [{
+                type: Input
+            }], shapeTerminatorLabel: [{
+                type: Input
+            }], shapeTypeTitle: [{
+                type: Input
+            }], fillColorTitle: [{
+                type: Input
+            }], borderWidthTitle: [{
+                type: Input
+            }], borderColorTitle: [{
+                type: Input
+            }], borderStyleTitle: [{
+                type: Input
+            }], borderStyleSolidLabel: [{
+                type: Input
+            }], borderStyleDottedLabel: [{
+                type: Input
+            }], borderStyleDashedLabel: [{
+                type: Input
+            }], borderStyleDashDotLabel: [{
+                type: Input
+            }], borderStyleLongDashLabel: [{
+                type: Input
+            }], borderStyleLongDashDotLabel: [{
+                type: Input
+            }], borderStyleLongDashDotDotLabel: [{
+                type: Input
+            }], toFrontTitle: [{
+                type: Input
+            }], toBackTitle: [{
+                type: Input
+            }], rotateLeftTitle: [{
+                type: Input
+            }], rotateRightTitle: [{
+                type: Input
+            }], duplicateTitle: [{
+                type: Input
+            }], deleteTitle: [{
+                type: Input
+            }], connectionTypeTitle: [{
+                type: Input
+            }], connectionTypeCascadingLabel: [{
+                type: Input
+            }], connectionTypePolylineLabel: [{
+                type: Input
+            }], startCapTitle: [{
+                type: Input
+            }], endCapTitle: [{
+                type: Input
+            }], capNoneLabel: [{
+                type: Input
+            }], capArrowLabel: [{
+                type: Input
+            }], capTriangleArrowLabel: [{
+                type: Input
+            }], capLineArrowLabel: [{
+                type: Input
+            }], capFilledCircleLabel: [{
+                type: Input
+            }], capFilledDiamondLabel: [{
+                type: Input
+            }], connectionColorTitle: [{
+                type: Input
+            }], connectionWidthTitle: [{
+                type: Input
+            }], connectionStyleTitle: [{
+                type: Input
+            }], textColorTitle: [{
+                type: Input
+            }], fontSizeTitle: [{
+                type: Input
+            }], fontTypeTitle: [{
+                type: Input
+            }], boldTitle: [{
+                type: Input
+            }], italicTitle: [{
+                type: Input
+            }], underlineTitle: [{
+                type: Input
+            }], alignHorizontalTitle: [{
+                type: Input
+            }], alignVerticalTitle: [{
+                type: Input
+            }], alignLeftLabel: [{
+                type: Input
+            }], alignCenterLabel: [{
+                type: Input
+            }], alignRightLabel: [{
+                type: Input
+            }], alignTopLabel: [{
+                type: Input
+            }], alignMiddleLabel: [{
+                type: Input
+            }], alignBottomLabel: [{
+                type: Input
+            }], editTextTitle: [{
+                type: Input
+            }], textEditorPlaceholder: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class DiagramEditorLocalizedMessagesDirective extends DiagramEditorMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorLocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.32", type: DiagramEditorLocalizedMessagesDirective, isStandalone: true, selector: "[kendoDiagramEditorLocalizedMessages]", providers: [
+            {
+                provide: DiagramEditorMessages,
+                useExisting: forwardRef(() => DiagramEditorLocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorLocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: DiagramEditorMessages,
+                            useExisting: forwardRef(() => DiagramEditorLocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoDiagramEditorLocalizedMessages]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
+
+/**
+ * Represents the [Kendo UI Diagram Editor component for Angular](slug:overview_diagrameditor).
+ *
+ * The Diagram Editor renders floating toolbars that let users edit the shapes, connections,
+ * and text of the parent Diagram. Render it inside a `<kendo-diagram>` component.
+ *
+ * @example
+ * ```html
+ * <kendo-diagram>
+ *   <kendo-diagram-editor></kendo-diagram-editor>
+ * </kendo-diagram>
+ * ```
+ */
+class DiagramEditorComponent {
+    host;
+    localization;
+    ngZone;
+    renderer;
+    editorComponent = viewChild(EditorComponent, ...(ngDevMode ? [{ debugName: "editorComponent" }] : []));
+    editorElementRef = viewChild(EditorComponent, ...(ngDevMode ? [{ debugName: "editorElementRef", read: ElementRef }] : [{ read: ElementRef }]));
+    /**
+     * Configures the diagram editor toolbars.
+     */
+    set toolbars(value) {
+        this._toolbars.set(value ?? {});
+    }
+    get toolbars() {
+        return this._toolbars();
+    }
+    /**
+     * Sets the available flowchart shape types shown in the shape tools.
+     */
+    set shapes(value) {
+        this._shapes.set(value);
+    }
+    get shapes() {
+        return this._shapes();
+    }
+    /**
+     * Sets the available font families shown in the text toolbar.
+     */
+    set fontTypes(value) {
+        this._fontTypes.set(value);
+    }
+    get fontTypes() {
+        return this._fontTypes();
+    }
+    /**
+     * Sets the available font sizes shown in the text toolbar.
+     */
+    set fontSizes(value) {
+        this._fontSizes.set(value);
+    }
+    get fontSizes() {
+        return this._fontSizes();
+    }
+    /**
+     * @hidden
+     */
+    controller = signal(null, ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    /**
+     * @hidden
+     */
+    snapshot = signal(emptyDiagramEditorSnapshot, ...(ngDevMode ? [{ debugName: "snapshot" }] : []));
+    textEditorSelectionVersion = signal(0, ...(ngDevMode ? [{ debugName: "textEditorSelectionVersion" }] : []));
+    /**
+     * @hidden
+     */
+    toolbarPopupWrapClass = toolbarPopupWrapClass;
+    get textEditorPlaceholder() {
+        return this.localization.get('textEditorPlaceholder');
+    }
+    get textEditor() {
+        return this.editorComponent();
+    }
+    get textEditorElement() {
+        return this.editorElementRef();
+    }
+    _toolbars = signal({}, ...(ngDevMode ? [{ debugName: "_toolbars" }] : []));
+    _shapes = signal(undefined, ...(ngDevMode ? [{ debugName: "_shapes" }] : []));
+    _fontTypes = signal(undefined, ...(ngDevMode ? [{ debugName: "_fontTypes" }] : []));
+    _fontSizes = signal(undefined, ...(ngDevMode ? [{ debugName: "_fontSizes" }] : []));
+    constructor(host, localization, ngZone, renderer) {
+        this.host = host;
+        this.localization = localization;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+    }
+    /**
+     * @hidden
+     */
+    resolvedDiagram = computed(() => this.host?.diagramInstance() ?? null, ...(ngDevMode ? [{ debugName: "resolvedDiagram" }] : []));
+    /**
+     * @hidden
+     */
+    mainToolbarOptions = computed(() => {
+        const config = this._toolbars().diagram;
+        const fallback = {
+            position: 'top',
+            tools: defaultMainToolbarTools,
+            shapes: this._shapes()
+        };
+        if (config === undefined) {
+            return fallback;
+        }
+        if (typeof config === 'boolean') {
+            return config ? fallback : { position: 'top', tools: [] };
+        }
+        return {
+            position: config.position ?? 'top',
+            tools: config.tools ?? defaultMainToolbarTools,
+            shapes: config.shapes ?? this._shapes()
+        };
+    }, ...(ngDevMode ? [{ debugName: "mainToolbarOptions" }] : []));
+    /**
+     * @hidden
+     */
+    shapeToolbarOptions = computed(() => {
+        const config = this._toolbars().shape;
+        const fallback = { tools: defaultShapeToolbarTools, shapes: this._shapes() };
+        if (config === undefined) {
+            return fallback;
+        }
+        if (typeof config === 'boolean') {
+            return config ? fallback : { tools: [] };
+        }
+        return {
+            tools: config.tools ?? defaultShapeToolbarTools,
+            shapes: config.shapes ?? this._shapes()
+        };
+    }, ...(ngDevMode ? [{ debugName: "shapeToolbarOptions" }] : []));
+    /**
+     * @hidden
+     */
+    shapeToolbarAnchors = computed(() => getContextToolbarAnchors(this.snapshot().selectedShape, this.snapshot().anchors.shape), ...(ngDevMode ? [{ debugName: "shapeToolbarAnchors" }] : []));
+    /**
+     * @hidden
+     */
+    shapeToolbarVisible = computed(() => {
+        const snapshot = this.snapshot();
+        const selectedShape = snapshot.selectedShape;
+        return Boolean(selectedShape &&
+            this.shapeToolbarAnchors().base &&
+            snapshot.visibility.shape &&
+            this.shapeToolbarOptions().tools.length > 0 &&
+            isDiagramItemVisibleInViewport(selectedShape, this.resolvedDiagram()?.element));
+    }, ...(ngDevMode ? [{ debugName: "shapeToolbarVisible" }] : []));
+    connectionToolbarOptions = computed(() => {
+        const config = this._toolbars().connection;
+        const fallback = { tools: defaultConnectionToolbarTools };
+        if (config === undefined) {
+            return fallback;
+        }
+        if (typeof config === 'boolean') {
+            return config ? fallback : { tools: [] };
+        }
+        return { tools: config.tools ?? defaultConnectionToolbarTools };
+    }, ...(ngDevMode ? [{ debugName: "connectionToolbarOptions" }] : []));
+    connectionToolbarAnchors = computed(() => getContextToolbarAnchors(this.snapshot().selectedConnection, this.snapshot().anchors.connection), ...(ngDevMode ? [{ debugName: "connectionToolbarAnchors" }] : []));
+    connectionToolbarVisible = computed(() => {
+        const snapshot = this.snapshot();
+        const selectedConnection = snapshot.selectedConnection;
+        return Boolean(selectedConnection &&
+            this.connectionToolbarAnchors().base &&
+            snapshot.visibility.connection &&
+            this.connectionToolbarOptions().tools.length > 0 &&
+            isDiagramItemVisibleInViewport(selectedConnection, this.resolvedDiagram()?.element));
+    }, ...(ngDevMode ? [{ debugName: "connectionToolbarVisible" }] : []));
+    textToolbarOptions = computed(() => {
+        const config = this._toolbars().text;
+        const fallback = {
+            tools: defaultTextToolbarTools,
+            fontNames: this.fontTypes ?? EditingUtils.Data.fontNames,
+            fontSizes: this.fontSizes ?? EditingUtils.Data.fontSizes
+        };
+        if (config === undefined) {
+            return fallback;
+        }
+        if (typeof config === 'boolean') {
+            return config ? fallback : { tools: [] };
+        }
+        return {
+            tools: config.tools ?? defaultTextToolbarTools,
+            fontNames: config.fontNames ?? this.fontTypes ?? EditingUtils.Data.fontNames,
+            fontSizes: config.fontSizes ?? this.fontSizes ?? EditingUtils.Data.fontSizes
+        };
+    }, ...(ngDevMode ? [{ debugName: "textToolbarOptions" }] : []));
+    textToolbarAnchor = computed(() => {
+        const anchor = this.snapshot().anchors.textEditing;
+        return anchor ? { left: anchor.x, top: anchor.y } : null;
+    }, ...(ngDevMode ? [{ debugName: "textToolbarAnchor" }] : []));
+    textToolbarVisible = computed(() => {
+        const snapshot = this.snapshot();
+        return Boolean(snapshot.editingSession &&
+            this.textToolbarAnchor() &&
+            snapshot.visibility.textEditing &&
+            this.textToolbarOptions().tools.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "textToolbarVisible" }] : []));
+    activeContextToolbar = computed(() => {
+        if (this.shapeToolbarVisible()) {
+            const anchors = this.shapeToolbarAnchors();
+            return { type: 'shape', baseAnchor: anchors.base, fallbackAnchor: anchors.fallback };
+        }
+        if (this.connectionToolbarVisible()) {
+            const anchors = this.connectionToolbarAnchors();
+            return { type: 'connection', baseAnchor: anchors.base, fallbackAnchor: anchors.fallback };
+        }
+        if (this.textToolbarVisible()) {
+            return { type: 'text', baseAnchor: this.textToolbarAnchor(), fallbackAnchor: null };
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "activeContextToolbar" }] : []));
+    textToolbarRenderVerticalAlignment = computed(() => {
+        const item = this.snapshot().editingSession?.item;
+        return item?.name === 'Shape' && item.type !== 'text';
+    }, ...(ngDevMode ? [{ debugName: "textToolbarRenderVerticalAlignment" }] : []));
+    textToolbarAlignment = computed(() => {
+        this.textEditorSelectionVersion();
+        const item = this.snapshot().editingSession?.item;
+        return this.textEditor?.view?.state.doc.attrs['alignment'] ?? item?._contentVisual?.options?.align ?? '';
+    }, ...(ngDevMode ? [{ debugName: "textToolbarAlignment" }] : []));
+    textToolbarBold = computed(() => this.hasTextEditorMark(bold), ...(ngDevMode ? [{ debugName: "textToolbarBold" }] : []));
+    textToolbarItalic = computed(() => this.hasTextEditorMark(italic), ...(ngDevMode ? [{ debugName: "textToolbarItalic" }] : []));
+    textToolbarUnderline = computed(() => this.hasTextEditorMark(underline), ...(ngDevMode ? [{ debugName: "textToolbarUnderline" }] : []));
+    textToolbarFontSize = computed(() => {
+        this.textEditorSelectionVersion();
+        const item = this.snapshot().editingSession?.item;
+        const fontSizes = this.getTextEditorInlineStyles('font-size');
+        if (fontSizes.length === 1) {
+            return fontSizes[0];
+        }
+        const fallback = item?._contentVisual?.options?.fontSize ?? this.resolvedDiagram()?.options?.shapeDefaults?.content?.fontSize;
+        return typeof fallback === 'number' ? `${fallback}px` : fallback;
+    }, ...(ngDevMode ? [{ debugName: "textToolbarFontSize" }] : []));
+    textToolbarFontType = computed(() => {
+        this.textEditorSelectionVersion();
+        const item = this.snapshot().editingSession?.item;
+        const fontFamilies = this.getTextEditorInlineStyles('font-family');
+        if (fontFamilies.length === 1) {
+            return fontFamilies[0];
+        }
+        return item?._contentVisual?.options?.fontFamily ?? this.resolvedDiagram()?.options?.shapeDefaults?.content?.fontFamily;
+    }, ...(ngDevMode ? [{ debugName: "textToolbarFontType" }] : []));
+    textToolbarColor = computed(() => {
+        this.textEditorSelectionVersion();
+        const item = this.snapshot().editingSession?.item;
+        const colors = this.getTextEditorInlineStyles('color');
+        if (colors.length === 1) {
+            return colors[0];
+        }
+        return item?._contentVisual?.options?.color ?? this.resolvedDiagram()?.options?.shapeDefaults?.content?.color;
+    }, ...(ngDevMode ? [{ debugName: "textToolbarColor" }] : []));
+    onTextEditorAlignmentChange(value) {
+        const view = this.textEditor?.view;
+        if (!view) {
+            return;
+        }
+        const requestedAlignment = EditingUtils.parseAlignment(value);
+        const currentAlignment = EditingUtils.parseAlignment(view.state.doc.attrs['alignment'] || 'left top');
+        const alignment = `${requestedAlignment.horizontal || currentAlignment.horizontal} ${requestedAlignment.vertical || currentAlignment.vertical}`;
+        view.updateState(view.state.apply(view.state.tr.setDocAttribute('alignment', alignment)));
+        this.recalculateTextEditorAlignment();
+    }
+    recalculateTextEditorAlignment() {
+        const view = this.textEditor?.view;
+        const item = this.snapshot().editingSession?.item;
+        if (!view || !item) {
+            return;
+        }
+        const defaultPadding = item.name === 'Shape' ? item._contentVisual.padding() : { top: 0, bottom: 0, left: 0, right: 0 };
+        EditingUtils.recalcVerticalAlign(view.state.doc.attrs['alignment'] || 'left top', view.dom, defaultPadding);
+    }
+    refreshTextEditorSelection() {
+        this.textEditorSelectionVersion.update((version) => version + 1);
+    }
+    unsubscribe = null;
+    textEditingSessionKey = null;
+    textEditingSurfaceCleanup = null;
+    textEditorPointerDownCleanup = null;
+    textEditorKeyDownCleanup = null;
+    textEditorSelectionCleanup = null;
+    textEditingAdapter = null;
+    textEditorPositionFrame = null;
+    pendingTextEditorPoint = null;
+    textEditorSchema = new Schema(EditingUtils.schemaSpec);
+    controllerEffect = effect((onCleanup) => {
+        const diagram = this.resolvedDiagram();
+        if (!diagram) {
+            this.controller.set(null);
+            this.snapshot.set(emptyDiagramEditorSnapshot);
+            return;
+        }
+        const controller = this.ngZone.runOutsideAngular(() => new DiagramEditorController({ diagram }));
+        this.controller.set(controller);
+        this.snapshot.set(controller.getSnapshot());
+        this.unsubscribe = controller.subscribe(() => this.ngZone.run(() => this.snapshot.set({ ...controller.getSnapshot() })));
+        const captureTextEditorPoint = (event) => {
+            const nativeEvent = event?.nativeEvent ?? event;
+            if (typeof nativeEvent?.clientX === 'number' && typeof nativeEvent?.clientY === 'number') {
+                this.pendingTextEditorPoint = { left: nativeEvent.clientX, top: nativeEvent.clientY };
+            }
+        };
+        diagram.bind('pointerup', captureTextEditorPoint);
+        diagram.bind('dblclick', captureTextEditorPoint);
+        onCleanup(() => {
+            diagram.unbind('pointerup', captureTextEditorPoint);
+            diagram.unbind('dblclick', captureTextEditorPoint);
+            this.unsubscribe?.();
+            this.unsubscribe = null;
+            controller.destroy();
+        });
+    }, ...(ngDevMode ? [{ debugName: "controllerEffect" }] : []));
+    ngAfterViewChecked() {
+        const controller = this.controller();
+        const session = this.snapshot().editingSession;
+        const editor = this.textEditor;
+        const editorElement = this.textEditorElement?.nativeElement;
+        if (editorElement) {
+            this.renderer.setStyle(editorElement, 'display', session ? null : 'none');
+            const toolbarElement = editorElement.querySelector('.k-toolbar');
+            if (toolbarElement) {
+                this.renderer.setStyle(toolbarElement, 'display', 'none');
+            }
+        }
+        if (!controller || !session || !editor?.view || !editorElement) {
+            this.cancelTextEditorPositionFrame();
+            this.textEditingSurfaceCleanup?.();
+            this.textEditingSurfaceCleanup = null;
+            this.textEditorPointerDownCleanup?.();
+            this.textEditorPointerDownCleanup = null;
+            this.textEditorKeyDownCleanup?.();
+            this.textEditorKeyDownCleanup = null;
+            this.textEditorSelectionCleanup?.();
+            this.textEditorSelectionCleanup = null;
+            this.textEditingAdapter = null;
+            this.textEditingSessionKey = null;
+            controller?.setTextEditingAdapter(null);
+            return;
+        }
+        const sessionKey = `${session.target.type}:${session.target.id}`;
+        if (sessionKey === this.textEditingSessionKey) {
+            this.ngZone.runOutsideAngular(() => {
+                EditingUtils.styleEditor(session.item, editorElement);
+                this.recalculateTextEditorAlignment();
+            });
+            return;
+        }
+        const content = EditingUtils.rtContentToPM(Node, this.textEditorSchema)(session.item._contentVisual.options);
+        const view = editor.view;
+        const defaultPadding = session.item.name === 'Shape'
+            ? session.item._contentVisual.padding()
+            : { top: 0, bottom: 0, left: 0, right: 0 };
+        const alignmentPlugin = new Plugin({
+            filterTransaction: (transaction) => {
+                EditingUtils.scheduleRafCall(EditingUtils.recalcVerticalAlign, [transaction.doc.attrs['alignment'], view.dom, defaultPadding]);
+                return true;
+            }
+        });
+        const escapePlugin = new Plugin({
+            props: {
+                handleKeyDown: (_editorView, event) => {
+                    if (event.key !== 'Escape') {
+                        return false;
+                    }
+                    controller.handleKeyDown(event);
+                    return event.defaultPrevented;
+                }
+            }
+        });
+        if (session.target.type === 'new-text') {
+            this.resolvedDiagram()?.select(session.item);
+        }
+        view.updateState(EditorState.create({
+            schema: this.textEditorSchema,
+            doc: content,
+            plugins: [keymap(baseKeymap), placeholder(this.textEditorPlaceholder), alignmentPlugin, escapePlugin]
+        }));
+        this.ngZone.runOutsideAngular(() => {
+            EditingUtils.styleEditor(session.item, editorElement);
+            this.recalculateTextEditorAlignment();
+            this.scheduleTextEditorPosition(session.item, editorElement);
+        });
+        const pendingPoint = this.pendingTextEditorPoint;
+        this.pendingTextEditorPoint = null;
+        if (pendingPoint && session.target.type !== 'new-text') {
+            const position = view.posAtCoords(pendingPoint);
+            if (position) {
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, position.pos)));
+            }
+        }
+        this.textEditingSurfaceCleanup?.();
+        this.textEditingSurfaceCleanup = controller.registerSurface(editorElement);
+        this.textEditorPointerDownCleanup?.();
+        const stopDiagramPointerDown = (event) => event.stopPropagation();
+        editorElement.addEventListener('pointerdown', stopDiagramPointerDown);
+        this.textEditorPointerDownCleanup = () => editorElement.removeEventListener('pointerdown', stopDiagramPointerDown);
+        this.textEditorKeyDownCleanup?.();
+        const handleTextEditorDelete = (event) => {
+            const target = event.target;
+            if (!target ||
+                !editorElement.contains(target) ||
+                (event.key !== 'Backspace' && event.key !== 'Delete') ||
+                event.metaKey ||
+                event.ctrlKey ||
+                event.altKey) {
+                return;
+            }
+            const command = baseKeymap[event.key];
+            const handled = command(view.state, view.dispatch, view);
+            if (!handled && view.state.selection.empty) {
+                const position = view.state.selection.from;
+                const from = event.key === 'Backspace' ? position - 1 : position;
+                const to = event.key === 'Backspace' ? position : position + 1;
+                if (from >= 1 && to <= view.state.doc.content.size - 1) {
+                    view.dispatch(view.state.tr.delete(from, to));
+                }
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const ownerDocument = editorElement.ownerDocument;
+        ownerDocument.addEventListener('keydown', handleTextEditorDelete, true);
+        this.textEditorKeyDownCleanup = () => ownerDocument.removeEventListener('keydown', handleTextEditorDelete, true);
+        this.textEditorSelectionCleanup?.();
+        const updateTextEditorSelection = () => this.textEditorSelectionVersion.update((version) => version + 1);
+        ownerDocument.addEventListener('selectionchange', updateTextEditorSelection);
+        editorElement.addEventListener('input', updateTextEditorSelection);
+        editorElement.addEventListener('keyup', updateTextEditorSelection);
+        editorElement.addEventListener('mouseup', updateTextEditorSelection);
+        this.textEditorSelectionCleanup = () => {
+            ownerDocument.removeEventListener('selectionchange', updateTextEditorSelection);
+            editorElement.removeEventListener('input', updateTextEditorSelection);
+            editorElement.removeEventListener('keyup', updateTextEditorSelection);
+            editorElement.removeEventListener('mouseup', updateTextEditorSelection);
+        };
+        this.textEditingAdapter = {
+            getCommitPayload: () => {
+                const doc = view.state.doc;
+                const richTextContent = EditingUtils.pmDocToRTContent(doc);
+                return {
+                    content: richTextContent,
+                    isEmpty: doc.childCount === 0 || (doc.childCount === 1 && doc.firstChild?.inlineContent && doc.firstChild.childCount === 0),
+                    textContent: doc.textContent
+                };
+            }
+        };
+        controller.setTextEditingAdapter(this.textEditingAdapter);
+        this.textEditingSessionKey = sessionKey;
+        view.focus();
+    }
+    ngOnDestroy() {
+        this.cancelTextEditorPositionFrame();
+        this.textEditingSurfaceCleanup?.();
+        this.textEditingSurfaceCleanup = null;
+        this.textEditorPointerDownCleanup?.();
+        this.textEditorPointerDownCleanup = null;
+        this.textEditorKeyDownCleanup?.();
+        this.textEditorKeyDownCleanup = null;
+        this.textEditorSelectionCleanup?.();
+        this.textEditorSelectionCleanup = null;
+        this.textEditingAdapter = null;
+        this.controller()?.setTextEditingAdapter(null);
+    }
+    scheduleTextEditorPosition(item, editorElement) {
+        if (this.textEditorPositionFrame !== null) {
+            return;
+        }
+        const ownerWindow = editorElement.ownerDocument.defaultView;
+        if (!ownerWindow) {
+            return;
+        }
+        this.textEditorPositionFrame = ownerWindow.requestAnimationFrame(() => {
+            this.textEditorPositionFrame = null;
+            if (this.snapshot().editingSession?.item === item) {
+                EditingUtils.styleEditor(item, editorElement);
+                this.recalculateTextEditorAlignment();
+            }
+        });
+    }
+    cancelTextEditorPositionFrame() {
+        if (this.textEditorPositionFrame === null) {
+            return;
+        }
+        const ownerWindow = this.textEditorElement?.nativeElement.ownerDocument.defaultView;
+        ownerWindow?.cancelAnimationFrame(this.textEditorPositionFrame);
+        this.textEditorPositionFrame = null;
+    }
+    getTextEditorInlineStyles(style) {
+        const view = this.textEditor?.view;
+        if (!view) {
+            return [];
+        }
+        return [...new Set(getInlineStyles(view.state, { name: style, value: /^.+$/ }))];
+    }
+    hasTextEditorMark(mark) {
+        this.textEditorSelectionVersion();
+        const view = this.textEditor?.view;
+        return Boolean(view && hasMark(view.state, mark));
+    }
+    onTextEditorValueChange() {
+        const session = this.snapshot().editingSession;
+        const view = this.textEditor?.view;
+        const item = session?.item;
+        if (!view || !item || item.name !== 'Shape' || item.type !== 'text') {
+            return;
+        }
+        const nextContent = {
+            ...item.options.content,
+            ...EditingUtils.pmDocToRTContent(view.state.doc)
+        };
+        item._syncAutoHeightBounds?.(nextContent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DiagramComponent, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: DiagramEditorComponent, isStandalone: true, selector: "kendo-diagram-editor", inputs: { toolbars: "toolbars", shapes: "shapes", fontTypes: "fontTypes", fontSizes: "fontSizes" }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.diagram.editing'
+            }
+        ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true, isSignal: true }, { propertyName: "editorElementRef", first: true, predicate: EditorComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+        <ng-container
+            kendoDiagramEditorLocalizedMessages
+            i18n-undoTitle="kendo.diagram.editing.undo|The title of the undo tool"
+            undoTitle="Undo"
+            i18n-redoTitle="kendo.diagram.editing.redo|The title of the redo tool"
+            redoTitle="Redo"
+            i18n-selectTitle="kendo.diagram.editing.select|The title of the select tool"
+            selectTitle="Select"
+            i18n-panTitle="kendo.diagram.editing.pan|The title of the pan tool"
+            panTitle="Pan"
+            i18n-textTitle="kendo.diagram.editing.text|The title of the text insertion tool"
+            textTitle="Text"
+            i18n-shapeTitle="kendo.diagram.editing.shape|The title of the shape insertion tool"
+            shapeTitle="Shape"
+            i18n-shapeCollateLabel="kendo.diagram.editing.shape.collate|The label of the collate shape"
+            shapeCollateLabel="Collate"
+            i18n-shapeConnectorLabel="kendo.diagram.editing.shape.connector|The label of the connector shape"
+            shapeConnectorLabel="Connector"
+            i18n-shapeDataStorageLabel="kendo.diagram.editing.shape.dataStorage|The label of the data storage shape"
+            shapeDataStorageLabel="Data Storage"
+            i18n-shapeDatabaseLabel="kendo.diagram.editing.shape.database|The label of the database shape"
+            shapeDatabaseLabel="Database"
+            i18n-shapeDecisionLabel="kendo.diagram.editing.shape.decision|The label of the decision shape"
+            shapeDecisionLabel="Decision"
+            i18n-shapeDelayLabel="kendo.diagram.editing.shape.delay|The label of the delay shape"
+            shapeDelayLabel="Delay"
+            i18n-shapeDirectAccessStorageLabel="kendo.diagram.editing.shape.directAccessStorage|The label of the direct access storage shape"
+            shapeDirectAccessStorageLabel="Direct Access Storage"
+            i18n-shapeDisplayLabel="kendo.diagram.editing.shape.display|The label of the display shape"
+            shapeDisplayLabel="Display"
+            i18n-shapeDocumentLabel="kendo.diagram.editing.shape.document|The label of the document shape"
+            shapeDocumentLabel="Document"
+            i18n-shapeExtractLabel="kendo.diagram.editing.shape.extract|The label of the extract shape"
+            shapeExtractLabel="Extract"
+            i18n-shapeInputOutputLabel="kendo.diagram.editing.shape.inputOutput|The label of the input output shape"
+            shapeInputOutputLabel="Input Output"
+            i18n-shapeInternalStorageLabel="kendo.diagram.editing.shape.internalStorage|The label of the internal storage shape"
+            shapeInternalStorageLabel="Internal Storage"
+            i18n-shapeLogicalOrLabel="kendo.diagram.editing.shape.logicalOr|The label of the logical OR shape"
+            shapeLogicalOrLabel="Logical OR"
+            i18n-shapeManualInputOutputLabel="kendo.diagram.editing.shape.manualInputOutput|The label of the manual input output shape"
+            shapeManualInputOutputLabel="Manual Input Output"
+            i18n-shapeManualOperationLabel="kendo.diagram.editing.shape.manualOperation|The label of the manual operation shape"
+            shapeManualOperationLabel="Manual Operation"
+            i18n-shapeMergeLabel="kendo.diagram.editing.shape.merge|The label of the merge shape"
+            shapeMergeLabel="Merge"
+            i18n-shapeMultipleDocumentsLabel="kendo.diagram.editing.shape.multipleDocuments|The label of the multiple documents shape"
+            shapeMultipleDocumentsLabel="Multiple Documents"
+            i18n-shapeOffPageConnectorLabel="kendo.diagram.editing.shape.offPageConnector|The label of the off-page connector shape"
+            shapeOffPageConnectorLabel="Off-page Connector"
+            i18n-shapePredefinedProcessLabel="kendo.diagram.editing.shape.predefinedProcess|The label of the predefined process shape"
+            shapePredefinedProcessLabel="Predefined Process"
+            i18n-shapePreparationLabel="kendo.diagram.editing.shape.preparation|The label of the preparation shape"
+            shapePreparationLabel="Preparation"
+            i18n-shapeProcessLabel="kendo.diagram.editing.shape.process|The label of the process shape"
+            shapeProcessLabel="Process"
+            i18n-shapeSortLabel="kendo.diagram.editing.shape.sort|The label of the sort shape"
+            shapeSortLabel="Sort"
+            i18n-shapeSummingJunctionLabel="kendo.diagram.editing.shape.summingJunction|The label of the summing junction shape"
+            shapeSummingJunctionLabel="Summing Junction (Logical AND)"
+            i18n-shapeTerminatorLabel="kendo.diagram.editing.shape.terminator|The label of the terminator shape"
+            shapeTerminatorLabel="Terminator"
+            i18n-shapeTypeTitle="kendo.diagram.editing.shapeType|The title of the shape type tool"
+            shapeTypeTitle="Shape Type"
+            i18n-fillColorTitle="kendo.diagram.editing.fillColor|The title of the fill color tool"
+            fillColorTitle="Fill Color"
+            i18n-borderWidthTitle="kendo.diagram.editing.borderWidth|The title of the border width tool"
+            borderWidthTitle="Border Width"
+            i18n-borderColorTitle="kendo.diagram.editing.borderColor|The title of the border color tool"
+            borderColorTitle="Border Color"
+            i18n-borderStyleTitle="kendo.diagram.editing.borderStyle|The title of the border style tool"
+            borderStyleTitle="Border Style"
+            i18n-borderStyleSolidLabel="kendo.diagram.editing.borderStyle.solid|The label of the solid border style"
+            borderStyleSolidLabel="Solid"
+            i18n-borderStyleDottedLabel="kendo.diagram.editing.borderStyle.dotted|The label of the dotted border style"
+            borderStyleDottedLabel="Dotted"
+            i18n-borderStyleDashedLabel="kendo.diagram.editing.borderStyle.dashed|The label of the dashed border style"
+            borderStyleDashedLabel="Dashed"
+            i18n-borderStyleDashDotLabel="kendo.diagram.editing.borderStyle.dashDot|The label of the dash-dot border style"
+            borderStyleDashDotLabel="Dash Dot"
+            i18n-borderStyleLongDashLabel="kendo.diagram.editing.borderStyle.longDash|The label of the long dash border style"
+            borderStyleLongDashLabel="Long Dash"
+            i18n-borderStyleLongDashDotLabel="kendo.diagram.editing.borderStyle.longDashDot|The label of the long dash-dot border style"
+            borderStyleLongDashDotLabel="Long Dash Dot"
+            i18n-borderStyleLongDashDotDotLabel="kendo.diagram.editing.borderStyle.longDashDotDot|The label of the long dash-dot-dot border style"
+            borderStyleLongDashDotDotLabel="Long Dash Dot Dot"
+            i18n-toFrontTitle="kendo.diagram.editing.toFront|The title of the bring-to-front tool"
+            toFrontTitle="To Front"
+            i18n-toBackTitle="kendo.diagram.editing.toBack|The title of the send-to-back tool"
+            toBackTitle="To Back"
+            i18n-rotateLeftTitle="kendo.diagram.editing.rotateLeft|The title of the rotate-left tool"
+            rotateLeftTitle="Rotate Left"
+            i18n-rotateRightTitle="kendo.diagram.editing.rotateRight|The title of the rotate-right tool"
+            rotateRightTitle="Rotate Right"
+            i18n-duplicateTitle="kendo.diagram.editing.duplicate|The title of the duplicate tool"
+            duplicateTitle="Duplicate"
+            i18n-deleteTitle="kendo.diagram.editing.delete|The title of the delete tool"
+            deleteTitle="Delete"
+            i18n-connectionTypeTitle="kendo.diagram.editing.connectionType|The title of the connection type tool"
+            connectionTypeTitle="Connection Type"
+            i18n-connectionTypeCascadingLabel="kendo.diagram.editing.connectionType.cascading|The label of the cascading connection type"
+            connectionTypeCascadingLabel="Cascading"
+            i18n-connectionTypePolylineLabel="kendo.diagram.editing.connectionType.polyline|The label of the polyline connection type"
+            connectionTypePolylineLabel="Polyline"
+            i18n-startCapTitle="kendo.diagram.editing.startCap|The title of the connection start cap tool"
+            startCapTitle="Start Cap"
+            i18n-endCapTitle="kendo.diagram.editing.endCap|The title of the connection end cap tool"
+            endCapTitle="End Cap"
+            i18n-capNoneLabel="kendo.diagram.editing.cap.none|The label of the no connection cap"
+            capNoneLabel="None"
+            i18n-capArrowLabel="kendo.diagram.editing.cap.arrow|The label of the arrow connection cap"
+            capArrowLabel="Arrow"
+            i18n-capTriangleArrowLabel="kendo.diagram.editing.cap.triangleArrow|The label of the triangle arrow connection cap"
+            capTriangleArrowLabel="Triangle Arrow"
+            i18n-capLineArrowLabel="kendo.diagram.editing.cap.lineArrow|The label of the line arrow connection cap"
+            capLineArrowLabel="Line Arrow"
+            i18n-capFilledCircleLabel="kendo.diagram.editing.cap.filledCircle|The label of the filled circle connection cap"
+            capFilledCircleLabel="Filled Circle"
+            i18n-capFilledDiamondLabel="kendo.diagram.editing.cap.filledDiamond|The label of the filled diamond connection cap"
+            capFilledDiamondLabel="Filled Diamond"
+            i18n-connectionColorTitle="kendo.diagram.editing.connectionColor|The title of the connection color tool"
+            connectionColorTitle="Connection Color"
+            i18n-connectionWidthTitle="kendo.diagram.editing.connectionWidth|The title of the connection width tool"
+            connectionWidthTitle="Connection Width"
+            i18n-connectionStyleTitle="kendo.diagram.editing.connectionStyle|The title of the connection style tool"
+            connectionStyleTitle="Connection Style"
+            i18n-textColorTitle="kendo.diagram.editing.textColor|The title of the text color tool"
+            textColorTitle="Text Color"
+            i18n-fontSizeTitle="kendo.diagram.editing.fontSize|The title of the font size tool"
+            fontSizeTitle="Font Size"
+            i18n-fontTypeTitle="kendo.diagram.editing.fontType|The title of the font type tool"
+            fontTypeTitle="Font Type"
+            i18n-boldTitle="kendo.diagram.editing.bold|The title of the bold tool"
+            boldTitle="Bold"
+            i18n-italicTitle="kendo.diagram.editing.italic|The title of the italic tool"
+            italicTitle="Italic"
+            i18n-underlineTitle="kendo.diagram.editing.underline|The title of the underline tool"
+            underlineTitle="Underline"
+            i18n-alignHorizontalTitle="kendo.diagram.editing.alignHorizontal|The title of the horizontal text alignment tool"
+            alignHorizontalTitle="Align Horizontal"
+            i18n-alignVerticalTitle="kendo.diagram.editing.alignVertical|The title of the vertical text alignment tool"
+            alignVerticalTitle="Align Vertical"
+            i18n-alignLeftLabel="kendo.diagram.editing.alignLeft|The label of the left horizontal alignment option"
+            alignLeftLabel="Left"
+            i18n-alignCenterLabel="kendo.diagram.editing.alignCenter|The label of the center horizontal alignment option"
+            alignCenterLabel="Center"
+            i18n-alignRightLabel="kendo.diagram.editing.alignRight|The label of the right horizontal alignment option"
+            alignRightLabel="Right"
+            i18n-alignTopLabel="kendo.diagram.editing.alignTop|The label of the top vertical alignment option"
+            alignTopLabel="Top"
+            i18n-alignMiddleLabel="kendo.diagram.editing.alignMiddle|The label of the middle vertical alignment option"
+            alignMiddleLabel="Middle"
+            i18n-alignBottomLabel="kendo.diagram.editing.alignBottom|The label of the bottom vertical alignment option"
+            alignBottomLabel="Bottom"
+            i18n-editTextTitle="kendo.diagram.editing.editText|The title of the edit text tool"
+            editTextTitle="Edit Text"
+            i18n-textEditorPlaceholder="kendo.diagram.editing.textEditorPlaceholder|The placeholder text of the text editor"
+            textEditorPlaceholder="Type something"
+        >
+        </ng-container>
+
+        @if (controller()) {
+            <kendo-diagram-main-toolbar
+                [controller]="controller()"
+                [diagram]="resolvedDiagram()"
+                [snapshot]="snapshot()"
+                [tools]="mainToolbarOptions().tools"
+                [position]="mainToolbarOptions().position ?? 'top'"
+                [shapes]="mainToolbarOptions().shapes"
+                [visible]="snapshot().visibility.main && mainToolbarOptions().tools.length > 0"
+            >
+            </kendo-diagram-main-toolbar>
+
+            <kendo-diagram-floating-toolbar-popup
+                [controller]="controller()"
+                [show]="activeContextToolbar() !== null"
+                [baseAnchor]="activeContextToolbar()?.baseAnchor ?? null"
+                [fallbackAnchor]="activeContextToolbar()?.fallbackAnchor ?? null"
+                [boundaryElement]="resolvedDiagram()?.element"
+            >
+                @if (activeContextToolbar()) {
+                    <div [class]="toolbarPopupWrapClass">
+                        @if (activeContextToolbar()?.type === 'shape') {
+                            <kendo-diagram-shape-editing-toolbar
+                                [controller]="controller()"
+                                [shape]="snapshot().selectedShape"
+                                [stateVersion]="snapshot()"
+                                [tools]="shapeToolbarOptions().tools"
+                                [shapes]="shapeToolbarOptions().shapes"
+                            >
+                            </kendo-diagram-shape-editing-toolbar>
+                        } @else if (activeContextToolbar()?.type === 'connection') {
+                            <kendo-diagram-connection-editing-toolbar
+                                [controller]="controller()"
+                                [connection]="snapshot().selectedConnection"
+                                [stateVersion]="snapshot()"
+                                [tools]="connectionToolbarOptions().tools"
+                            ></kendo-diagram-connection-editing-toolbar>
+                        } @else if (activeContextToolbar()?.type === 'text') {
+                            <kendo-diagram-text-editing-toolbar
+                                [controller]="controller()"
+                                [editor]="textEditor"
+                                [tools]="textToolbarOptions().tools"
+                                [fontTypes]="textToolbarOptions().fontNames"
+                                [fontSizes]="textToolbarOptions().fontSizes"
+                                [fontSize]="textToolbarFontSize()"
+                                [fontType]="textToolbarFontType()"
+                                [color]="textToolbarColor()"
+                                [bold]="textToolbarBold()"
+                                [italic]="textToolbarItalic()"
+                                [underline]="textToolbarUnderline()"
+                                [alignment]="textToolbarAlignment()"
+                                (alignmentChange)="onTextEditorAlignmentChange($event)"
+                                (stateChange)="refreshTextEditorSelection()"
+                                [renderVerticalAlignment]="textToolbarRenderVerticalAlignment()"
+                            ></kendo-diagram-text-editing-toolbar>
+                        }
+                    </div>
+                }
+            </kendo-diagram-floating-toolbar-popup>
+
+            <kendo-editor
+                class="k-diagram-rich-text-editor"
+                [iframe]="false"
+                [placeholder]="textEditorPlaceholder"
+                [style.position]="'absolute'"
+                [style.z-index]="1"
+                [style.pointer-events]="'auto'"
+                [style.background]="'transparent'"
+                [style.display]="snapshot().editingSession ? null : 'none'"
+                (valueChange)="onTextEditorValueChange()"
+            ></kendo-editor>
+        }
+
+        <ng-content></ng-content>
+    `, isInline: true, dependencies: [{ kind: "component", type: MainToolbarComponent, selector: "kendo-diagram-main-toolbar", inputs: ["controller", "diagram", "snapshot", "tools", "position", "shapes", "visible", "ariaLabel"] }, { kind: "component", type: ShapeEditingToolbarComponent, selector: "kendo-diagram-shape-editing-toolbar", inputs: ["controller", "shape", "stateVersion", "tools", "shapes", "ariaLabel"] }, { kind: "component", type: ConnectionEditingToolbarComponent, selector: "kendo-diagram-connection-editing-toolbar", inputs: ["controller", "connection", "stateVersion", "tools", "ariaLabel"] }, { kind: "component", type: TextEditingToolbarComponent, selector: "kendo-diagram-text-editing-toolbar", inputs: ["controller", "editor", "tools", "fontTypes", "fontSizes", "fontSize", "fontType", "color", "bold", "italic", "underline", "renderVerticalAlignment", "ariaLabel", "alignment"], outputs: ["alignmentChange", "stateChange"] }, { kind: "component", type: FloatingToolbarPopupComponent, selector: "kendo-diagram-floating-toolbar-popup", inputs: ["controller", "show", "baseAnchor", "fallbackAnchor", "boundaryElement"] }, { kind: "directive", type: DiagramEditorLocalizedMessagesDirective, selector: "[kendoDiagramEditorLocalizedMessages]" }, { kind: "component", type: EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "iframeCss", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-diagram-editor',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.diagram.editing'
+                        }
+                    ],
+                    imports: [
+                        MainToolbarComponent,
+                        ShapeEditingToolbarComponent,
+                        ConnectionEditingToolbarComponent,
+                        TextEditingToolbarComponent,
+                        FloatingToolbarPopupComponent,
+                        DiagramEditorLocalizedMessagesDirective,
+                        EditorComponent
+                    ],
+                    template: `
+        <ng-container
+            kendoDiagramEditorLocalizedMessages
+            i18n-undoTitle="kendo.diagram.editing.undo|The title of the undo tool"
+            undoTitle="Undo"
+            i18n-redoTitle="kendo.diagram.editing.redo|The title of the redo tool"
+            redoTitle="Redo"
+            i18n-selectTitle="kendo.diagram.editing.select|The title of the select tool"
+            selectTitle="Select"
+            i18n-panTitle="kendo.diagram.editing.pan|The title of the pan tool"
+            panTitle="Pan"
+            i18n-textTitle="kendo.diagram.editing.text|The title of the text insertion tool"
+            textTitle="Text"
+            i18n-shapeTitle="kendo.diagram.editing.shape|The title of the shape insertion tool"
+            shapeTitle="Shape"
+            i18n-shapeCollateLabel="kendo.diagram.editing.shape.collate|The label of the collate shape"
+            shapeCollateLabel="Collate"
+            i18n-shapeConnectorLabel="kendo.diagram.editing.shape.connector|The label of the connector shape"
+            shapeConnectorLabel="Connector"
+            i18n-shapeDataStorageLabel="kendo.diagram.editing.shape.dataStorage|The label of the data storage shape"
+            shapeDataStorageLabel="Data Storage"
+            i18n-shapeDatabaseLabel="kendo.diagram.editing.shape.database|The label of the database shape"
+            shapeDatabaseLabel="Database"
+            i18n-shapeDecisionLabel="kendo.diagram.editing.shape.decision|The label of the decision shape"
+            shapeDecisionLabel="Decision"
+            i18n-shapeDelayLabel="kendo.diagram.editing.shape.delay|The label of the delay shape"
+            shapeDelayLabel="Delay"
+            i18n-shapeDirectAccessStorageLabel="kendo.diagram.editing.shape.directAccessStorage|The label of the direct access storage shape"
+            shapeDirectAccessStorageLabel="Direct Access Storage"
+            i18n-shapeDisplayLabel="kendo.diagram.editing.shape.display|The label of the display shape"
+            shapeDisplayLabel="Display"
+            i18n-shapeDocumentLabel="kendo.diagram.editing.shape.document|The label of the document shape"
+            shapeDocumentLabel="Document"
+            i18n-shapeExtractLabel="kendo.diagram.editing.shape.extract|The label of the extract shape"
+            shapeExtractLabel="Extract"
+            i18n-shapeInputOutputLabel="kendo.diagram.editing.shape.inputOutput|The label of the input output shape"
+            shapeInputOutputLabel="Input Output"
+            i18n-shapeInternalStorageLabel="kendo.diagram.editing.shape.internalStorage|The label of the internal storage shape"
+            shapeInternalStorageLabel="Internal Storage"
+            i18n-shapeLogicalOrLabel="kendo.diagram.editing.shape.logicalOr|The label of the logical OR shape"
+            shapeLogicalOrLabel="Logical OR"
+            i18n-shapeManualInputOutputLabel="kendo.diagram.editing.shape.manualInputOutput|The label of the manual input output shape"
+            shapeManualInputOutputLabel="Manual Input Output"
+            i18n-shapeManualOperationLabel="kendo.diagram.editing.shape.manualOperation|The label of the manual operation shape"
+            shapeManualOperationLabel="Manual Operation"
+            i18n-shapeMergeLabel="kendo.diagram.editing.shape.merge|The label of the merge shape"
+            shapeMergeLabel="Merge"
+            i18n-shapeMultipleDocumentsLabel="kendo.diagram.editing.shape.multipleDocuments|The label of the multiple documents shape"
+            shapeMultipleDocumentsLabel="Multiple Documents"
+            i18n-shapeOffPageConnectorLabel="kendo.diagram.editing.shape.offPageConnector|The label of the off-page connector shape"
+            shapeOffPageConnectorLabel="Off-page Connector"
+            i18n-shapePredefinedProcessLabel="kendo.diagram.editing.shape.predefinedProcess|The label of the predefined process shape"
+            shapePredefinedProcessLabel="Predefined Process"
+            i18n-shapePreparationLabel="kendo.diagram.editing.shape.preparation|The label of the preparation shape"
+            shapePreparationLabel="Preparation"
+            i18n-shapeProcessLabel="kendo.diagram.editing.shape.process|The label of the process shape"
+            shapeProcessLabel="Process"
+            i18n-shapeSortLabel="kendo.diagram.editing.shape.sort|The label of the sort shape"
+            shapeSortLabel="Sort"
+            i18n-shapeSummingJunctionLabel="kendo.diagram.editing.shape.summingJunction|The label of the summing junction shape"
+            shapeSummingJunctionLabel="Summing Junction (Logical AND)"
+            i18n-shapeTerminatorLabel="kendo.diagram.editing.shape.terminator|The label of the terminator shape"
+            shapeTerminatorLabel="Terminator"
+            i18n-shapeTypeTitle="kendo.diagram.editing.shapeType|The title of the shape type tool"
+            shapeTypeTitle="Shape Type"
+            i18n-fillColorTitle="kendo.diagram.editing.fillColor|The title of the fill color tool"
+            fillColorTitle="Fill Color"
+            i18n-borderWidthTitle="kendo.diagram.editing.borderWidth|The title of the border width tool"
+            borderWidthTitle="Border Width"
+            i18n-borderColorTitle="kendo.diagram.editing.borderColor|The title of the border color tool"
+            borderColorTitle="Border Color"
+            i18n-borderStyleTitle="kendo.diagram.editing.borderStyle|The title of the border style tool"
+            borderStyleTitle="Border Style"
+            i18n-borderStyleSolidLabel="kendo.diagram.editing.borderStyle.solid|The label of the solid border style"
+            borderStyleSolidLabel="Solid"
+            i18n-borderStyleDottedLabel="kendo.diagram.editing.borderStyle.dotted|The label of the dotted border style"
+            borderStyleDottedLabel="Dotted"
+            i18n-borderStyleDashedLabel="kendo.diagram.editing.borderStyle.dashed|The label of the dashed border style"
+            borderStyleDashedLabel="Dashed"
+            i18n-borderStyleDashDotLabel="kendo.diagram.editing.borderStyle.dashDot|The label of the dash-dot border style"
+            borderStyleDashDotLabel="Dash Dot"
+            i18n-borderStyleLongDashLabel="kendo.diagram.editing.borderStyle.longDash|The label of the long dash border style"
+            borderStyleLongDashLabel="Long Dash"
+            i18n-borderStyleLongDashDotLabel="kendo.diagram.editing.borderStyle.longDashDot|The label of the long dash-dot border style"
+            borderStyleLongDashDotLabel="Long Dash Dot"
+            i18n-borderStyleLongDashDotDotLabel="kendo.diagram.editing.borderStyle.longDashDotDot|The label of the long dash-dot-dot border style"
+            borderStyleLongDashDotDotLabel="Long Dash Dot Dot"
+            i18n-toFrontTitle="kendo.diagram.editing.toFront|The title of the bring-to-front tool"
+            toFrontTitle="To Front"
+            i18n-toBackTitle="kendo.diagram.editing.toBack|The title of the send-to-back tool"
+            toBackTitle="To Back"
+            i18n-rotateLeftTitle="kendo.diagram.editing.rotateLeft|The title of the rotate-left tool"
+            rotateLeftTitle="Rotate Left"
+            i18n-rotateRightTitle="kendo.diagram.editing.rotateRight|The title of the rotate-right tool"
+            rotateRightTitle="Rotate Right"
+            i18n-duplicateTitle="kendo.diagram.editing.duplicate|The title of the duplicate tool"
+            duplicateTitle="Duplicate"
+            i18n-deleteTitle="kendo.diagram.editing.delete|The title of the delete tool"
+            deleteTitle="Delete"
+            i18n-connectionTypeTitle="kendo.diagram.editing.connectionType|The title of the connection type tool"
+            connectionTypeTitle="Connection Type"
+            i18n-connectionTypeCascadingLabel="kendo.diagram.editing.connectionType.cascading|The label of the cascading connection type"
+            connectionTypeCascadingLabel="Cascading"
+            i18n-connectionTypePolylineLabel="kendo.diagram.editing.connectionType.polyline|The label of the polyline connection type"
+            connectionTypePolylineLabel="Polyline"
+            i18n-startCapTitle="kendo.diagram.editing.startCap|The title of the connection start cap tool"
+            startCapTitle="Start Cap"
+            i18n-endCapTitle="kendo.diagram.editing.endCap|The title of the connection end cap tool"
+            endCapTitle="End Cap"
+            i18n-capNoneLabel="kendo.diagram.editing.cap.none|The label of the no connection cap"
+            capNoneLabel="None"
+            i18n-capArrowLabel="kendo.diagram.editing.cap.arrow|The label of the arrow connection cap"
+            capArrowLabel="Arrow"
+            i18n-capTriangleArrowLabel="kendo.diagram.editing.cap.triangleArrow|The label of the triangle arrow connection cap"
+            capTriangleArrowLabel="Triangle Arrow"
+            i18n-capLineArrowLabel="kendo.diagram.editing.cap.lineArrow|The label of the line arrow connection cap"
+            capLineArrowLabel="Line Arrow"
+            i18n-capFilledCircleLabel="kendo.diagram.editing.cap.filledCircle|The label of the filled circle connection cap"
+            capFilledCircleLabel="Filled Circle"
+            i18n-capFilledDiamondLabel="kendo.diagram.editing.cap.filledDiamond|The label of the filled diamond connection cap"
+            capFilledDiamondLabel="Filled Diamond"
+            i18n-connectionColorTitle="kendo.diagram.editing.connectionColor|The title of the connection color tool"
+            connectionColorTitle="Connection Color"
+            i18n-connectionWidthTitle="kendo.diagram.editing.connectionWidth|The title of the connection width tool"
+            connectionWidthTitle="Connection Width"
+            i18n-connectionStyleTitle="kendo.diagram.editing.connectionStyle|The title of the connection style tool"
+            connectionStyleTitle="Connection Style"
+            i18n-textColorTitle="kendo.diagram.editing.textColor|The title of the text color tool"
+            textColorTitle="Text Color"
+            i18n-fontSizeTitle="kendo.diagram.editing.fontSize|The title of the font size tool"
+            fontSizeTitle="Font Size"
+            i18n-fontTypeTitle="kendo.diagram.editing.fontType|The title of the font type tool"
+            fontTypeTitle="Font Type"
+            i18n-boldTitle="kendo.diagram.editing.bold|The title of the bold tool"
+            boldTitle="Bold"
+            i18n-italicTitle="kendo.diagram.editing.italic|The title of the italic tool"
+            italicTitle="Italic"
+            i18n-underlineTitle="kendo.diagram.editing.underline|The title of the underline tool"
+            underlineTitle="Underline"
+            i18n-alignHorizontalTitle="kendo.diagram.editing.alignHorizontal|The title of the horizontal text alignment tool"
+            alignHorizontalTitle="Align Horizontal"
+            i18n-alignVerticalTitle="kendo.diagram.editing.alignVertical|The title of the vertical text alignment tool"
+            alignVerticalTitle="Align Vertical"
+            i18n-alignLeftLabel="kendo.diagram.editing.alignLeft|The label of the left horizontal alignment option"
+            alignLeftLabel="Left"
+            i18n-alignCenterLabel="kendo.diagram.editing.alignCenter|The label of the center horizontal alignment option"
+            alignCenterLabel="Center"
+            i18n-alignRightLabel="kendo.diagram.editing.alignRight|The label of the right horizontal alignment option"
+            alignRightLabel="Right"
+            i18n-alignTopLabel="kendo.diagram.editing.alignTop|The label of the top vertical alignment option"
+            alignTopLabel="Top"
+            i18n-alignMiddleLabel="kendo.diagram.editing.alignMiddle|The label of the middle vertical alignment option"
+            alignMiddleLabel="Middle"
+            i18n-alignBottomLabel="kendo.diagram.editing.alignBottom|The label of the bottom vertical alignment option"
+            alignBottomLabel="Bottom"
+            i18n-editTextTitle="kendo.diagram.editing.editText|The title of the edit text tool"
+            editTextTitle="Edit Text"
+            i18n-textEditorPlaceholder="kendo.diagram.editing.textEditorPlaceholder|The placeholder text of the text editor"
+            textEditorPlaceholder="Type something"
+        >
+        </ng-container>
+
+        @if (controller()) {
+            <kendo-diagram-main-toolbar
+                [controller]="controller()"
+                [diagram]="resolvedDiagram()"
+                [snapshot]="snapshot()"
+                [tools]="mainToolbarOptions().tools"
+                [position]="mainToolbarOptions().position ?? 'top'"
+                [shapes]="mainToolbarOptions().shapes"
+                [visible]="snapshot().visibility.main && mainToolbarOptions().tools.length > 0"
+            >
+            </kendo-diagram-main-toolbar>
+
+            <kendo-diagram-floating-toolbar-popup
+                [controller]="controller()"
+                [show]="activeContextToolbar() !== null"
+                [baseAnchor]="activeContextToolbar()?.baseAnchor ?? null"
+                [fallbackAnchor]="activeContextToolbar()?.fallbackAnchor ?? null"
+                [boundaryElement]="resolvedDiagram()?.element"
+            >
+                @if (activeContextToolbar()) {
+                    <div [class]="toolbarPopupWrapClass">
+                        @if (activeContextToolbar()?.type === 'shape') {
+                            <kendo-diagram-shape-editing-toolbar
+                                [controller]="controller()"
+                                [shape]="snapshot().selectedShape"
+                                [stateVersion]="snapshot()"
+                                [tools]="shapeToolbarOptions().tools"
+                                [shapes]="shapeToolbarOptions().shapes"
+                            >
+                            </kendo-diagram-shape-editing-toolbar>
+                        } @else if (activeContextToolbar()?.type === 'connection') {
+                            <kendo-diagram-connection-editing-toolbar
+                                [controller]="controller()"
+                                [connection]="snapshot().selectedConnection"
+                                [stateVersion]="snapshot()"
+                                [tools]="connectionToolbarOptions().tools"
+                            ></kendo-diagram-connection-editing-toolbar>
+                        } @else if (activeContextToolbar()?.type === 'text') {
+                            <kendo-diagram-text-editing-toolbar
+                                [controller]="controller()"
+                                [editor]="textEditor"
+                                [tools]="textToolbarOptions().tools"
+                                [fontTypes]="textToolbarOptions().fontNames"
+                                [fontSizes]="textToolbarOptions().fontSizes"
+                                [fontSize]="textToolbarFontSize()"
+                                [fontType]="textToolbarFontType()"
+                                [color]="textToolbarColor()"
+                                [bold]="textToolbarBold()"
+                                [italic]="textToolbarItalic()"
+                                [underline]="textToolbarUnderline()"
+                                [alignment]="textToolbarAlignment()"
+                                (alignmentChange)="onTextEditorAlignmentChange($event)"
+                                (stateChange)="refreshTextEditorSelection()"
+                                [renderVerticalAlignment]="textToolbarRenderVerticalAlignment()"
+                            ></kendo-diagram-text-editing-toolbar>
+                        }
+                    </div>
+                }
+            </kendo-diagram-floating-toolbar-popup>
+
+            <kendo-editor
+                class="k-diagram-rich-text-editor"
+                [iframe]="false"
+                [placeholder]="textEditorPlaceholder"
+                [style.position]="'absolute'"
+                [style.z-index]="1"
+                [style.pointer-events]="'auto'"
+                [style.background]="'transparent'"
+                [style.display]="snapshot().editingSession ? null : 'none'"
+                (valueChange)="onTextEditorValueChange()"
+            ></kendo-editor>
+        }
+
+        <ng-content></ng-content>
+    `
+                }]
+        }], ctorParameters: () => [{ type: DiagramComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i1$1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { editorComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EditorComponent), { isSignal: true }] }], editorElementRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EditorComponent), { ...{ read: ElementRef }, isSignal: true }] }], toolbars: [{
+                type: Input
+            }], shapes: [{
+                type: Input
+            }], fontTypes: [{
+                type: Input
+            }], fontSizes: [{
+                type: Input
+            }] } });
+
+/**
+ * Represents the Kendo UI Diagram Editor custom messages component for Angular.
+ * Use this component to override the default Diagram Editor messages.
+ *
+ * @example
+ * ```html
+ * <kendo-diagram>
+ *   <kendo-diagram-editor>
+ *     <kendo-diagram-editor-messages undoTitle="Undo action" redoTitle="Redo action">
+ *     </kendo-diagram-editor-messages>
+ *   </kendo-diagram-editor>
+ * </kendo-diagram>
+ * ```
+ */
+class DiagramEditorCustomMessagesComponent extends DiagramEditorMessages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.32", type: DiagramEditorCustomMessagesComponent, isStandalone: true, selector: "kendo-diagram-editor-messages", providers: [
+            {
+                provide: DiagramEditorMessages,
+                useExisting: forwardRef(() => DiagramEditorCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramEditorCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: DiagramEditorMessages,
+                            useExisting: forwardRef(() => DiagramEditorCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-diagram-editor-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$1.LocalizationService }] });
+
 /**
  * Represents the utility array that that contains all `Diagram`-related components and directives.
  *
@@ -1189,7 +5373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 const KENDO_DIAGRAM = [
     DiagramComponent,
     ShapeTooltipTemplateDirective,
-    ConnectionTooltipTemplateDirective
+    ConnectionTooltipTemplateDirective,
+    DiagramEditorComponent,
+    DiagramEditorCustomMessagesComponent
 ];
 
 /**
@@ -1224,11 +5410,11 @@ const KENDO_DIAGRAM = [
  * ```
  */
 class DiagramModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective], exports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DiagramModule, imports: [DiagramComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.32", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective, DiagramEditorComponent, DiagramEditorCustomMessagesComponent], exports: [DiagramComponent, ShapeTooltipTemplateDirective, ConnectionTooltipTemplateDirective, DiagramEditorComponent, DiagramEditorCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramModule, imports: [DiagramComponent, DiagramEditorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: DiagramModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: DiagramModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_DIAGRAM],
@@ -1243,5 +5429,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConnectionTooltipTemplateDirective, DiagramComponent, DiagramModule, KENDO_DIAGRAM, ShapeTooltipTemplateDirective };
+export { ConnectionTooltipTemplateDirective, DiagramComponent, DiagramEditorComponent, DiagramEditorCustomMessagesComponent, DiagramModule, KENDO_DIAGRAM, ShapeTooltipTemplateDirective, diagramEditingContentDefaults };