ato-water-lib 0.0.17 → 0.0.19

package/fesm2020/ato-water-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Directive, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { Injectable, Component, EventEmitter, Directive, ViewChild, Input, Output, HostListener, NgModule } from '@angular/core';
 import * as go from 'gojs';
 import go__default from 'gojs';
 import _ from 'lodash';
@@ -8,6 +8,8 @@ import { Subject, Subscription } from 'rxjs';
 import * as i1 from '@angular/common';
 import { DecimalPipe, CommonModule } from '@angular/common';
 import { v4 } from 'uuid';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
 class AtoWaterLibService {
     constructor() { }
@@ -1030,6 +1032,7 @@ class AtoGojsEditorModel {
         ENUM_TEMPLATES["TURBINES"] = "Turbines";
         // Plant Basic
         ENUM_TEMPLATES["GROUP_BASIC_COMPONENT"] = "Group Basic Component";
+        ENUM_TEMPLATES["TEXT_LABEL"] = "label";
     })(ENUM_TEMPLATES = AtoGojsEditorModel.ENUM_TEMPLATES || (AtoGojsEditorModel.ENUM_TEMPLATES = {}));
     // System Types
     let ENUM_TYPES;
@@ -1739,6 +1742,9 @@ class AtoGojsEditorModel {
         [ENUM_TEMPLATES.VALUE_LABEL]: {
             name: ENUM_TEMPLATES.VALUE_LABEL,
         },
+        [ENUM_TEMPLATES.TEXT_LABEL]: {
+            name: ENUM_TEMPLATES.TEXT_LABEL,
+        },
         [ENUM_TEMPLATES.DATA_BOX]: {
             name: ENUM_TEMPLATES.DATA_BOX,
         },
@@ -3192,6 +3198,10 @@ var ATO_EPlantType;
 //     [PlantComponentModel.PLANT_STATUS.active]: PLANT_TYPE_ACTIVE,
 // };
 
+const ICONS_BASE64 = {
+    "uf044": "data:image/png;base64,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"
+};
+
 const ICON_ALERT = '/assets/images/icons/Station.svg';
 const ARROW = '/assets/images/icons/arrow.svg';
 const ARROW_GRAY = '/assets/images/icons/arrow-gray.svg';
@@ -3437,6 +3447,10 @@ class AtoDefaultGojsEditor {
         if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.VALUE_LABEL) {
             this.makeValueLabelTemplate();
         }
+        // Label
+        if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL) {
+            this.makeTextLabelTemplate();
+        }
         // Zone item
         if (node?.type === AtoGojsEditorModel.ENUM_TEMPLATES.ZONE_ENERGY_ITEM) {
             this.makeZoneItemTemplate();
@@ -3917,6 +3931,19 @@ class AtoDefaultGojsEditor {
         }), new go.Binding('visible', 'data', (x) => typeof x?.quantity === 'number')))));
         this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.VALUE_LABEL, node);
     }
