@acorex/components 21.0.2-next.21 → 21.0.2-next.23

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 { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 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 { inject, NgZone, 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,8 +14,6 @@ import { Subject } from 'rxjs';
 class AXFlowChartService {
     constructor() {
         this.zone = inject(NgZone);
-        this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
         this.initialFlowChartEdge = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartEdge" }] : []));
         this.initialFlowChartNode = signal([], ...(ngDevMode ? [{ debugName: "initialFlowChartNode" }] : []));
         this.selectedNode = signal(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
@@ -35,18 +33,16 @@ class AXFlowChartService {
         this.draggingConnection = false;
         this.tempLine = null;
         this.#eff2 = effect(() => {
-            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartEdge()) {
-                return;
+            if (this.initialFlowChartEdge()) {
+                setTimeout(() => {
+                    this.drawEdges(this.initialFlowChartEdge());
+                });
             }
-            setTimeout(() => {
-                this.drawEdges(this.initialFlowChartEdge());
-            });
         }, ...(ngDevMode ? [{ debugName: "#eff2" }] : []));
         this.#eff3 = effect(() => {
-            if (!isPlatformBrowser(this.platformId) || !this.initialFlowChartNode()) {
-                return;
+            if (this.initialFlowChartNode()) {
+                this.createNode(this.initialFlowChartNode());
             }
-            this.createNode(this.initialFlowChartNode());
         }, ...(ngDevMode ? [{ debugName: "#eff3" }] : []));
     }
     #eff2;
@@ -147,7 +143,7 @@ class AXFlowChartService {
     }
     addAnchors(el, type) {
         ['top', 'bottom', 'left', 'right'].forEach((anchor) => {
-            const dot = this.document.createElement('div');
+            const dot = document.createElement('div');
             dot.className = 'ax-flow-chart-anchor';
             dot.dataset['anchor'] = anchor;
             dot.dataset['nodeId'] = el.dataset['id'];
@@ -209,8 +205,8 @@ class AXFlowChartService {
         };
         // Add global event listeners
         this.zone.runOutsideAngular(() => {
-            this.document.addEventListener('mousemove', mousemoveHandler);
-            this.document.addEventListener('mouseup', mouseupHandler);
+            document.addEventListener('mousemove', mousemoveHandler);
+            document.addEventListener('mouseup', mouseupHandler);
         });
         // Store global listeners
         const globalListeners = this.eventListeners.get('global');
@@ -282,7 +278,7 @@ class AXFlowChartService {
         const svgElement = this.svgService()?.nativeElement;
         if (!svgElement)
             return;
-        this.tempLine = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        this.tempLine = 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());
@@ -309,9 +305,6 @@ class AXFlowChartService {
         this.drawEdges();
     }
     drawEdges(edges) {
-        if (!isPlatformBrowser(this.platformId)) {
-            return;
-        }
         const svg = this.svgService()?.nativeElement;
         if (!svg)
             return;
@@ -344,7 +337,7 @@ class AXFlowChartService {
                     this.selectedEdge.set(edge);
                     this.selectedNode.set(null);
                     // Remove selection from all other lines
-                    this.document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
+                    document.querySelectorAll('.ax-flow-chart-line').forEach((l) => {
                         if (l !== line)
                             l.classList.remove('selected');
                     });
@@ -358,7 +351,7 @@ class AXFlowChartService {
         });
     }
     createLine(from, to, edge) {
-        const line = this.document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        const line = 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());
@@ -398,17 +391,10 @@ class AXFlowChartService {
         }
     }
     createNode(nodes) {
-        if (!isPlatformBrowser(this.platformId)) {
-            return;
-        }
-        const canvas = this.canvasService()?.nativeElement;
-        if (!canvas) {
-            return;
-        }
-        this.document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
+        document.querySelectorAll('.ax-flow-chart-node')?.forEach((node) => node.remove());
         nodes.forEach((node) => {
-            const el = this.document.createElement('div');
-            const p = this.document.createElement('p');
+            const el = document.createElement('div');
+            const p = document.createElement('p');
             p.innerText = node.label;
             el.appendChild(p);
             el.className = 'ax-flow-chart-node';
@@ -419,7 +405,7 @@ class AXFlowChartService {
             this.addAnchors(el, node.type);
             this.makeDraggable(el);
             this.setupNodeEventListeners(el, node);
-            canvas.appendChild(el);
+            this.canvasService().nativeElement.appendChild(el);
             this.nodesMap.set(node.id, el);
         });
     }
@@ -430,7 +416,7 @@ class AXFlowChartService {
                 this.removeEdge(edge);
             }
         });
-        this.document.querySelector(`[data-id="${nodeId}"]`)?.remove();
+        document.querySelector(`[data-id="${nodeId}"]`)?.remove();
         this.anchorClickBuffer = null;
     }
     cleanup() {
@@ -438,10 +424,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: "20.3.3", ngImport: i0, type: AXFlowChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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: "20.3.3", ngImport: i0, type: AXFlowChartService, decorators: [{
             type: Injectable
         }] });
 
@@ -513,12 +499,12 @@ 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: "20.3.3", ngImport: i0, type: AXFlowChartCreatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.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{display:flex;gap:1rem;align-items:center;padding:1rem}ax-flow-chart-creator .ax-shape-container{display:flex;gap:1rem}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));display:flex;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer}ax-flow-chart-creator .ax-shape-container .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-creator .ax-shape-container .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}\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: "20.3.3", 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"] }]
+            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{display:flex;gap:1rem;align-items:center;padding:1rem}ax-flow-chart-creator .ax-shape-container{display:flex;gap:1rem}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));display:flex;justify-content:center;align-items:center;width:30px;height:30px;cursor:pointer}ax-flow-chart-creator .ax-shape-container .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-creator .ax-shape-container .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}\n"] }]
         }] });
 
 class AXFlowChartRendererComponent extends NXComponent {
@@ -527,8 +513,6 @@ class AXFlowChartRendererComponent extends NXComponent {
         this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : []));
         this.svg = viewChild('connections', ...(ngDevMode ? [{ debugName: "svg" }] : []));
         this.service = inject(AXFlowChartService);
