@acorex/components 21.0.2-next.4 → 21.0.2-next.40

package/fesm2022/acorex-components-flow-chart.mjs

@@ -4,9 +4,9 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, signal, effect, Injectable, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, output, afterNextRender, input, computed, HostListener, NgModule } from '@angular/core';
+import { inject, NgZone, PLATFORM_ID, signal, effect, Injectable, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, output, afterNextRender, input, computed, HostListener, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
@@ -14,12 +14,14 @@ import { Subject } from 'rxjs';
 class AXFlowChartService {
     constructor() {
         this.zone = inject(NgZone);
-        this.initialFlowChartEdge = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : []));
-        this.initialFlowChartNode = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : []));
-        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
-        this.selectedEdge = signal(null, ...(ngDevMode ? [{ debugName: "selectedEdge" }] : []));
-        this.svgService = signal(null, ...(ngDevMode ? [{ debugName: "svgService" }] : []));
-        this.canvasService = signal(null, ...(ngDevMode ? [{ debugName: "canvasService" }] : []));
+        this.platformId = inject(PLATFORM_ID);
+        this.document = inject(DOCUMENT);
+        this.initialFlowChartEdge = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : /* istanbul ignore next */ []));
+        this.initialFlowChartNode = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.selectedEdge = signal(null, ...(ngDevMode ? [{ debugName: "selectedEdge" }] : /* istanbul ignore next */ []));
+        this.svgService = signal(null, ...(ngDevMode ? [{ debugName: "svgService" }] : /* istanbul ignore next */ []));
+        this.canvasService = signal(null, ...(ngDevMode ? [{ debugName: "canvasService" }] : /* istanbul ignore next */ []));
         this.lineClick = new Subject();
         this.lineDbClick = new Subject();
         this.nodeClick = new Subject();
@@ -33,17 +35,19 @@ class AXFlowChartService {
         this.draggingConnection = false;
         this.tempLine = null;
         this.#eff2 = effect(() => {
-            if (this.initialFlowChartEdge()) {
-                setTimeout(() => {
-                    this.drawEdges(this.initialFlowChartEdge());
-                });
+            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartEdge()) {
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
+            setTimeout(() => {
+                this.drawEdges(this.initialFlowChartEdge());
+            });
+        }, ...(ngDevMode ? [{ debugName: "#eff2" }] : /* istanbul ignore next */ []));
         this.#eff3 = effect(() => {
-            if (this.initialFlowChartNode()) {
-                this.createNode(this.initialFlowChartNode());
+            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartNode()) {
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff3" }] : []));
+            this.createNode(this.initialFlowChartNode());
+        }, ...(ngDevMode ? [{ debugName: "#eff3" }] : /* istanbul ignore next */ []));
     }
     #eff2;
     #eff3;
@@ -121,7 +125,6 @@ class AXFlowChartService {
                 nodeId: dot.dataset['nodeId'],
                 anchor: dot.dataset['anchor'],
             };
-            console.log(clicked);
             if (!this.anchorClickBuffer) {
                 this.anchorClickBuffer = clicked;
             }
@@ -143,7 +146,7 @@ class AXFlowChartService {
     }
     addAnchors(el, type) {
         ['top', 'bottom', 'left', 'right'].forEach((anchor) => {
-            const dot = document.createElement('div');
+            const dot = this.document.createElement('div');
             dot.className = 'ax-flow-chart-anchor';
             dot.dataset['anchor'] = anchor;
             dot.dataset['nodeId'] = el.dataset['id'];
@@ -205,8 +208,8 @@ class AXFlowChartService {
         };
         // Add global event listeners
         this.zone.runOutsideAngular(() => {
-            document.addEventListener('mousemove', mousemoveHandler);
-            document.addEventListener('mouseup', mouseupHandler);
+            this.document.addEventListener('mousemove', mousemoveHandler);
+            this.document.addEventListener('mouseup', mouseupHandler);
         });
         // Store global listeners
         const globalListeners = this.eventListeners.get('global');
@@ -278,7 +281,7 @@ class AXFlowChartService {
         const svgElement = this.svgService()?.nativeElement;
         if (!svgElement)
             return;
-        this.tempLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        this.tempLine = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
         this.tempLine.setAttribute('x1', x.toString());
         this.tempLine.setAttribute('y1', y.toString());
         this.tempLine.setAttribute('x2', x.toString());
@@ -305,6 +308,9 @@ class AXFlowChartService {
         this.drawEdges();
     }
     drawEdges(edges) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
         const svg = this.svgService()?.nativeElement;
         if (!svg)
             return;
@@ -337,7 +343,7 @@ class AXFlowChartService {
                     this.selectedEdge.set(edge);
                     this.selectedNode.set(null);
                     // Remove selection from all other lines
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
                         if (l !== line)
                             l.classList.remove('selected');
                     });
@@ -351,7 +357,7 @@ class AXFlowChartService {
         });
     }
     createLine(from, to, edge) {
-        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        const line = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
         line.setAttribute('x1', from.x.toString());
         line.setAttribute('y1', from.y.toString());
         line.setAttribute('x2', to.x.toString());
@@ -391,10 +397,17 @@ class AXFlowChartService {
         }
     }
     createNode(nodes) {
-        document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const canvas = this.canvasService()?.nativeElement;
+        if (!canvas) {
+            return;
+        }
+        this.document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
         nodes.forEach((node) => {
-            const el = document.createElement('div');
-            const p = document.createElement('p');
+            const el = this.document.createElement('div');
+            const p = this.document.createElement('p');
             p.innerText = node.label;
             el.appendChild(p);
             el.className = 'ax-flow-chart-node';
@@ -405,7 +418,7 @@ class AXFlowChartService {
             this.addAnchors(el, node.type);
             this.makeDraggable(el);
             this.setupNodeEventListeners(el, node);
-            this.canvasService().nativeElement.appendChild(el);
+            canvas.appendChild(el);
             this.nodesMap.set(node.id, el);
         });
     }
@@ -416,7 +429,7 @@ class AXFlowChartService {
                 this.removeEdge(edge);
             }
         });