+    makeTextLabelTemplate(size = { w: NaN, h: 20 }) {
+        const node = this.$(go.Node, 'Auto', {
+            movable: false,
+            isSelected: false,
+        }, new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), this.$(go.Panel, 'Auto', this.$(go.Panel, 'Horizontal', this.$(go.TextBlock, {
+            margin: new go.Margin(0, 5, 10, 0),
+            textAlign: 'center',
+            font: 'bold 16px Arial',
+            wrap: go.TextBlock.WrapFit,
+            stroke: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+        }, new go.Binding('stroke', 'color'), new go.Binding('text', 'name'), new go.Binding('visible', 'visible')))));
+        this.myDiagram.nodeTemplateMap.set(AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL, node);
+    }
     makeTextTemplate(size = { w: AtoGojsEditorModel.GRID_SIZE * 5, h: AtoGojsEditorModel.GRID_SIZE * 2 }) {
         const self = this;
         const contextMenu = this.$(go.Adornment, 'Vertical', this.$('ContextMenuButton', this.$(go.TextBlock, 'Option 1'), {
@@ -5240,7 +5267,9 @@ class AtoDefaultGojsEditor {
         {
             zOrder: 2,
             // padding: new go.Margin(0, 0, 0, 200),
-        }, new go.Binding('padding', 'padding'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), 
+        }, new go.Binding('padding', 'padding'), new go.Binding('selectable', 'selectable'), new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding('visible', '', (data) => {
+            return typeof data?.visible === 'boolean' ? data?.visible : true;
+        }), 
         // Header
         this.$(go.Panel, 'Auto', {
             stretch: go.GraphObject.Fill,
@@ -5353,12 +5382,11 @@ class AtoDefaultGojsEditor {
                 return data.color;
             }), new go.Binding('maxSize', '', (data) => {
                 return new go.Size(data?.maxSizeValue || 190, 14);
-            })), this.$(go.TextBlock, {
+            })), this.$(go.Picture, {
                 alignment: go.Spot.Right,
                 column: 1,
                 margin: new go.Margin(0, 0, 0, 5),
-                text: '\uf044',
-                font: '13px "Font Awesome 6 Pro"',
+                source: ICONS_BASE64["uf044"],
                 cursor: 'pointer',
                 visible: false,
                 toolTip: this.$('ToolTip', this.$(go.TextBlock, {
@@ -5366,6 +5394,8 @@ class AtoDefaultGojsEditor {
                 }, new go.Binding('text', '', (data, panel) => {
                     return data?.toolTipAction;
                 })), new go.Binding('visible', '', (data) => !!data?.toolTipAction)),
+                height: 14,
+                width: 14,
             }, {
                 click: (e, obj) => {
                     if (obj.panel.part.data?.dataTable[obj?.panel.row]?.isEditable === false) {
@@ -6383,8 +6413,8 @@ class AtoLoadingDirective {
         this.renderer.setStyle(this.spinnerWrapper, 'z-index', '10');
         const spinner = this.renderer.createElement('img');
         this.renderer.setAttribute(spinner, 'src', 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2IoMjU1LCAyNTUsIDI1NSk7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IGFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyIgd2lkdGg9Ijg4cHgiIGhlaWdodD0iODhweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KPGRlZnMgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgPG1hc2sgaWQ9ImxkaW8tdmN5YjQ1YmFvdWstbWFzayIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0id2hpdGUiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvcmVjdD4KICA8L21hc2s+CjwvZGVmcz4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiM1Y2FhZWEiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvcmVjdD4KPGcgbWFzaz0idXJsKCNsZGlvLXZjeWI0NWJhb3VrLW1hc2spIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICA8cmVjdCB4PSItMTAwIiB5PSItMjUwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgcng9IjkwIiByeT0iOTAiIGZpbGw9IiM4MmNlZmYiIG9wYWNpdHk9IjAuNCIgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOiBydW5uaW5nOyBhbmltYXRpb24tZGVsYXk6IDBzOyI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHZhbHVlcz0iMCA1MCAtMTAwOzkwIDUwIC0xMDAiIGtleVRpbWVzPSIwOzEiIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTogcnVubmluZzsgYW5pbWF0aW9uLWRlbGF5OiAwczsiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KICA8L3JlY3Q+CgogIDxyZWN0IHg9Ii0xMDAiIHk9Ii0yNjAiIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiByeD0iOTUiIHJ5PSI5NSIgZmlsbD0iI2E1ZGNmZiIgb3BhY2l0eT0iMC40IiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjEuNTE1MTUxNTE1MTUxNTE1MXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAgNTAgLTExMDs5MCA1MCAtMTEwIiBrZXlUaW1lcz0iMDsxIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij48L2FuaW1hdGVUcmFuc2Zvcm0+CiAgPC9yZWN0PgoKICA8cmVjdCB4PSItMTAwIiB5PSItMjcwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgcng9IjEwMCIgcnk9IjEwMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC40IiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBkdXI9IjMuMDMwMzAzMDMwMzAzMDMwM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjAgNTAgLTEyMDs5MCA1MCAtMTIwIiBrZXlUaW1lcz0iMDsxIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7IGFuaW1hdGlvbi1kZWxheTogMHM7Ij48L2FuaW1hdGVUcmFuc2Zvcm0+CiAgPC9yZWN0PgoKPC9nPgo8IS0tIFtsZGlvXSBnZW5lcmF0ZWQgYnkgaHR0cHM6Ly9sb2FkaW5nLmlvLyAtLT48L3N2Zz4=');
-        this.renderer.setStyle(spinner, 'width', '40px');
-        this.renderer.setStyle(spinner, 'height', '40px');
+        this.renderer.setStyle(spinner, 'width', '30px');
+        this.renderer.setStyle(spinner, 'height', '30px');
         this.renderer.setStyle(spinner, 'border-radius', '50%');
         this.renderer.appendChild(this.spinnerWrapper, spinner);
     }
@@ -6454,10 +6484,10 @@ class AtoFlowDiagramLibComponent extends AtoDefaultGojsEditor {
     }
 }
 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\" style=\"height: 100%\">\n    <div class=\"w-100 h-100 d-flex\" style=\"height: 100%\">\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 [id]=\"myDiagramDiv\" class=\"flex-grow-1\" style=\"height: 100%\"></div>\n        <!-- <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <nz-empty nzNotFoundImage=\"simple\"></nz-empty>\n        </div> -->\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }] });
+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 [id]=\"myDiagramDiv\" class=\"flex-grow-1\"></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: [{
             type: Component,
-            args: [{ selector: 'ato-flow-diagram-lib', template: "<div class=\"w-100 h-100 gj-flow-diagram-wrapper\" atoLoading [appLoading]=\"data === null || !!isLoading\" style=\"height: 100%\">\n    <div class=\"w-100 h-100 d-flex\" style=\"height: 100%\">\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 [id]=\"myDiagramDiv\" class=\"flex-grow-1\" style=\"height: 100%\"></div>\n        <!-- <div *ngIf=\"initialOptions?.isReadOnly && !data?.nodeDataArray?.length\" class=\"empty-data\">\n            <nz-empty nzNotFoundImage=\"simple\"></nz-empty>\n        </div> -->\n    </div>\n</div>\n" }]
+            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 [id]=\"myDiagramDiv\" class=\"flex-grow-1\"></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: [{
                 type: ViewChild,
                 args: ['myDiagramDivTemp']
@@ -7474,7 +7504,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
     [AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER]: {
         nodeDataArray: [
             {
-                key: 92,
+                key: 88,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 loc: '0 0',
@@ -7486,7 +7516,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
-                key: 93,
+                key: 89,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 loc: '1000 700',
@@ -7498,7 +7528,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
-                key: 94,
+                key: 90,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 loc: '30 160',
@@ -7512,9 +7542,10 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     isEditable: true,
                     maxSizeValue: 140,
                 })),
+                visible: true
             },
             {
-                key: 95,
+                key: 91,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go__default.Margin(0, 0, 0, 0),
@@ -7530,7 +7561,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 })),
             },
             {
-                key: 96,
+                key: 92,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go__default.Margin(0, 0, 0, 0),
@@ -7546,7 +7577,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 })),
             },
             {
-                key: 97,
+                key: 93,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go__default.Margin(0, 0, 0, 0),
@@ -7562,7 +7593,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 })),
             },
             {
-                key: 98,
+                key: 94,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go__default.Margin(0, 0, 0, 0),
@@ -7578,7 +7609,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 })),
             },
             {
-                key: 99,
+                key: 95,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go__default.Margin(0, 0, 0, 0),
@@ -7594,7 +7625,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 })),
             },
             {
-                key: 91,
+                key: 96,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
                 source: AtoGojsEditorModel.IMAGE_COOLING_TOWER_PATH,
                 group: 100,
@@ -7602,6 +7633,192 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 margin: new go__default.Margin(195, 20, 0, 0),
                 selectable: false,
             },
