ato-water-lib 0.0.42 → 0.0.44

package/fesm2020/ato-water-lib.mjs

@@ -6740,7 +6740,7 @@ const DATA_ASSET_PARAMETER_FIELDS = {
         waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
     },
     [ENUM_ASSET_PARAMETERS.KPI_ATP]: {
-        name: 'APT',
+        name: 'ATP',
         key: ENUM_ASSET_PARAMETERS.KPI_ATP,
         waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS,
     },
@@ -7834,165 +7834,6 @@ const ATO_COMPONENTS_GROUP_DATA = {
         ],
         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.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) => ({
-    //                 ...e,
-    //                 value: '',
-    //                 isEditable: true,
-    //                 maxSizeValue: 130,
-    //             })),
-    //             visible: false,
-    //         },
-    //         {
-    //             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) => ({
-    //                 ...e,
-    //                 value: '',
-    //                 isEditable: true,
-    //                 maxSizeValue: 130,
-    //             })),
-    //             visible: false,
-    //         },
-    //         {
-    //             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) => ({
-    //                 ...e,
-    //                 value: '',
-    //                 isEditable: true,
-    //                 maxSizeValue: 140,
-    //             })),
-    //             visible: false,
-    //         },
-    //         {
-    //             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) => ({
-    //                 ...e,
-    //                 value: '',
-    //                 isEditable: true,
-    //                 maxSizeValue: 120,
-    //             })),
-    //             visible: false,
-    //         },
-    //         {
-    //             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) => ({
-    //                 ...e,
-    //                 value: '',
-    //                 isEditable: true,
-    //                 maxSizeValue: 120,
-    //             })),
-    //             visible: false,
-    //         },
-    //         {
-    //             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) => ({
-    //                 ...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.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: [],
-    // },
     [AtoGojsEditorModel.ENUM_TYPES.BOILER]: {
         nodeDataArray: [
             {
@@ -8156,10 +7997,10 @@ class AtoAssetParamsViewComponent {
     }
 }
 AtoAssetParamsViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AtoAssetParamsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center\">\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                  <svg *ngIf=\"isEditView\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+AtoAssetParamsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center\">\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                  <svg *ngIf=\"isEditView\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center\">\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                  <svg *ngIf=\"isEditView\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
+            args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center\">\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                  <svg *ngIf=\"isEditView\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
         }], propDecorators: { isEditView: [{
                 type: Input
             }], data: [{
@@ -8179,7 +8020,6 @@ class AssetFlowComponent {
             }),
             // isReadOnly: true,
         };
-        this.isResponsiveView = false;
     }
     set flowData(v) {
         this._flowData = v;
@@ -8188,24 +8028,19 @@ class AssetFlowComponent {
     get flowData() {
         return this._flowData;
     }
+    // @Input() isResponsiveView = false;
+    get isResponsiveView() {
+        return window.innerWidth < 1024;
+    }
     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.flowData = AssetFlowComponent.getDefaultFlowData({
@@ -8220,7 +8055,6 @@ class AssetFlowComponent {
         this.setFlowData(_.cloneDeep(this.flowData));
     }
     ngOnInit() {
-        this.checkResponsiveView();
         this.updateLocationReponsive();
     }
     onClickParamOfTable($event) {
@@ -8233,13 +8067,14 @@ class AssetFlowComponent {
             linkFromPortIdProperty: 'fromPort',
             linkToPortIdProperty: 'toPort',
         };
+        const isResponsiveView = window.innerWidth < 1024;
         // Reponsive
         _.forEach(flowData?.nodeDataArray, (node) => {
-            node = _.merge(node, node[`extendedData${window.innerWidth < 1024 ? 'Responsive' : ''}`]);
+            node = _.merge(node, node[`extendedData${isResponsiveView ? 'Responsive' : ''}`]);
             if (node?.assetLayers) {
                 node.visible =
-                    node?.assetLayers ===
-                        (defaultData?.assetLayer ?? ATO_ASSET_LAYERS.FLOW);
+                    node?.assetLayers === defaultData?.assetLayer &&
+                        node[`extendedData${isResponsiveView ? 'Responsive' : ''}`]?.visible;
             }
         });
         // assetLayer
@@ -8253,15 +8088,17 @@ class AssetFlowComponent {
         return flowData;
     }
     setFlowData(data) {
-        // const layer = data?.assetLayer ?? this?.assetLayer ?? ATO_ASSET_LAYERS.FLOW;
         _.forEach(data.nodeDataArray, (node) => {
+            node = _.merge(node, node[`extendedData${this.isResponsiveView ? 'Responsive' : ''}`]);
             if (node?.assetLayers) {
-                node.visible = node?.assetLayers === data.assetLayer;
+                node.visible =
+                    node?.assetLayers === data.assetLayer &&
+                        node[`extendedData${this.isResponsiveView ? 'Responsive' : ''}`]
+                            ?.visible;
             }
         });
         this.flowData = {
             ...data,
-            // nodeDataArray: _.filter(data.nodeDataArray, x => !x?.assetLayers || (x?.assetLayers && x?.assetLayers === data?.assetLayer))
         };
         this.updateDataTableAssetParams(data);
     }
@@ -8275,7 +8112,7 @@ 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: { assetLayer: "assetLayer", 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 }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
+AssetFlowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AssetFlowComponent, selector: "ato-asset-flow", inputs: { assetLayer: "assetLayer", selectedComponent: "selectedComponent", systemType: "systemType", isUseBase64: "isUseBase64", flowData: "flowData", getFlowDataCallBack: "getFlowDataCallBack" }, outputs: { onClickParamOfTableEvent: "onClickParamOfTableEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "gjFlowDiagramTemp", first: true, predicate: AtoFlowDiagramLibComponent, descendants: true }, { propertyName: "assetParamsViewTemp", first: true, predicate: AtoAssetParamsViewComponent, descendants: true }], ngImport: i0, template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AtoFlowDiagramLibComponent, selector: "ato-flow-diagram-lib", inputs: ["data", "isLoading"] }, { kind: "directive", type: AtoLoadingDirective, selector: "[atoLoading]", inputs: ["appLoading"] }, { kind: "component", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: ["isEditView", "data"], outputs: ["clickParamTableRow"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AssetFlowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ato-asset-flow', template: "<div class=\"h-100 d-flex flex-column flex-gap-3 flex-grow-1 overflow-auto px-3 pb-3\">\n  <div class=\"h-100 d-flex flex-column\" atoLoading [appLoading]=\"flowData === null\">\n    <ato-flow-diagram-lib\n      *ngIf=\"flowData !== null\"\n      #gjFlowDiagramTemp\n      [data]=\"flowData\"\n      [initialOptions]=\"options\"\n      (onClikParamOfTable)=\"onClickParamOfTable($event)\"\n      [class]=\"!!isResponsiveView ? 'diagram-responsive-view' : 'flex-grow-1'\"\n    ></ato-flow-diagram-lib>\n    <div class=\"mt-2\" *ngIf=\"isResponsiveView\">\n      <ato-asset-params-view\n        #assetParamsViewTemp\n        [data]=\"dataTableAssetParams\"\n        [isEditView]=\"true\"\n        (clickParamTableRow)=\"onClickParamOfTable($event)\"\n      ></ato-asset-params-view>\n    </div>\n  </div>\n</div>\n\n", styles: [".diagram-responsive-view{height:30vh;min-height:30vh}\n"] }]
@@ -8297,8 +8134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], flowData: [{
                 type: Input
-            }], isResponsiveView: [{
-                type: Input
             }], getFlowDataCallBack: [{
                 type: Input
             }], onResize: [{