-        document.querySelector(`[data-id="${nodeId}"]`)?.remove();
+        this.document.querySelector(`[data-id="${nodeId}"]`)?.remove();
         this.anchorClickBuffer = null;
     }
     cleanup() {
@@ -424,10 +437,10 @@ class AXFlowChartService {
         this.nodesMap.clear();
         this.eventListeners.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartService, decorators: [{
             type: Injectable
         }] });
 
@@ -435,7 +448,7 @@ class AXFlowChartCreatorComponent extends NXComponent {
     constructor() {
         super(...arguments);
         this.service = inject(AXFlowChartService);
-        this.selectedShape = signal('rectangle', ...(ngDevMode ? [{ debugName: "selectedShape" }] : []));
+        this.selectedShape = signal('rectangle', ...(ngDevMode ? [{ debugName: "selectedShape" }] : /* istanbul ignore next */ []));
         this.label = 'Label';
     }
     selectShapeHandler(shape) {
@@ -499,10 +512,10 @@ class AXFlowChartCreatorComponent extends NXComponent {
         printWindow.document.write(printContent);
         printWindow.document.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartCreatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXFlowChartCreatorComponent, isStandalone: true, selector: "ax-flow-chart-creator", providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{align-items:center;gap:1rem;padding:1rem;display:flex}ax-flow-chart-creator .ax-shape-container{gap:1rem;display:flex}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:flex}ax-flow-chart-creator .ax-shape-container .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-creator .ax-shape-container .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}\n"], dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartCreatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXFlowChartCreatorComponent, isStandalone: true, selector: "ax-flow-chart-creator", providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{align-items:center;gap:1rem;padding:1rem;display:flex}ax-flow-chart-creator .ax-shape-container{gap:1rem;display:flex}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:flex}ax-flow-chart-creator .ax-shape-container .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-creator .ax-shape-container .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}\n"], dependencies: [{ kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartCreatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartCreatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-flow-chart-creator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTextBoxModule, AXButtonModule, CommonModule, FormsModule], providers: [{ provide: AXComponent, useExisting: AXFlowChartCreatorComponent }], template: "<div class=\"ax-shape-container\">\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'rectangle' }\"\n    (click)=\"selectShapeHandler('rectangle')\"\n    class=\"ax-rectangle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'circle' }\"\n    (click)=\"selectShapeHandler('circle')\"\n    class=\"ax-circle\"\n  ></div>\n  <div\n    [ngClass]=\"{ 'ax-shape-selected': selectedShape() === 'diamond' }\"\n    (click)=\"selectShapeHandler('diamond')\"\n    class=\"ax-diamond\"\n  ></div>\n</div>\n<ax-text-box class=\"ax-sm\" [(ngModel)]=\"label\" placeholder=\"Label\"> </ax-text-box>\n\n<ax-button class=\"ax-sm\" (onClick)=\"createShapeHandler()\" color=\"primary\" text=\"Create\"></ax-button>\n<ax-button color=\"primary\" text=\"Print\" class=\"ax-sm\" (click)=\"printChart()\"></ax-button>\n", styles: ["ax-flow-chart-creator{align-items:center;gap:1rem;padding:1rem;display:flex}ax-flow-chart-creator .ax-shape-container{gap:1rem;display:flex}ax-flow-chart-creator .ax-shape-container .ax-shape-selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))!important}ax-flow-chart-creator .ax-shape-container .ax-rectangle,ax-flow-chart-creator .ax-shape-container .ax-circle,ax-flow-chart-creator .ax-shape-container .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:flex}ax-flow-chart-creator .ax-shape-container .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-creator .ax-shape-container .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}\n"] }]
         }] });