+            // {
+            //     key: 97,
+            //     type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+            //     group: 100,
+            //     loc: '250 25',
+            //     name: 'Evaporation Loss',
+            //     color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+            //     visible: false,
+            // },
+            // {
+            //     key: 98,
+            //     type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+            //     group: 100,
+            //     loc: '110 290',
+            //     name: 'Makeup Water',
+            //     color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+            //     visible: false,
+            // },
+            // {
+            //     key: 99,
+            //     type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+            //     group: 100,
+            //     loc: '580 435',
+            //     name: 'Blowdown Water',
+            //     color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+            //     visible: false,
+            // },
+            { key: 100, type: AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER, isGroup: true, name: 'Group' },
+        ],
+        linkDataArray: [],
+    },
+    [AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER + '_RESPONSIVE']: {
+        nodeDataArray: [
+            {
+                key: 88,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                loc: '0 0',
+                data: {
+                    quantity: 2222,
+                    unit: 'm³',
+                },
+                name: 'top-left-marker',
+                color: '#a8438d',
+            },
+            {
+                key: 89,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
+                group: 100,
+                loc: '700 300',
+                data: {
+                    quantity: 3333,
+                    unit: 'm³',
+                },
+                name: 'bottom-right-marker',
+                color: '#a8438d',
+            },
+            {
+                key: 90,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 130,
+                })),
+                visible: false,
+            },
+            {
+                key: 91,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 130,
+                })),
+                visible: false,
+            },
+            {
+                key: 92,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 140,
+                })),
+                visible: false,
+            },
+            {
+                key: 93,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 120,
+                })),
+                visible: false,
+            },
+            {
+                key: 94,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.WARMER_WATER],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.WARMER_WATER].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 120,
+                })),
+                visible: false,
+            },
+            {
+                key: 95,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
+                group: 100,
+                padding: new go__default.Margin(0, 0, 0, 0),
+                ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER],
+                minSizeValue: new go__default.Size(100, NaN),
+                selectable: false,
+                dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER].map((e) => ({
+                    ...e,
+                    value: '',
+                    isEditable: true,
+                    maxSizeValue: 120,
+                })),
+                visible: false,
+            },
+            {
+                key: 96,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
+                source: AtoGojsEditorModel.IMAGE_COOLING_TOWER_PATH,
+                group: 100,
+                loc: '0 0',
+                margin: new go__default.Margin(20, 20, 0, 0),
+                selectable: false,
+            },
+            {
+                key: 97,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '250 25',
+                name: 'Evaporation Loss',
+                color: AtoGojsEditorModel.ENUM_COLORS.FLAMINGO,
+            },
+            {
+                key: 98,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '110 290',
+                name: 'Makeup Water',
+                color: AtoGojsEditorModel.ENUM_COLORS.CERULEAN,
+            },
+            {
+                key: 99,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL,
+                group: 100,
+                loc: '580 435',
+                name: 'Blowdown Water',
+                color: AtoGojsEditorModel.ENUM_COLORS.CARROT_ORANGE,
+            },
             { key: 100, type: AtoGojsEditorModel.ENUM_TEMPLATES.COOLING_TOWER, isGroup: true, name: 'Group' },
         ],
         linkDataArray: [],
