ato-water-lib 0.0.18 → 0.0.20

package/esm2020/public-api.mjs

@@ -7,7 +7,9 @@ export * from './lib/ato-water-lib.module';
 // Component
 export * from './lib/components/flow-diagram-lib/flow-diagram-lib.component';
 export * from './lib/components/asset-flow/asset-flow.component';
+export * from './lib/components/asset-params-view/asset-params-view.component';
 // Directive
 export * from './lib/directive/ato-loading.directive';
+export * from './lib/directive/ng-var.directive';
 // Css
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2F0by13YXRlci1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxZQUFZO0FBQ1osY0FBYyw4REFBOEQsQ0FBQztBQUM3RSxjQUFjLGtEQUFrRCxDQUFDO0FBQ2pFLFlBQVk7QUFDWixjQUFjLHVDQUF1QyxDQUFDO0FBQ3RELE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGF0by13YXRlci1saWJcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9hdG8td2F0ZXItbGliLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYXRvLXdhdGVyLWxpYi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYXRvLXdhdGVyLWxpYi5tb2R1bGUnO1xuLy8gQ29tcG9uZW50XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Zsb3ctZGlhZ3JhbS1saWIvZmxvdy1kaWFncmFtLWxpYi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9hc3NldC1mbG93L2Fzc2V0LWZsb3cuY29tcG9uZW50Jztcbi8vIERpcmVjdGl2ZVxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL2F0by1sb2FkaW5nLmRpcmVjdGl2ZSc7XG4vLyBDc3NcblxuXG5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2F0by13YXRlci1saWIvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxZQUFZO0FBQ1osY0FBYyw4REFBOEQsQ0FBQztBQUM3RSxjQUFjLGtEQUFrRCxDQUFDO0FBQ2pFLGNBQWMsZ0VBQWdFLENBQUM7QUFDL0UsWUFBWTtBQUNaLGNBQWMsdUNBQXVDLENBQUM7QUFDdEQsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBhdG8td2F0ZXItbGliXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvYXRvLXdhdGVyLWxpYi5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2F0by13YXRlci1saWIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2F0by13YXRlci1saWIubW9kdWxlJztcbi8vIENvbXBvbmVudFxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9mbG93LWRpYWdyYW0tbGliL2Zsb3ctZGlhZ3JhbS1saWIuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvYXNzZXQtZmxvdy9hc3NldC1mbG93LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2Fzc2V0LXBhcmFtcy12aWV3L2Fzc2V0LXBhcmFtcy12aWV3LmNvbXBvbmVudCc7XG4vLyBEaXJlY3RpdmVcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZS9hdG8tbG9hZGluZy5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlyZWN0aXZlL25nLXZhci5kaXJlY3RpdmUnO1xuLy8gQ3NzXG5cblxuXG4iXX0=

package/fesm2015/ato-water-lib.mjs

@@ -1,14 +1,15 @@
 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 { __awaiter } from 'tslib';
 import * as go from 'gojs';
-import go__default from 'gojs';
 import _ from 'lodash';
 import moment from 'moment';
 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() { }
@@ -1031,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;
@@ -1740,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,
         },
@@ -3451,6 +3456,10 @@ class AtoDefaultGojsEditor {
         if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.VALUE_LABEL) {
             this.makeValueLabelTemplate();
         }
+        // Label
+        if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.TEXT_LABEL) {
+            this.makeTextLabelTemplate();
+        }
         // Zone item
         if ((node === null || node === void 0 ? void 0 : node.type) === AtoGojsEditorModel.ENUM_TEMPLATES.ZONE_ENERGY_ITEM) {
             this.makeZoneItemTemplate();
@@ -3930,6 +3939,19 @@ class AtoDefaultGojsEditor {
         }), new go.Binding('visible', 'data', (x) => typeof (x === null || x === void 0 ? void 0 : 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'), {
@@ -5262,7 +5284,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 === null || data === void 0 ? void 0 : data.visible) === 'boolean' ? data === null || data === void 0 ? void 0 : data.visible : true;
+        }), 
         // Header
         this.$(go.Panel, 'Auto', {
             stretch: go.GraphObject.Fill,
@@ -6487,10 +6511,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\">\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"] }] });
+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\">\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" }]
+            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']
@@ -6969,7 +6993,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 colorValue: '',
                 tooltip: '',
             },