@@ -510,9 +523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class AXFlowChartRendererComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : []));
-        this.svg = viewChild('connections', ...(ngDevMode ? [{ debugName: "svg" }] : []));
+        this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+        this.svg = viewChild('connections', ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
         this.service = inject(AXFlowChartService);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
         this.onLineClick = output();
         this.onLineDbClick = output();
         this.onNodeClick = output();
@@ -523,10 +538,11 @@ class AXFlowChartRendererComponent extends NXComponent {
             this.setupEventListeners();
         });
         this.#eff = effect(() => {
-            if (this.canvas() && this.svg()) {
-                this.initializeServices();
+            if (!isPlatformBrowser(this.platformId) || !this.canvas() || !this.svg()) {
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+            this.initializeServices();
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #init;
     #eff;
@@ -561,8 +577,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === canvas) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -571,8 +587,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === svg) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
-                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -588,10 +604,10 @@ class AXFlowChartRendererComponent extends NXComponent {
         this.service.nodeDbClick.unsubscribe();
         this.service.onEdgeUpdate.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: AXFlowChartRendererComponent, isStandalone: true, selector: "ax-flow-chart-renderer", outputs: { onLineClick: "onLineClick", onLineDbClick: "onLineDbClick", onNodeClick: "onNodeClick", onNodeDbClick: "onNodeDbClick", onEdgeUpdate: "onEdgeUpdate", onNodeUpdate: "onNodeUpdate" }, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["connections"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{width:var(--ax-comp-flow-chart-width,100%);height:var(--ax-comp-flow-chart-height,30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{width:100%;height:100%;position:relative}ax-flow-chart-renderer .ax-flow-chart-node{background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none;padding:1rem;position:absolute}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{background-color:rgba(var(--ax-sys-color-on-lightest-surface));cursor:crosshair;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{background-color:rgba(var(--ax-sys-color-danger-darkest-surface));transition:all .3s;scale:1.3}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer;transition:all .3s}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));justify-content:center;align-items:center;width:auto;height:auto;display:flex}ax-flow-chart-renderer .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-renderer .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg)scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXFlowChartRendererComponent, isStandalone: true, selector: "ax-flow-chart-renderer", outputs: { onLineClick: "onLineClick", onLineDbClick: "onLineDbClick", onNodeClick: "onNodeClick", onNodeDbClick: "onNodeDbClick", onEdgeUpdate: "onEdgeUpdate", onNodeUpdate: "onNodeUpdate" }, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "svg", first: true, predicate: ["connections"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{width:var(--ax-comp-flow-chart-width,100%);height:var(--ax-comp-flow-chart-height,30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{width:100%;height:100%;position:relative}ax-flow-chart-renderer .ax-flow-chart-node{background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none;padding:1rem;position:absolute}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{background-color:rgba(var(--ax-sys-color-on-lightest-surface));cursor:crosshair;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{background-color:rgba(var(--ax-sys-color-danger-darkest-surface));transition:all .3s;scale:1.3}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer;transition:all .3s}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));justify-content:center;align-items:center;width:auto;height:auto;display:flex}ax-flow-chart-renderer .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-renderer .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg)scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-flow-chart-renderer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXFlowChartRendererComponent }], template: "<div id=\"ax-flow-chart-renderer-canvas\" #canvas>\n  <svg class=\"ax-flow-chart-renderer-svg\" id=\"ax-flow-chart-renderer-connections\" #connections></svg>\n</div>\n", styles: ["ax-flow-chart-renderer{width:var(--ax-comp-flow-chart-width,100%);height:var(--ax-comp-flow-chart-height,30rem);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{width:100%;height:100%;position:relative}ax-flow-chart-renderer .ax-flow-chart-node{background-color:rgba(var(--ax-sys-color-surface));color:rgba(var(--ax-sys-color-on-surface));border:2px solid rgba(var(--ax-sys-color-border-surface));cursor:move;-webkit-user-select:none;user-select:none;padding:1rem;position:absolute}ax-flow-chart-renderer .ax-flow-chart-node.selected{border:2px solid rgba(var(--ax-sys-color-danger-darker-surface))}ax-flow-chart-renderer .ax-flow-chart-node .ax-flow-chart-anchor{opacity:0;transition:opacity .5s}ax-flow-chart-renderer .ax-flow-chart-node:hover .ax-flow-chart-anchor,ax-flow-chart-renderer .ax-flow-chart-node.selected .ax-flow-chart-anchor{opacity:1}ax-flow-chart-renderer .ax-flow-chart-anchor{background-color:rgba(var(--ax-sys-color-on-lightest-surface));cursor:crosshair;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}ax-flow-chart-renderer .ax-flow-chart-anchor.selected{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor.hover{background-color:rgba(var(--ax-sys-color-danger-darkest-surface));transition:all .3s;scale:1.3}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}ax-flow-chart-renderer .ax-flow-chart-renderer-svg{position:absolute;top:0;left:0;overflow:visible}ax-flow-chart-renderer .ax-flow-chart-line:hover{stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer;transition:all .3s}ax-flow-chart-renderer .ax-flow-chart-line.selected{stroke:rgba(var(--ax-sys-color-primary-surface))}ax-flow-chart-renderer .ax-rectangle,ax-flow-chart-renderer .ax-circle,ax-flow-chart-renderer .ax-diamond{border:2px solid rgba(var(--ax-sys-color-border-surface));justify-content:center;align-items:center;width:auto;height:auto;display:flex}ax-flow-chart-renderer .ax-circle{aspect-ratio:1;border-radius:1000vmax}ax-flow-chart-renderer .ax-diamond{aspect-ratio:1;transform:rotate(45deg)scale(.75)}ax-flow-chart-renderer .ax-diamond p{transform:rotate(-45deg)scale(1.25)}ax-flow-chart-renderer .ax-diamond .ax-flow-chart-anchor{width:14px;height:14px}\n"] }]
         }], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], svg: [{ type: i0.ViewChild, args: ['connections', { isSignal: true }] }], onLineClick: [{ type: i0.Output, args: ["onLineClick"] }], onLineDbClick: [{ type: i0.Output, args: ["onLineDbClick"] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onNodeDbClick: [{ type: i0.Output, args: ["onNodeDbClick"] }], onEdgeUpdate: [{ type: i0.Output, args: ["onEdgeUpdate"] }], onNodeUpdate: [{ type: i0.Output, args: ["onNodeUpdate"] }] } });