-        this.document = inject(DOCUMENT);
-        this.platformId = inject(PLATFORM_ID);
         this.onLineClick = output();
         this.onLineDbClick = output();
         this.onNodeClick = output();
@@ -539,10 +523,9 @@ class AXFlowChartRendererComponent extends NXComponent {
             this.setupEventListeners();
         });
         this.#eff = effect(() => {
-            if (!isPlatformBrowser(this.platformId) || !this.canvas() || !this.svg()) {
-                return;
+            if (this.canvas() && this.svg()) {
+                this.initializeServices();
             }
-            this.initializeServices();
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
     #init;
@@ -578,8 +561,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === canvas) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    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'));
+                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -588,8 +571,8 @@ class AXFlowChartRendererComponent extends NXComponent {
                 if (e.target === svg) {
                     this.service.selectedNode.set(null);
                     this.service.selectedEdge.set(null);
-                    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'));
+                    document.querySelectorAll('.ax-flow-chart-node').forEach((node) => node.classList.remove('selected'));
+                    document.querySelectorAll('.ax-flow-chart-line').forEach((line) => line.classList.remove('selected'));
                 }
             });
         }
@@ -605,13 +588,13 @@ 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: "20.3.3", ngImport: i0, type: AXFlowChartRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.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{overflow:hidden;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}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{position:relative;width:100%;height:100%}ax-flow-chart-renderer .ax-flow-chart-node{position:absolute;padding:1rem;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}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 ease}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{position:absolute;width:10px;height:10px;background-color:rgba(var(--ax-sys-color-on-lightest-surface));border-radius:50%;cursor:crosshair;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{transition:.3s all ease;scale:1.3;background-color:rgba(var(--ax-sys-color-danger-darkest-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-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{transition:.3s all ease;stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer}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));display:flex;justify-content:center;align-items:center;width:auto;height:auto}ax-flow-chart-renderer .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-renderer .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}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: "20.3.3", 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"] }] } });
+            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{overflow:hidden;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}ax-flow-chart-renderer #ax-flow-chart-renderer-canvas{position:relative;width:100%;height:100%}ax-flow-chart-renderer .ax-flow-chart-node{position:absolute;padding:1rem;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}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 ease}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{position:absolute;width:10px;height:10px;background-color:rgba(var(--ax-sys-color-on-lightest-surface));border-radius:50%;cursor:crosshair;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{transition:.3s all ease;scale:1.3;background-color:rgba(var(--ax-sys-color-danger-darkest-surface))}ax-flow-chart-renderer .ax-flow-chart-anchor:before{content:\"\";position:absolute;top:-7px;left:-7px;right:-7px;bottom:-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{transition:.3s all ease;stroke:rgba(var(--ax-sys-color-danger-darker-surface));cursor:pointer}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));display:flex;justify-content:center;align-items:center;width:auto;height:auto}ax-flow-chart-renderer .ax-circle{border-radius:1000vmax;aspect-ratio:1}ax-flow-chart-renderer .ax-diamond{transform:rotate(45deg) scale(.75);aspect-ratio:1}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"] }]
+        }] });
 
 class AXFlowChartComponent extends NXComponent {
     constructor() {
@@ -675,23 +658,23 @@ 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: "20.3.3", ngImport: i0, type: AXFlowChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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: [
             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 }); }
+        ], 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{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius)}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: "20.3.3", ngImport: i0, type: AXFlowChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-flow-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXFlowChartService,
                         { provide: AXComponent, useExisting: AXFlowChartComponent },
                         { provide: AXValuableComponent, useExisting: AXFlowChartComponent },
                         { provide: AXFocusableComponent, useExisting: AXFlowChartComponent },
-                    ], 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"] }]
-        }], propDecorators: { initialFlowChartNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFlowChartNode", required: true }] }], initialFlowChartEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFlowChartEdge", required: true }] }], handleKeyboardEvent: [{
+                    ], 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{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-radius:var(--ax-sys-border-radius)}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"] }]
+        }], propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -699,11 +682,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: "20.3.3", ngImport: i0, type: AXFlowChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXFlowChartModule, imports: [CommonModule, AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent], exports: [AXFlowChartRendererComponent, AXFlowChartCreatorComponent, AXFlowChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", 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: "20.3.3", ngImport: i0, type: AXFlowChartModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],