-            Object.assign(Object.assign({ key: 94, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '20 10', padding: new go__default.Margin(0, 0, 0, 20) }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.CERULEAN]), { minSizeValue: new go__default.Size(100, NaN), selectable: false, dataTable: [
+            Object.assign(Object.assign({ key: 94, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '20 10', padding: new go.Margin(0, 0, 0, 20) }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.CERULEAN]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: [
                     {
                         key: '',
                         name: ENUM_ASSET_PARAMETERS.FEED_FLOW_RATE,
@@ -6995,7 +7019,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                         isEditable: true,
                     },
                 ] }),
-            Object.assign(Object.assign({ key: 95, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '420 40' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.DANUBE]), { minSizeValue: new go__default.Size(100, NaN), selectable: false, dataTable: [
+            Object.assign(Object.assign({ key: 95, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '420 40' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.DANUBE]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: [
                     {
                         key: '',
                         name: ENUM_ASSET_PARAMETERS.REJECTION_RATE_SALT_PASSAGE,
@@ -7015,7 +7039,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                         isEditable: true,
                     },
                 ] }),
-            Object.assign(Object.assign({ key: 96, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '590 150' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE]), { minSizeValue: new go__default.Size(100, NaN), selectable: false, dataTable: [
+            Object.assign(Object.assign({ key: 96, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '590 150' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.FOUNTAIN_BLUE]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: [
                     {
                         key: '',
                         name: ENUM_ASSET_PARAMETERS.PERMEATE_FLOW_RATE,
@@ -7035,7 +7059,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                         isEditable: true,
                     },
                 ] }),
-            Object.assign(Object.assign({ key: 97, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '30 370' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.GALLIANO]), { minSizeValue: new go__default.Size(100, NaN), selectable: false, dataTable: [
+            Object.assign(Object.assign({ key: 97, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '30 370' }, AtoGojsEditorModel.PARAM_TABLE_STYLE[AtoGojsEditorModel.ENUM_COLORS.GALLIANO]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: [
                     {
                         key: '',
                         name: ENUM_ASSET_PARAMETERS.CONCENTRATE_FLOW_RATE,
@@ -7061,7 +7085,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 source: AtoGojsEditorModel.IMAGE_RO_WATER_TREATMENT_PATH,
                 group: 100,
                 loc: '0 0',
-                margin: new go__default.Margin(130, 0, 0, 0),
+                margin: new go.Margin(130, 0, 0, 0),
                 selectable: false,
             },
             {
@@ -7470,7 +7494,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',
@@ -7482,7 +7506,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
-                key: 93,
+                key: 89,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 loc: '1000 700',
@@ -7493,21 +7517,117 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 name: 'bottom-right-marker',
                 color: '#a8438d',
             },
-            Object.assign(Object.assign({ key: 94, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '30 160', 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140 }))) }),
-            Object.assign(Object.assign({ key: 95, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go__default.Margin(0, 0, 0, 0), loc: '30 270' }, 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
-            Object.assign(Object.assign({ key: 96, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go__default.Margin(0, 0, 0, 0), loc: '580 250' }, 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
-            Object.assign(Object.assign({ key: 97, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go__default.Margin(0, 0, 0, 0), loc: '580 560' }, 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
-            Object.assign(Object.assign({ key: 98, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go__default.Margin(0, 0, 0, 0), loc: '450 20' }, 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))) }),
-            Object.assign(Object.assign({ key: 99, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go__default.Margin(0, 0, 0, 0), loc: '730 20' }, 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) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))) }),
+            Object.assign(Object.assign({ key: 90, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, loc: '30 160', padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140 }))), visible: true }),
+            Object.assign(Object.assign({ key: 91, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0), loc: '30 270' }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
+            Object.assign(Object.assign({ key: 92, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0), loc: '580 250' }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.WARMER_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.WARMER_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
+            Object.assign(Object.assign({ key: 93, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0), loc: '580 560' }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))) }),
+            Object.assign(Object.assign({ key: 94, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0), loc: '450 20' }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))) }),
+            Object.assign(Object.assign({ key: 95, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0), loc: '730 20' }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))) }),
             {
-                key: 91,
+                key: 96,
+                type: AtoGojsEditorModel.ENUM_TEMPLATES.IMAGE_TEMPLATE,
+                source: AtoGojsEditorModel.IMAGE_COOLING_TOWER_PATH,
+                group: 100,
+                loc: '0 0',
+                margin: new go.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',
+            },
+            Object.assign(Object.assign({ key: 90, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_TOWER_ANALYSIS].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))), visible: false }),
+            Object.assign(Object.assign({ key: 91, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.COOLING_WATER_CHEMISTRY].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 130 }))), visible: false }),
+            Object.assign(Object.assign({ key: 92, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.EVAPORATION_LOSS].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 140 }))), visible: false }),
+            Object.assign(Object.assign({ key: 93, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.MAKEUP_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))), visible: false }),
+            Object.assign(Object.assign({ key: 94, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.WARMER_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.WARMER_WATER].map((e) => (Object.assign(Object.assign({}, e), { value: '', isEditable: true, maxSizeValue: 120 }))), visible: false }),
+            Object.assign(Object.assign({ key: 95, type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE, group: 100, padding: new go.Margin(0, 0, 0, 0) }, DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER]), { minSizeValue: new go.Size(100, NaN), selectable: false, dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.BLOWDOWN_WATER].map((e) => (Object.assign(Object.assign({}, 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(195, 20, 0, 0),
+                margin: new go.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: [],
@@ -7520,7 +7640,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 source: AtoGojsEditorModel.IMAGE_BOILER_PATH,
                 group: 100,
                 loc: '0 0',
-                margin: new go__default.Margin(0, 0, 0, 0),
+                margin: new go.Margin(0, 0, 0, 0),
                 selectable: false,
                 width: 1038,
                 height: 516,
@@ -7664,6 +7784,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();
@@ -7676,16 +7848,57 @@ 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 === null || this === void 0 ? void 0 : this.systemType) ===
+            AtoGojsEditorModel.ENUM_TYPES.COOLING_TOWER) {
+            this.isResponsiveView = window.innerWidth < 1024;
+        }
+        else {
+            this.isResponsiveView = false;
+        }
+    }
+    updateLocationReponsive() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!((_a = this.flowData) === null || _a === void 0 ? void 0 : _a.nodeDataArray)) {
+            this.setFlowData(_.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType + (this.isResponsiveView ? '_RESPONSIVE' : '')]);
+            this.dataTableAssetParams = (_c = (_b = this.flowData) === null || _b === void 0 ? void 0 : _b.nodeDataArray) === null || _c === void 0 ? void 0 : _c.filter((e) => (e === null || e === void 0 ? void 0 : e.type) === AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE);
+            return;
+        }
+        _.forEach((_d = _.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType + (this.isResponsiveView ? '_RESPONSIVE' : '')]) === null || _d === void 0 ? void 0 : _d.nodeDataArray, (node) => {
+            var _a, _b;
+            const itemFind = (_b = (_a = this.flowData) === null || _a === void 0 ? void 0 : _a.nodeDataArray) === null || _b === void 0 ? void 0 : _b.find((x) => (node === null || node === void 0 ? void 0 : node.key) === (x === null || x === void 0 ? void 0 : x.key));
+            if (itemFind) {
+                itemFind.visible = (node === null || node === void 0 ? void 0 : node.visible) === false ? false : true;
+                itemFind.loc = node === null || node === void 0 ? void 0 : node.loc;
+                itemFind.margin = node === null || node === void 0 ? void 0 : node.margin;
+                itemFind.padding = node === null || node === void 0 ? void 0 : node.padding;
+            }
+        });
+        this.dataTableAssetParams = (_f = (_e = this.flowData) === null || _e === void 0 ? void 0 : _e.nodeDataArray) === null || _f === void 0 ? void 0 : _f.filter((e) => (e === null || e === void 0 ? void 0 : 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() {
         var _a;
-        const flowData = Object.assign(Object.assign({}, ATO_COMPONENTS_GROUP_DATA[this.systemType]), { linkFromPortIdProperty: 'fromPort', linkToPortIdProperty: 'toPort' });
+        const flowData = Object.assign(Object.assign({}, _.cloneDeep(ATO_COMPONENTS_GROUP_DATA)[this.systemType]), { linkFromPortIdProperty: 'fromPort', linkToPortIdProperty: 'toPort' });
         if (this.isUseBase64) {
             const itemImageTemp = (_a = flowData === null || flowData === void 0 ? void 0 : flowData.nodeDataArray) === null || _a === void 0 ? void 0 : _a.find((x) => (x === null || x === void 0 ? void 0 : x.type) === 'Image Template');
             if (itemImageTemp) {
@@ -7699,10 +7912,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\" 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\" 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]
@@ -7716,6 +7929,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 {
@@ -7724,11 +7944,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: [{
@@ -7737,15 +7967,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
                     ]
                 }]
         }] });
@@ -7759,5 +7996,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