@@ -600,10 +616,10 @@ class AXFlowChartComponent extends NXComponent {
     constructor() {
         super(...arguments);
         this.flowChartService = inject(AXFlowChartService);
-        this.initialFlowChartNode = input.required(...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : []));
-        this.initialFlowChartEdge = input.required(...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : []));
-        this.selectedNode = computed(() => this.flowChartService.selectedNode(), ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
-        this.selectedEdge = computed(() => this.flowChartService.selectedEdge(), ...(ngDevMode ? [{ debugName: "selectedEdge" }] : []));
+        this.initialFlowChartNode = input.required(...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : /* istanbul ignore next */ []));
+        this.initialFlowChartEdge = input.required(...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : /* istanbul ignore next */ []));
+        this.selectedNode = computed(() => this.flowChartService.selectedNode(), ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.selectedEdge = computed(() => this.flowChartService.selectedEdge(), ...(ngDevMode ? [{ debugName: "selectedEdge" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             this.flowChartService.initialFlowChartNode.set(this.initialFlowChartNode());
             this.flowChartService.initialFlowChartEdge.set(this.initialFlowChartEdge());
@@ -658,15 +674,15 @@ class AXFlowChartComponent extends NXComponent {
     removeNode(nodeId) {
         this.flowChartService.removeNode(nodeId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXFlowChartComponent, isStandalone: true, selector: "ax-flow-chart", inputs: { initialFlowChartNode: { classPropertyName: "initialFlowChartNode", publicName: "initialFlowChartNode", isSignal: true, isRequired: true, transformFunction: null }, initialFlowChartEdge: { classPropertyName: "initialFlowChartEdge", publicName: "initialFlowChartEdge", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXFlowChartComponent, isStandalone: true, selector: "ax-flow-chart", inputs: { initialFlowChartNode: { classPropertyName: "initialFlowChartNode", publicName: "initialFlowChartNode", isSignal: true, isRequired: true, transformFunction: null }, initialFlowChartEdge: { classPropertyName: "initialFlowChartEdge", publicName: "initialFlowChartEdge", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, providers: [
             AXFlowChartService,
             { provide: AXComponent, useExisting: AXFlowChartComponent },
             { provide: AXValuableComponent, useExisting: AXFlowChartComponent },
             { provide: AXFocusableComponent, useExisting: AXFlowChartComponent },
         ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<ng-content select=\"ax-flow-chart-renderer\"></ng-content>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-flow-chart{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius);flex-direction:column;width:100%;height:100%;display:flex}ax-flow-chart ax-header{border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-flow-chart ax-footer{border-top:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-flow-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXFlowChartService,
@@ -682,11 +698,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 const COMPONENT = [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent];
 const MODULES = [CommonModule];
 class AXFlowChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, imports: [CommonModule, AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent], exports: [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, imports: [MODULES, AXFlowChartCreatorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartModule, imports: [CommonModule, AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent], exports: [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartModule, imports: [MODULES, AXFlowChartCreatorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXFlowChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFlowChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],