ato-water-lib 0.0.110 → 0.0.111

package/fesm2020/ato-water-lib.mjs

@@ -5659,7 +5659,15 @@ class AtoDefaultGojsEditor {
             // return data.dataTable.filter((x) => x?.visible !== false);
             const dataTable = data.dataTable.filter((x) => x?.visible !== false);
             if (data?.isShowDataLongitudinal) {
-                return _.map(dataTable, x => { return { ...x, isOnlyShowParamName: true }; })?.concat(_.map(dataTable, x => { return { ...x, isOnlyShowValue: true, minSizeValue: new go.Size(170, 15) }; }));
+                return _.map(dataTable, (x) => {
+                    return { ...x, isOnlyShowParamName: true };
+                })?.concat(_.map(dataTable, (x) => {
+                    return {
+                        ...x,
+                        isOnlyShowValue: true,
+                        minSizeValue: new go.Size(170, 15),
+                    };
+                }));
             }
             return dataTable;
         }), {
@@ -5708,6 +5716,8 @@ class AtoDefaultGojsEditor {
                 return data?.name;
             }), new go.Binding('maxSize', '', (data, panel) => {
                 return data?.maxSizeNameParam;
+            }), new go.Binding('desiredSize', '', (data) => {
+                return data?.desiredSizeNameParam;
             }), new go.Binding('visible', '', (data, panel) => {
                 return !data?.isOnlyShowValue;
             })), this.$(go.Panel, 'Table', {
@@ -5725,6 +5735,8 @@ class AtoDefaultGojsEditor {
                 return data?.minSizeValue ?? new go.Size(90, 14);
             }), new go.Binding('maxSize', '', (data) => {
                 return data?.maxSizeValue;
+            }), new go.Binding('desiredSize', '', (data) => {
+                return data?.desiredSizeValue;
             }), this.$(go.TextBlock, '', {
                 column: 0,
                 margin: 0,
@@ -5755,7 +5767,9 @@ class AtoDefaultGojsEditor {
                 return data.color;
             }), new go.Binding('maxSize', '', (data) => {
                 if (!data?.isReadOnly && !this._initialOptions.isReadOnly) {
-                    return new go.Size(data?.maxSizeValue?.width ? (data?.maxSizeValue?.width - 15) : NaN, data?.maxSizeValue?.height ?? NaN);
+                    return new go.Size(data?.maxSizeValue?.width
+                        ? data?.maxSizeValue?.width - 15
+                        : NaN, data?.maxSizeValue?.height ?? NaN);
                 }
                 return data?.maxSizeValue;
             }), new go.Binding('font', '', (data) => {
@@ -9492,7 +9506,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                     maxSizeValue: new go.Size(120, 14),
                 })),
                 assetLayers: ATO_ASSET_LAYERS.FLOW,
@@ -9516,7 +9530,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                     maxSizeValue: new go.Size(120, 14),
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
@@ -9725,7 +9739,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 key: 101,
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
-                loc: '350 10',
+                loc: '343 10',
                 padding: new go.Margin(0, 0, 0, 0),
                 ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.VISUAL_MANAGEMENT],
                 minSizeValue: new go.Size(100, NaN),
@@ -9762,7 +9776,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     isEditable: e?.isEditable === false ? false : true,
                     isFrom: ATO_MAPPER_FROM.INDICATOR,
                     maxSizeValue: new go.Size(130, 14),
-                    maxSizeNameParam: new go.Size(160, 14),
+                    desiredSizeNameParam: new go.Size(136, 14),
                     waterSystem: WATER_SYSTEMS_NAME.DATA_ANALYSIS,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.PERFORMANCE,
@@ -9778,7 +9792,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 type: AtoGojsEditorModel.ENUM_TEMPLATES.PARAM_TABLE,
                 group: 100,
                 padding: new go.Margin(0, 0, 0, 0),
-                loc: '655 620',
+                loc: '667 620',
                 ...DATA_WATER_SYSTEMS[WATER_SYSTEMS_NAME.EFFICIENCY_AND_PERFORMANCE],
                 minSizeValue: new go.Size(100, NaN),
                 selectable: false,
@@ -9786,7 +9800,8 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: new go.Size(100, 14),
+                    desiredSizeValue: new go.Size(100, 14),
+                    desiredNameParam: new go.Size(160, 14),
                     waterSystem: WATER_SYSTEMS_NAME.EFFICIENCY_AND_PERFORMANCE,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.PERFORMANCE,
@@ -9810,7 +9825,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: new go.Size(130, 14),
+                    maxSizeValue: new go.Size(128, 14),
                     maxSizeNameParam: new go.Size(140, 14),
                     waterSystem: WATER_SYSTEMS_NAME.WATER_AND_ENERGY_CONSUMPTION,
                 })),
@@ -9835,7 +9850,8 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    maxSizeValue: new go.Size(120, 14),
+                    desiredSizeValue: new go.Size(120, 14),
+                    desiredSizeNameParam: new go.Size(145, 14),
                     waterSystem: WATER_SYSTEMS_NAME.CHEMICALS_CONSUMPTION,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.PERFORMANCE,
