ato-water-lib 0.0.87 → 0.0.90

package/{fesm2020 → fesm2022}/ato-water-lib.mjs

@@ -10,25 +10,25 @@ import { v4 } from 'uuid';
 
 class AtoWaterLibService {
     constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, providedIn: 'root' });
 }
-AtoWaterLibService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AtoWaterLibService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class AtoWaterLibComponent {
-}
-AtoWaterLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AtoWaterLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoWaterLibComponent, selector: "lib-ato-water-lib", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoWaterLibComponent, selector: "lib-ato-water-lib", ngImport: i0, template: `
     <p>
       ato-water-lib works!
     </p>
   `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-ato-water-lib', template: `
     <p>
@@ -820,6 +820,8 @@ var ATO_ENUM_FLOW_DIRECTION;
 })(ATO_ENUM_FLOW_DIRECTION || (ATO_ENUM_FLOW_DIRECTION = {}));
 
 class AtoGojsEditorModel {
+    initialOptions;
+    data; // FlowGoJsComponentModel
     constructor(data) {
         this.data = data;
     }
@@ -3177,10 +3179,10 @@ class UtilsService {
         }
         return text.replace(new RegExp(escapeRegExp(find), 'g'), replace);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
-UtilsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UtilsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3248,6 +3250,70 @@ const ARROW_GRAY = '/assets/images/icons/arrow-gray.svg';
 const RO_LINE_DIRTY = '/assets/images/icons/ro_line_dirty.svg';
 const OUTFLOW_LINE_DIRTY = '/assets/images/icons/outflow_line_dirty.png';
 class AtoDefaultGojsEditor {
+    _elRef;
+    menuTrigger;
+    linkValidation;
+    actions = [];
+    actionMenuId = 'actionMenuId';
+    myDiagramDiv = this.constructor.name + '-' + moment().valueOf();
+    myDiagram;
+    $ = go.GraphObject.make;
+    animationInterval;
+    defaultScaleZoomToFit;
+    _initialOptions = {
+        'toolManager.hoverDelay': 200,
+        // 'draggingTool.isEnabled': false,
+        // initialAutoScale: go.Diagram.UniformToFill,
+        // autoScrollRegion: AtoGojsEditorModel.GRID_SIZE * 5,
+        layout: this.$(go.LayeredDigraphLayout, { direction: 0 }),
+        initialContentAlignment: go.Spot.Center,
+        initialAutoScale: go.Diagram.Uniform,
+        // contentAlignment: go.Spot.Center,
+        // this.$(go.ForceDirectedLayout),
+        'undoManager.isEnabled': true, // enable undo & redo
+        // "animationManager.isInitial": false,
+        // "animationManager.isEnabled": false,
+        // "draggingTool.isGridSnapEnabled": true
+        dragSelectingTool: this.$(go.DragSelectingTool, { isPartialInclusion: true, delay: 50 }, {
+            box: this.$(go.Part, // replace the magenta box with a red one
+            { layerName: 'Tool', selectable: false }, this.$(go.Shape, {
+                name: 'SHAPE',
+                fill: 'rgba(255,0,0,0)',
+                stroke: '#E95F47',
+                strokeWidth: 2,
+            })),
+        }),
+        'linkingTool.linkValidation': this.checkLinkCondition.bind(this),
+        'draggingTool.doMouseMove': function () {
+            // do the standard behavior by calling the super method
+            go.DraggingTool.prototype.doMouseMove.call(this);
+            // if dragging-out from the diagram is not allowed, and
+            // if mouse is outside of viewport
+            if (!this.diagram.allowDragOut &&
+                !this.diagram.viewportBounds.containsPoint(this.diagram.lastInput.documentPoint)) {
+                this.diagram.ensureBounds();
+                const vp = this.diagram.lastInput.viewPoint;
+                const dp = this.diagram.position.copy();
+                if (vp.x < 0)
+                    dp.x -= 10;
+                else if (vp.x > 0)
+                    dp.x += 10;
+                if (vp.y < 0)
+                    dp.y -= 10;
+                else if (vp.y > 0)
+                    dp.y += 10;
+                this.diagram.position = dp; // scroll in the direction of the mouse
+            }
+        },
+        // LayoutCompleted: () => {
+        //     this.myDiagram.zoomToFit();
+        //     this.defaultScaleZoomToFit = this.myDiagram.scale;
+        //     if (!this.initialOptions.isReadOnly) {
+        //         const sizeMargin = AtoGojsEditorModel.GRID_SIZE * 15;
+        //         this.myDiagram.padding = new go.Margin(sizeMargin);
+        //     }
+        // },
+    };
     checkLinkCondition(fromNode, fromPort, toNode, toPort, link) {
         if (this.linkValidation) {
             return this.linkValidation(fromNode, fromPort, toNode, toPort, link);
@@ -3261,6 +3327,7 @@ class AtoDefaultGojsEditor {
     get initialOptions() {
         return this._initialOptions;
     }
+    _editor;
     set editor(v) {
         this._editor = v;
         if (v) {
@@ -3272,92 +3339,36 @@ class AtoDefaultGojsEditor {
     get editor() {
         return this._editor;
     }
+    isShowNodeInfo = false;
+    plantSatus;
     constructor(_elRef) {
         this._elRef = _elRef;
-        this.actions = [];
-        this.actionMenuId = 'actionMenuId';
-        this.myDiagramDiv = this.constructor.name + '-' + moment().valueOf();
-        this.$ = go.GraphObject.make;
-        this._initialOptions = {
-            'toolManager.hoverDelay': 200,
-            // 'draggingTool.isEnabled': false,
-            // initialAutoScale: go.Diagram.UniformToFill,
-            // autoScrollRegion: AtoGojsEditorModel.GRID_SIZE * 5,
-            layout: this.$(go.LayeredDigraphLayout, { direction: 0 }),
-            initialContentAlignment: go.Spot.Center,
-            initialAutoScale: go.Diagram.Uniform,
-            // contentAlignment: go.Spot.Center,
-            // this.$(go.ForceDirectedLayout),
-            'undoManager.isEnabled': true,
-            // "animationManager.isInitial": false,
-            // "animationManager.isEnabled": false,
-            // "draggingTool.isGridSnapEnabled": true
-            dragSelectingTool: this.$(go.DragSelectingTool, { isPartialInclusion: true, delay: 50 }, {
-                box: this.$(go.Part, // replace the magenta box with a red one
-                { layerName: 'Tool', selectable: false }, this.$(go.Shape, {
-                    name: 'SHAPE',
-                    fill: 'rgba(255,0,0,0)',
-                    stroke: '#E95F47',
-                    strokeWidth: 2,
-                })),
-            }),
-            'linkingTool.linkValidation': this.checkLinkCondition.bind(this),
-            'draggingTool.doMouseMove': function () {
-                // do the standard behavior by calling the super method
-                go.DraggingTool.prototype.doMouseMove.call(this);
-                // if dragging-out from the diagram is not allowed, and
-                // if mouse is outside of viewport
-                if (!this.diagram.allowDragOut &&
-                    !this.diagram.viewportBounds.containsPoint(this.diagram.lastInput.documentPoint)) {
-                    this.diagram.ensureBounds();
-                    const vp = this.diagram.lastInput.viewPoint;
-                    const dp = this.diagram.position.copy();
-                    if (vp.x < 0)
-                        dp.x -= 10;
-                    else if (vp.x > 0)
-                        dp.x += 10;
-                    if (vp.y < 0)
-                        dp.y -= 10;
-                    else if (vp.y > 0)
-                        dp.y += 10;
-                    this.diagram.position = dp; // scroll in the direction of the mouse
-                }
-            },
-            // LayoutCompleted: () => {
-            //     this.myDiagram.zoomToFit();
-            //     this.defaultScaleZoomToFit = this.myDiagram.scale;
-            //     if (!this.initialOptions.isReadOnly) {
-            //         const sizeMargin = AtoGojsEditorModel.GRID_SIZE * 15;
-            //         this.myDiagram.padding = new go.Margin(sizeMargin);
-            //     }
-            // },
-        };
-        this.isShowNodeInfo = false;
-        this.onModelChangeListenerEvent = new EventEmitter();
-        this.onClickInfoButton = new EventEmitter();
-        this.onOpenWizard = new EventEmitter();
-        this.onOpenDetail = new EventEmitter();
-        this.onOpenAssetParameter = new EventEmitter();
-        this.onOpenInsightMapping = new EventEmitter();
-        this.onHoverInfoButton = new EventEmitter();
-        this.onHoverAlert = new EventEmitter();
-        this.onDoubleClickNode = new EventEmitter();
-        this.onOpenChangeIcon = new EventEmitter();
-        // Click component
-        this.onClickCompoent = new EventEmitter();
-        this.callbackImageTopology = new EventEmitter();
-        // Click param on ParamTable
-        this.onClikParamOfTable = new EventEmitter();
-        // Delete Node
-        this.onDeleteNode = new EventEmitter();
-        this.onUndo = new EventEmitter();
-        // Rename
-        this.onRename = new EventEmitter();
-        this.committedTransactionSubject = new Subject();
-        // AddSub and UnSub
-        this._subscriptionList = new Subscription();
         go.Diagram.licenseKey = GO_LICENSE_KEY;
     }
+    onModelChangeListenerEvent = new EventEmitter();
+    onClickInfoButton = new EventEmitter();
+    onOpenWizard = new EventEmitter();
+    onOpenDetail = new EventEmitter();
+    onOpenAssetParameter = new EventEmitter();
+    onOpenInsightMapping = new EventEmitter();
+    onHoverInfoButton = new EventEmitter();
+    onHoverAlert = new EventEmitter();
+    onDoubleClickNode = new EventEmitter();
+    onOpenChangeIcon = new EventEmitter();
+    // Click component
+    onClickCompoent = new EventEmitter();
+    callbackImageTopology = new EventEmitter();
+    // Click param on ParamTable
+    onClikParamOfTable = new EventEmitter();
+    // Delete Node
+    onDeleteNode = new EventEmitter();
+    onUndo = new EventEmitter();
+    // Rename
+    onRename = new EventEmitter();
+    isAddedModelChangedListeners;
+    committedTransactionSubject = new Subject();
+    // AddSub and UnSub
+    _subscriptionList = new Subscription();
     ngOnDestroy() {
         this.unsubscribeAll();
         this.stopAnimation();
@@ -3445,7 +3456,7 @@ class AtoDefaultGojsEditor {
         this.makeGroupTemplate(AtoGojsEditorModel.NODE_TEMPLATES[node?.type].icon, AtoGojsEditorModel.NODE_TEMPLATES[node?.type].name);
     }
     addNodeTemplate(node) {
-        if (this.myDiagram.nodeTemplateMap?.Hb[node?.type] || node?.isGroup) {
+        if (this.myDiagram.nodeTemplateMap?.Hb?.[node?.type] || node?.isGroup) {
             return;
         }
         // Not Group
@@ -3861,7 +3872,7 @@ class AtoDefaultGojsEditor {
             visible: true,
             fill: 'transparent',
         }));
-        elements.push(this.$(go.Panel, 'Top', {
+        elements.push(this.$(go.Panel, 'Vertical', {
             height: 38,
             // maxSize: new go.Size(NaN, 36),
             // width: 100,
@@ -3890,7 +3901,7 @@ class AtoDefaultGojsEditor {
             // editable: false,
             // alignment: go.Spot.Center, // Đảm bảo văn bản nằm ở trung tâm của nút
             // alignmentFocus: go.Spot.Center, // Đảm bảo văn bản không bị dịch chuyển ra khỏi trung tâm
-            wrap: go.TextBlock.WrapFit,
+            wrap: go.TextBlock.WrapFit, // Chuyển dòng để văn bản không vượt ra ngoài
             // selectable: true,
             overflow: go.TextBlock.OverflowEllipsis,
             toolTip: this.$('ToolTip', this.$(go.TextBlock, {
@@ -3944,7 +3955,7 @@ class AtoDefaultGojsEditor {
         // Icon Err when lack of value
         this.$(go.TextBlock, {
             margin: new go.Margin(10, 10, 10, 10),
-            text: VALUE_NA,
+            text: VALUE_NA, // Old version: TEXT_ERROR
             textAlign: 'center',
             font: 'bold 10pt sans-serif',
             stroke: AtoGojsEditorModel.ENUM_COLORS.SALMON,
@@ -4190,7 +4201,7 @@ class AtoDefaultGojsEditor {
                 maxSize: new go.Size(30, 30),
                 imageStretch: go.GraphObject.Uniform,
             }))
-            : ''), this.$(go.Panel, 'Auto', this.$(go.TextBlock, {
+            : {}), this.$(go.Panel, 'Auto', this.$(go.TextBlock, {
             name: 'textBlockValue',
             row: 2,
             editable: false,
@@ -4309,7 +4320,7 @@ class AtoDefaultGojsEditor {
         // Icon Err when lack of value
         this.$(go.TextBlock, {
             margin: new go.Margin(10, 10, 10, 10),
-            text: VALUE_NA,
+            text: VALUE_NA, // Old version: TEXT_ERROR
             textAlign: 'center',
             font: 'bold 10pt sans-serif',
             stroke: AtoGojsEditorModel.ENUM_COLORS.SALMON,
@@ -4689,6 +4700,12 @@ class AtoDefaultGojsEditor {
             click: (e, obj) => {
                 if (obj?.data?.onSelected) {
                     obj?.data?.onSelected(obj?.data);
+                    self.onClickCompoent.emit({
+                        left: e?.['Wr']?.x,
+                        top: e?.['Wr']?.y,
+                        node: node,
+                        component: obj?.data,
+                    });
                 }
             },
             selectionChanged: (e) => {
@@ -4924,7 +4941,7 @@ class AtoDefaultGojsEditor {
                         case AtoDefaultGojsEditor.ENUM_ACTIONS.OUTFLOW:
                             onClickFn = () => {
                                 self.clickNewNode(e, _.merge(obj, {
-                                    actionMove: self.dragNewNode,
+                                    actionMove: self.dragNewNode, // defined below, to support dragging from the button
                                     _dragData: {
                                         ...{
                                             type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_NODE,
@@ -5125,10 +5142,10 @@ class AtoDefaultGojsEditor {
             //           panel.background = 'transparent';
             //       },
         }, this.$(go.Shape, 'Ellipse', {
-            fill: 'white',
+            fill: 'white', // Background color of the circle
             strokeWidth: 2,
-            stroke: '#919CA5',
-            width: 40,
+            stroke: '#919CA5', // Border color of the circle
+            width: 40, // Match the panel's width
             height: 40, // Match the panel's height
         })
         // this.$(
@@ -5182,7 +5199,7 @@ class AtoDefaultGojsEditor {
             toSpot: spot,
             toLinkable: input,
             cursor: this._initialOptions.isReadOnly ? '' : 'pointer',
-            alignmentFocus: go.Spot.Center,
+            alignmentFocus: go.Spot.Center, // tập trung vào trung tâm của Panel
             mouseEnter: this._initialOptions.isReadOnly
                 ? null
                 : (e, panel) => {
@@ -5250,9 +5267,9 @@ class AtoDefaultGojsEditor {
         }), this.$(go.TextBlock, {
             name: 'textBlock',
             margin: 4,
-            text: '\uf0da',
+            text: '\uf0da', // Mã Unicode tương ứng với fa-caret-left
             font: '900 12px "Font Awesome 6 Pro"',
-            stroke: 'white',
+            stroke: 'white', // Đặt màu chữ thành màu trắng
             cursor: 'pointer',
             visible: false,
         }, new go.Binding('text', 'name', (_) => {
@@ -5647,7 +5664,7 @@ class AtoDefaultGojsEditor {
             }, new go.Binding('text', '', (data, panel) => {
                 return data?.name;
             }), new go.Binding('maxSize', '', (data, panel) => {
-                return data?.maxSizeNameParam;
+                return data?.maxSizeNameParam ?? Infinity;
             })), this.$(go.Panel, 'Table', {
                 column: 1,
                 margin: 2,
@@ -5680,7 +5697,7 @@ class AtoDefaultGojsEditor {
                 return data?.value;
             }), new go.Binding('stroke', '', (data) => {
                 if (!this._initialOptions.isReadOnly) {
-                    return;
+                    return 'transparent';
                 }
                 return data.color;
             }), new go.Binding('maxSize', '', (data) => {
@@ -6118,7 +6135,7 @@ class AtoDefaultGojsEditor {
                         name: 0,
                         color: AtoGojsEditorModel.ENUM_COLORS.BLUE,
                     },
-                    click: self.addItemOnGroupZone,
+                    click: self.addItemOnGroupZone, // defined below, to support a click on the button
                     'ButtonBorder.strokeWidth': 0,
                     'ButtonBorder.fill': 'white',
                 }, this.$(go.TextBlock, {
@@ -6664,12 +6681,12 @@ class AtoDefaultGojsEditor {
             this._subscriptionList.add(el);
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoDefaultGojsEditor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", plantSatus: "plantSatus" }, outputs: { onModelChangeListenerEvent: "onModelChangeListenerEvent", onClickInfoButton: "onClickInfoButton", onOpenWizard: "onOpenWizard", onOpenDetail: "onOpenDetail", onOpenAssetParameter: "onOpenAssetParameter", onOpenInsightMapping: "onOpenInsightMapping", onHoverInfoButton: "onHoverInfoButton", onHoverAlert: "onHoverAlert", onDoubleClickNode: "onDoubleClickNode", onOpenChangeIcon: "onOpenChangeIcon", onClickCompoent: "onClickCompoent", callbackImageTopology: "callbackImageTopology", onClikParamOfTable: "onClikParamOfTable", onDeleteNode: "onDeleteNode", onUndo: "onUndo", onRename: "onRename" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0 });
 }
-AtoDefaultGojsEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AtoDefaultGojsEditor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoDefaultGojsEditor, inputs: { linkValidation: "linkValidation", initialOptions: "initialOptions", editor: "editor", isShowNodeInfo: "isShowNodeInfo", plantSatus: "plantSatus" }, outputs: { onModelChangeListenerEvent: "onModelChangeListenerEvent", onClickInfoButton: "onClickInfoButton", onOpenWizard: "onOpenWizard", onOpenDetail: "onOpenDetail", onOpenAssetParameter: "onOpenAssetParameter", onOpenInsightMapping: "onOpenInsightMapping", onHoverInfoButton: "onHoverInfoButton", onHoverAlert: "onHoverAlert", onDoubleClickNode: "onDoubleClickNode", onOpenChangeIcon: "onOpenChangeIcon", onClickCompoent: "onClickCompoent", callbackImageTopology: "callbackImageTopology", onClikParamOfTable: "onClikParamOfTable", onDeleteNode: "onDeleteNode", onUndo: "onUndo", onRename: "onRename" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoDefaultGojsEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoDefaultGojsEditor, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { menuTrigger: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { menuTrigger: [{
                 type: ViewChild,
                 args: ['menuTrigger']
             }], linkValidation: [{
@@ -6797,6 +6814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 })(AtoDefaultGojsEditor || (AtoDefaultGojsEditor = {}));
 
 class AtoLoadingDirective {
+    el;
+    renderer;
+    appLoading;
+    spinnerWrapper;
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -6837,30 +6858,31 @@ class AtoLoadingDirective {
             this.renderer.removeChild(this.el.nativeElement, this.spinnerWrapper);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: { appLoading: "appLoading" }, usesOnChanges: true, ngImport: i0 });
 }
-AtoLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-AtoLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: { appLoading: "appLoading" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoLoadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoLoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[atoLoading]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { appLoading: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { appLoading: [{
                 type: Input
             }] } });
 
 class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
+    myDiagramDivTemp;
+    _data = null;
     set data(v) {
         this._data = v;
         this.loadDiagram();
     }
+    isLoading = false;
     get data() {
         return this._data;
     }
     constructor(_elRef) {
         super(_elRef);
-        this._data = null;
-        this.isLoading = false;
         this.actions = [
             AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DETAILS],
             AtoDefaultGojsEditor.ACTIONS[AtoDefaultGojsEditor.ENUM_ACTIONS.DELETE],
@@ -6882,13 +6904,13 @@ class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
     findNodeForKey(key) {
         this.myDiagram.select(this.myDiagram.findNodeForKey(key));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: { data: "data", isLoading: "isLoading" }, viewQueries: [{ propertyName: "myDiagramDivTemp", first: true, predicate: ["myDiagramDivTemp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }] });
 }
-AtoFlowDiagramLibComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AtoFlowDiagramLibComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: { data: "data", isLoading: "isLoading" }, viewQueries: [{ propertyName: "myDiagramDivTemp", first: true, predicate: ["myDiagramDivTemp"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoFlowDiagramLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoFlowDiagramLibComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-flow-diagram-lib', template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\">\n    <div class=\"w-100 h-100 d-flex\">\n        <!-- <button\n            id=\"actionMenuId\"\n            class=\"invisible-btn\"\n            mat-button\n            [matMenuTriggerFor]=\"menu\"\n            #menuTrigger=\"matMenuTrigger\"\n        ></button>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item *ngFor=\"let item of actions\" (click)=\"item?.onClick($event)\">\n                <div class=\"d-flex flex-gap-2\">\n                    <div><i class=\"{{ item?.iconClassName }}\"></i></div>\n                    <div>{{ item?.name }}</div>\n                </div>\n            </button>\n        </mat-menu> -->\n\n        <div #myDiagramDivTemp class=\"flex-grow-1 {{myDiagramDiv}}\"></div>\n        <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <!-- <nz-empty nzNotFoundImage=\"simple\"></nz-empty> -->\n            No Data\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { myDiagramDivTemp: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { myDiagramDivTemp: [{
                 type: ViewChild,
                 args: ['myDiagramDivTemp']
             }], data: [{
@@ -9192,20 +9214,18 @@ const ATO_COMPONENTS_GROUP_DATA = {
 };
 
 class AtoAssetParamsViewComponent {
-    constructor() {
-        this.isEditView = false;
-        this.data = [];
-        this.clickParamTableRow = new EventEmitter();
-    }
+    isEditView = false;
+    data = [];
+    clickParamTableRow = new EventEmitter();
     onClickRowParam(itemTable) {
         if (this.isEditView && itemTable?.isEditable) {
             this.clickParamTableRow.emit(itemTable);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoAssetParamsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-AtoAssetParamsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AtoAssetParamsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
         }], propDecorators: { isEditView: [{
@@ -9217,17 +9237,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class AssetFlowComponent {
-    constructor() {
-        this.onClickParamOfTableEvent = new EventEmitter();
-        this.isUseBase64 = false;
-        this.$ = go.GraphObject.make;
-        this.options = {
-            layout: this.$(go.LayeredDigraphLayout, {
-            // direction: 0,
-            }),
-            // isReadOnly: true,
-        };
-    }
+    assetLayer;
+    gjFlowDiagramTemp;
+    assetParamsViewTemp;
+    selectedComponent;
+    systemType;
+    onClickParamOfTableEvent = new EventEmitter();
+    isUseBase64 = false;
+    isFrom;
+    $ = go.GraphObject.make;
+    options = {
+        layout: this.$(go.LayeredDigraphLayout, {
+        // direction: 0,
+        }),
+        // isReadOnly: true,
+    };
+    _flowData;
     set flowData(v) {
         this._flowData = v;
         this.updateDataTableAssetParams({ ...v, assetLayer: this.assetLayer });
@@ -9235,10 +9260,14 @@ class AssetFlowComponent {
     get flowData() {
         return this._flowData;
     }
+    // Reponsive
+    dataTableAssetParams;
     // @Input() isResponsiveView = false;
     get isResponsiveView() {
         return window.innerWidth < 1024;
     }
+    getFlowDataCallBack;
+    timeoutResizeWindow;
     onResize(event) {
         // Now only Support Cooling Tower Responsive
         if (this.timeoutResizeWindow) {
@@ -9335,10 +9364,10 @@ class AssetFlowComponent {
             }
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AssetFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { assetLayer: "assetLayer", selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", isFrom: "isFrom", flowData: "flowData", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
 }
-AssetFlowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssetFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssetFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { assetLayer: "assetLayer", selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", isFrom: "isFrom", flowData: "flowData", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssetFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AssetFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-asset-flow', template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"] }]
         }], propDecorators: { assetLayer: [{
@@ -9369,6 +9398,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class AtoNgVarDirective {
+    templateRef;
+    vcRef;
     set ngAtoVar(context) {
         this.context.$implicit = this.context.ngAtoVar = context;
         if (!this.hasView) {
@@ -9376,43 +9407,43 @@ class AtoNgVarDirective {
             this.hasView = true;
         }
     }
+    context = {
+        $implicit: null,
+        ngAtoVar: null,
+    };
+    hasView = false;
     constructor(templateRef, vcRef) {
         this.templateRef = templateRef;
         this.vcRef = vcRef;
-        this.context = {
-            $implicit: null,
-            ngAtoVar: null,
-        };
-        this.hasView = false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoNgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: AtoNgVarDirective, selector: "[ngAtoVar]", inputs: { ngAtoVar: "ngAtoVar" }, ngImport: i0 });
 }
-AtoNgVarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoNgVarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-AtoNgVarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AtoNgVarDirective, selector: "[ngAtoVar]", inputs: { ngAtoVar: "ngAtoVar" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoNgVarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoNgVarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngAtoVar]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngAtoVar: [{
+        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { ngAtoVar: [{
                 type: Input
             }] } });
 
 class AtoWaterLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
+            AtoFlowDiagramLibComponent,
+            AssetFlowComponent,
+            AtoLoadingDirective,
+            AtoAssetParamsViewComponent,
+            AtoNgVarDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
+            AtoFlowDiagramLibComponent,
+            AssetFlowComponent,
+            AtoLoadingDirective,
+            AtoAssetParamsViewComponent,
+            AtoNgVarDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
 }
-AtoWaterLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AtoWaterLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
-        AtoFlowDiagramLibComponent,
-        AssetFlowComponent,
-        AtoLoadingDirective,
-        AtoAssetParamsViewComponent,
-        AtoNgVarDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
-        AtoFlowDiagramLibComponent,
-        AssetFlowComponent,
-        AtoLoadingDirective,
-        AtoAssetParamsViewComponent,
-        AtoNgVarDirective] });
-AtoWaterLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AtoWaterLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [