ato-water-lib 0.0.18 → 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,
         },
@@ -3441,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();
@@ -3921,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'), {
@@ -5244,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,
@@ -6459,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\">\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']
@@ -7479,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',
@@ -7491,7 +7516,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 color: '#a8438d',
             },
             {
-                key: 93,
+                key: 89,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.EMPTY,
                 group: 100,
                 loc: '1000 700',
@@ -7503,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',
@@ -7517,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),
@@ -7535,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),
@@ -7551,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),
@@ -7567,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),
@@ -7583,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),
@@ -7599,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,
@@ -7607,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: [],
@@ -7763,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();
@@ -7775,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',
         };
@@ -7801,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\" 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]
@@ -7818,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 {
@@ -7826,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: [{
@@ -7839,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
                     ]
                 }]
         }] });
@@ -7861,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