@@ -9857,8 +9873,9 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 selectable: false,
                 dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.DESIGN_PARAMETERS].map((e) => ({
                     ...e,
+                    isEditable: true,
                     maxSizeValue: new go.Size(120, 14),
-                    maxSizeNameParam: new go.Size(160, 14),
+                    maxSizeNameParam: new go.Size(180, 14),
                     waterSystem: WATER_SYSTEMS_NAME.DESIGN_PARAMETERS,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.PERFORMANCE,
@@ -9881,7 +9898,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.SYSTEM_KPIS__COOLING_TOWER__PERFORMANCE].map((e) => ({
                     ...e,
                     maxSizeValue: new go.Size(130, 14),
-                    maxSizeNameParam: new go.Size(160, 14),
+                    desiredSizeNameParam: new go.Size(135, 14),
                     waterSystem: WATER_SYSTEMS_NAME.SYSTEM_KPIS__COOLING_TOWER__PERFORMANCE,
                 })),
                 assetLayers: ATO_ASSET_LAYERS.PERFORMANCE,
@@ -10881,7 +10898,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                 dataTable: ASSET_CATEGORY_PARAMS[WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW].map((e) => ({
                     ...e,
                     value: '',
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER__FLOW,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                     isEditable: true,
                     maxSizeValue: new go.Size(120, 14),
                 })),
@@ -10906,7 +10923,7 @@ const ATO_COMPONENTS_GROUP_DATA = {
                     ...e,
                     value: '',
                     isEditable: true,
-                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER__CHEMISTRY,
+                    waterSystem: WATER_SYSTEMS_NAME.MAKEUP_WATER,
                     maxSizeValue: new go.Size(120, 14),
                 })),
                 assetLayers: ATO_ASSET_LAYERS.CHEMISTRY,
@@ -11131,10 +11148,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 flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+AtoAssetParamsViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AtoAssetParamsViewComponent, selector: "ato-asset-params-view", inputs: { isEditView: "isEditView", data: "data" }, outputs: { clickParamTableRow: "clickParamTableRow" }, ngImport: i0, template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2 \">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1 cursor-pointer\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AtoAssetParamsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2\">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
+            args: [{ selector: 'ato-asset-params-view', template: "<div class=\"d-flex flex-column flex-gap-2\">\n  <div class=\"\" *ngFor=\"let tableParam of data\">\n    <ng-template\n      [ngTemplateOutlet]=\"tableParamTemplate\"\n      [ngTemplateOutletContext]=\"{\n        data: tableParam\n      }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #tableParamTemplate let-data=\"data\">\n  <div\n    class=\"d-flex flex-column asset-param-item w-100\"\n    [style.backgroundColor]=\"data?.color\"\n  >\n    <div\n      class=\"d-flex align-items-center justify-content-between py-1 pl-1 pr-2 cursor-pointer\"\n      (click)=\"data.isCollapsed = !data.isCollapsed\"\n    >\n      <div class=\"font-size-14px flex-grow-1 text-truncate color-white\">\n        {{ data?.title }}\n      </div>\n      <svg\n        *ngIf=\"data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"!data.isCollapsed\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        fill=\"#FFFF\"\n        class=\"fa-solid font-size-14px color-white svg-15px\"\n      >\n        <path\n          d=\"M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\"\n        />\n      </svg>\n    </div>\n    <div class=\"px-1 pb-1\" *ngIf=\"!data.isCollapsed\">\n      <div\n        class=\"table-asset-param-wrapper\"\n        [style.backgroundColor]=\"data?.bgColor\"\n      >\n        <table>\n          <tbody>\n            <tr\n              *ngFor=\"let itemTable of data?.dataTable\"\n              (click)=\"onClickRowParam(itemTable)\"\n              class=\"cursor-pointer\"\n            >\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                {{ itemTable?.name }}\n              </td>\n              <td\n                class=\"font-size-13px\"\n                [style.borderColor]=\"data?.borderTable\"\n              >\n                <div class=\"d-flex align-items-center flex-gap-2 \">\n                  <div\n                    class=\"mr-auto font-size-13px flex-grow-1 cursor-pointer\"\n                    [style.color]=\"itemTable?.color\"\n                  >\n                    {{ itemTable?.value }}\n                  </div>\n                  <svg *ngIf=\"isEditView && itemTable?.isEditable\" class=\"svg-15px\" fill=\"#333333\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z\"/></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".asset-param-item{border-radius:5px}.asset-param-item .table-asset-param-wrapper{border-radius:5px;background-color:#f0f8ff}.asset-param-item .table-asset-param-wrapper table{border-collapse:collapse;width:100%}.asset-param-item .table-asset-param-wrapper table tbody tr td{border:1px solid red;height:30px;padding:4px}.asset-param-item .table-asset-param-wrapper table tbody tr td:first-child{width:30%}.asset-param-item .table-asset-param-wrapper table tbody tr td:last-child{width:70%}.color-white{color:#fff}.flex-gap-2{gap:.5rem}.svg-15px{width:15px;height:15px;flex:0 0 15px}\n"] }]
         }], propDecorators: { isEditView: [{
                 type: Input
             }], data: [{