@@ -7758,6 +7975,58 @@ const ATO_COMPONENTS_GROUP_DATA = {
     },
 };
 
+class AtoNgVarDirective {
+    set ngVar(context) {
+        this.context.$implicit = this.context.ngVar = context;
+        if (!this.hasView) {
+            this.vcRef.createEmbeddedView(this.templateRef, this.context);
+            this.hasView = true;
+        }
+    }
+    constructor(templateRef, vcRef) {
+        this.templateRef = templateRef;
+        this.vcRef = vcRef;
+        this.context = {
+            $implicit: null,
+            ngVar: null,
+        };
+        this.hasView = false;
+    }
+}
+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: "[ngVar]", inputs: { ngVar: "ngVar" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoNgVarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngVar]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { ngVar: [{
+                type: Input
+            }] } });
+
+class AtoAssetParamsViewComponent {
+    constructor() {
+        this.isEditView = false;
+        this.data = [];
+        this.clickParamTableRow = new EventEmitter();
+    }
+    onClickRowParam(itemTable) {
+        this.clickParamTableRow.emit(itemTable);
+    }
+}
+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        *ngVar=\"{ isCollapsed: true } as vars\"\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)=\"vars.isCollapsed = !vars.isCollapsed\"\n        >\n            <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">{{ data?.title }}</div>\n            <i\n                class=\"fa-solid font-size-14px color-white {{ vars.isCollapsed ? 'fa-angle-right' : 'fa-angle-down' }}\"\n            ></i>\n        </div>\n        <div class=\"px-1 pb-1\" *ngIf=\"!vars.isCollapsed\">\n            <div class=\"table-asset-param-wrapper\" [style.backgroundColor]=\"data?.bgColor\">\n                <table>\n                    <tbody>\n                        <tr\n                            *ngFor=\"let itemTable of data?.dataTable\"\n                            (click)=\"onClickRowParam(itemTable)\"\n                            class=\"cursor-pointer\"\n                        >\n                            <td class=\"font-size-13px\" [style.borderColor]=\"data?.borderTable\">\n                                {{ itemTable?.name }}\n                            </td>\n                            <td class=\"font-size-13px\" [style.borderColor]=\"data?.borderTable\">\n                                <div class=\"d-flex align-items-center\">\n                                    <div\n                                        class=\"mr-auto font-size-13px text-truncate flex-grow-1\"\n                                        [style.color]=\"itemTable?.color\"\n                                    >\n                                        {{ itemTable?.value }}\n                                    </div>\n                                    <i *ngIf=\"isEditView\" class=\"fal fa-edit font-size-14px color-night-rider\"></i>\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}.color-white{color:#fff}.flex-gap-2{gap:.5rem}\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"] }, { kind: "directive", type: AtoNgVarDirective, selector: "[ngVar]", inputs: ["ngVar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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        *ngVar=\"{ isCollapsed: true } as vars\"\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)=\"vars.isCollapsed = !vars.isCollapsed\"\n        >\n            <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">{{ data?.title }}</div>\n            <i\n                class=\"fa-solid font-size-14px color-white {{ vars.isCollapsed ? 'fa-angle-right' : 'fa-angle-down' }}\"\n            ></i>\n        </div>\n        <div class=\"px-1 pb-1\" *ngIf=\"!vars.isCollapsed\">\n            <div class=\"table-asset-param-wrapper\" [style.backgroundColor]=\"data?.bgColor\">\n                <table>\n                    <tbody>\n                        <tr\n                            *ngFor=\"let itemTable of data?.dataTable\"\n                            (click)=\"onClickRowParam(itemTable)\"\n                            class=\"cursor-pointer\"\n                        >\n                            <td class=\"font-size-13px\" [style.borderColor]=\"data?.borderTable\">\n                                {{ itemTable?.name }}\n                            </td>\n                            <td class=\"font-size-13px\" [style.borderColor]=\"data?.borderTable\">\n                                <div class=\"d-flex align-items-center\">\n                                    <div\n                                        class=\"mr-auto font-size-13px text-truncate flex-grow-1\"\n                                        [style.color]=\"itemTable?.color\"\n                                    >\n                                        {{ itemTable?.value }}\n                                    </div>\n                                    <i *ngIf=\"isEditView\" class=\"fal fa-edit font-size-14px color-night-rider\"></i>\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}.color-white{color:#fff}.flex-gap-2{gap:.5rem}\n"] }]
+        }], propDecorators: { isEditView: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], clickParamTableRow: [{
+                type: Output
+            }] } });
+
 class AssetFlowComponent {
     constructor() {
         this.onClickParamOfTableEvent = new EventEmitter();
@@ -7770,16 +8039,55 @@ class AssetFlowComponent {
             // isReadOnly: true,
         };
         this.flowData = {};
+        this.isResponsiveView = false;
+    }
+    onResize(event) {
+        // Now only Support Cooling Tower Responsive
+        if (this.timeoutResizeWindow) {
+            clearTimeout(this.timeoutResizeWindow);
+        }
+        this.timeoutResizeWindow = setTimeout(() => {
+            this.checkResponsiveView();
+            this.updateLocationReponsive();
+        }, 1000);
+    }
+    checkResponsiveView() {
+        if (this?.systemType ===
+            AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
+            this.isResponsiveView = window.innerWidth < 1024;
+        }
+        else {
+            this.isResponsiveView = false;
+        }
+    }
+    updateLocationReponsive() {
+        if (!this.flowData?.nodeDataArray) {
+            this.setFlowData(_.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType + (this.isResponsiveView ? '_RESPONSIVE' : '')]);
+            this.dataTableAssetParams = this.flowData?.nodeDataArray?.filter((e) => e?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE);
+            return;
+        }
+        _.forEach(_.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType + (this.isResponsiveView ? '_RESPONSIVE' : '')]?.nodeDataArray, (node) => {
+            const itemFind = this.flowData?.nodeDataArray?.find((x) => node?.key === x?.key);
+            if (itemFind) {
+                itemFind.visible = node?.visible === false ? false : true;
+                itemFind.loc = node?.loc;
+                itemFind.margin = node?.margin;
+                itemFind.padding = node?.padding;
+            }
+        });
+        this.dataTableAssetParams = this.flowData?.nodeDataArray?.filter((e) => e?.type === AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE);
+        this.setFlowData(_.cloneDeep(this.flowData));
     }
     ngOnInit() {
-        this.flowData = this.getDefaultFlowData();
+        this.checkResponsiveView();
+        this.updateLocationReponsive();
     }
     onClickParamOfTable($event) {
         this.onClickParamOfTableEvent.emit($event);
     }
     getDefaultFlowData() {
         const flowData = {
-            ...ATO_COMPONENTS_GROUP_DATA[this.systemType],
+            ..._.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType],
             linkFromPortIdProperty: 'fromPort',
             linkToPortIdProperty: 'toPort',
         };
@@ -7796,10 +8104,10 @@ class AssetFlowComponent {
     }
 }
 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: { selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", flowData: "flowData" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100\" style=\"height: 100%\" 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  ></ato-flow-diagram-lib>\n</div>\n", styles: [""], 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"] }] });
+AssetFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", flowData: "flowData", isResponsiveView: "isResponsiveView", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, 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        [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}\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: [{
             type: Component,
-            args: [{ selector: 'ato-asset-flow', template: "<div class=\"h-100\" style=\"height: 100%\" 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  ></ato-flow-diagram-lib>\n</div>\n" }]
+            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        [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}\n"] }]
         }], propDecorators: { gjFlowDiagramTemp: [{
                 type: ViewChild,
                 args: [AtoFlowDiagramLibComponent]
@@ -7813,6 +8121,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], flowData: [{
                 type: Input
+            }], isResponsiveView: [{
+                type: Input
+            }], getFlowDataCallBack: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class AtoWaterLibModule {
@@ -7821,11 +8136,21 @@ AtoWaterLibModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 AtoWaterLibModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, declarations: [AtoWaterLibComponent,
         AtoFlowDiagramLibComponent,
         AssetFlowComponent,
-        AtoLoadingDirective], imports: [CommonModule], exports: [AtoWaterLibComponent,
+        AtoLoadingDirective,
+        AtoAssetParamsViewComponent,
+        AtoNgVarDirective], imports: [CommonModule,
+        BrowserModule,
+        ReactiveFormsModule,
+        FormsModule], exports: [AtoWaterLibComponent,
         AtoFlowDiagramLibComponent,
         AssetFlowComponent,
-        AtoLoadingDirective] });
-AtoWaterLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule] });
+        AtoLoadingDirective,
+        AtoAssetParamsViewComponent,
+        AtoNgVarDirective] });
+AtoWaterLibModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, imports: [CommonModule,
+        BrowserModule,
+        ReactiveFormsModule,
+        FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoWaterLibModule, decorators: [{
             type: NgModule,
             args: [{
@@ -7834,15 +8159,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         AtoFlowDiagramLibComponent,
                         AssetFlowComponent,
                         AtoLoadingDirective,
+                        AtoAssetParamsViewComponent,
+                        AtoNgVarDirective,
                     ],
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        BrowserModule,
+                        ReactiveFormsModule,
+                        FormsModule,
                     ],
                     exports: [
                         AtoWaterLibComponent,
                         AtoFlowDiagramLibComponent,
                         AssetFlowComponent,
-                        AtoLoadingDirective
+                        AtoLoadingDirective,
+                        AtoAssetParamsViewComponent,
+                        AtoNgVarDirective
                     ]
                 }]
         }] });
@@ -7856,5 +8188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AssetFlowComponent, AtoFlowDiagramLibComponent, AtoLoadingDirective, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService };
+export { AssetFlowComponent, AtoAssetParamsViewComponent, AtoFlowDiagramLibComponent, AtoLoadingDirective, AtoNgVarDirective, AtoWaterLibComponent, AtoWaterLibModule, AtoWaterLibService };
 //# sourceMappingURL=ato-water-lib.mjs.map