@hestia-earth/ui-components 0.9.7 → 0.9.8

package/fesm2015/hestia-earth-ui-components.mjs

@@ -24,7 +24,7 @@ import { keyToLabel, isUndefined, isNumber, toPrecision, toDashCase, isBoolean,
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
 import { getDefaultModelId } from '@hestia-earth/glossary';
 import { __rest, __awaiter } from 'tslib';
-import { catchError, map, take, mergeAll, filter, toArray, mergeMap, debounceTime, distinctUntilChanged, tap, switchMap, reduce, distinct, groupBy } from 'rxjs/operators';
+import { catchError, map, take, mergeAll, filter, toArray, mergeMap, shareReplay, debounceTime, distinctUntilChanged, tap, switchMap, reduce, distinct, groupBy } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { DeltaDisplayType, delta, customDeltaFuncs } from '@hestia-earth/utils/dist/delta';
 import orderBy from 'lodash.orderby';
@@ -1538,6 +1538,8 @@ class HeEngineService {
         this.modelsLoading = false;
         this.modelsLoaded = false;
         this._models = new ReplaySubject(1);
+        this._recommendations = {};
+        this._requirements = {};
         this.init();
     }
     init() {
@@ -1581,15 +1583,27 @@ class HeEngineService {
             params: filterParams(params)
         }).toPromise();
     }
+    getRequirements$(params) {
+        const key = JSON.stringify(filterParams(params));
+        this._requirements[key] = this._requirements[key] ||
+            this.http.get(`${this._calculationsBaseUrl}/models/requirements`, {
+                params: filterParams(params)
+            }).pipe(shareReplay(1));
+        return this._requirements[key];
+    }
     getRequirements(params) {
-        return this.http.get(`${this._calculationsBaseUrl}/models/requirements`, {
-            params: filterParams(params)
-        }).toPromise();
+        return this.getRequirements$(params).toPromise();
+    }
+    getTermIds$(params) {
+        const key = JSON.stringify(filterParams(params));
+        this._recommendations[key] = this._recommendations[key] ||
+            this.http.get(`${this._calculationsBaseUrl}/models/term-ids`, {
+                params: filterParams(params)
+            }).pipe(shareReplay(1));
+        return this._recommendations[key];
     }
     getTermIds(params) {
-        return this.http.get(`${this._calculationsBaseUrl}/models/term-ids`, {
-            params: filterParams(params)
-        }).toPromise();
+        return this.getTermIds$(params).toPromise();
     }
     orchestratorConfigUrl(type) {
         const configUrl = gitHome + this._orchestratorBaseUrl.substring(this._orchestratorBaseUrl.indexOf('hestia-earth') + 'hestia-earth'.length);
@@ -1849,10 +1863,10 @@ class DataTableComponent {
     }
 }
 DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DataTableComponent, selector: "he-data-table", inputs: { minHeight: "minHeight", maxHeight: "maxHeight", nbRows: "nbRows", small: "small", height: "height", width: "width" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.is-small": "this.isSmall" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr th.has-border-right:after,:host ::ng-deep .table tbody tr td.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DataTableComponent, selector: "he-data-table", inputs: { minHeight: "minHeight", maxHeight: "maxHeight", nbRows: "nbRows", small: "small", height: "height", width: "width" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.is-small": "this.isSmall" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr th.has-border-right,:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th:first-child.has-border-right,:host ::ng-deep .table thead tr th.fixed-column.has-border-right,:host ::ng-deep .table tbody tr td:first-child.has-border-right,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep .table thead tr th:first-child.has-border-right:after,:host ::ng-deep .table thead tr th.fixed-column.has-border-right:after,:host ::ng-deep .table tbody tr td:first-child.has-border-right:after,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr:last-child th.has-border-right{box-shadow:inset 0 -1px #ffc000,inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr:last-child th:first-child.has-border-right:after,:host ::ng-deep .table thead tr:last-child th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #c4ae6c1a}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-data-table', template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr th.has-border-right:after,:host ::ng-deep .table tbody tr td.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] }]
+            args: [{ selector: 'he-data-table', template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr th.has-border-right,:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th:first-child.has-border-right,:host ::ng-deep .table thead tr th.fixed-column.has-border-right,:host ::ng-deep .table tbody tr td:first-child.has-border-right,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep .table thead tr th:first-child.has-border-right:after,:host ::ng-deep .table thead tr th.fixed-column.has-border-right:after,:host ::ng-deep .table tbody tr td:first-child.has-border-right:after,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr:last-child th.has-border-right{box-shadow:inset 0 -1px #ffc000,inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr:last-child th:first-child.has-border-right:after,:host ::ng-deep .table thead tr:last-child th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #c4ae6c1a}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { minHeight: [{
                 type: Input
             }], maxHeight: [{
@@ -2137,10 +2151,10 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small\" (click)=\"$event.stopPropagation(); active = false\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover{position:relative;display:inline-block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.75rem;padding:.4rem .8rem;color:#4a4a4a;background-color:#fff;border-radius:4px;box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#fff;border-left-color:#fff;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center;box-shadow:-1px 1px 2px #0a0a0a33}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block is-relative popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-popover', template: "<div class=\"is-inline-block popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small\" (click)=\"$event.stopPropagation(); active = false\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover{position:relative;display:inline-block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.75rem;padding:.4rem .8rem;color:#4a4a4a;background-color:#fff;border-radius:4px;box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#fff;border-left-color:#fff;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center;box-shadow:-1px 1px 2px #0a0a0a33}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"] }]
+            args: [{ selector: 'he-popover', template: "<div class=\"is-inline-block is-relative popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], content: [{
@@ -2163,6 +2177,10 @@ class PopoverConfirmComponent {
         this.confirmed.next(this.data);
         this.popover.active = false;
     }
+    get active() {
+        var _a;
+        return (_a = this.popover) === null || _a === void 0 ? void 0 : _a.active;
+    }
 }
 PopoverConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 PopoverConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: { message: "message", content: "content", position: "position", popoverClass: "popoverClass" }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<he-popover [message]=\"message\" [content]=\"content\" [data]=\"data\" [position]=\"position\" [class]=\"popoverClass\">\n  <ng-content></ng-content>\n\n  <ng-container actions>\n    <button class=\"button is-small is-primary mr-2\" (click)=\"$event.stopPropagation(); confirm()\">\n      <span>Confirm</span>\n    </button>\n  </ng-container>\n</he-popover>\n", styles: ["he-popover{height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "he-popover", inputs: ["message", "content", "data", "position"] }] });
@@ -6031,10 +6049,10 @@ class CyclesActivityComponent {
     }
 }
 CyclesActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\">Inputs</th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td>\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\"\n              [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\"\n              [attr.colspan]=\"products.length\"\n            >Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesActivityComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-activity', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\">Inputs</th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td>\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-activity', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\"\n              [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\"\n              [attr.colspan]=\"products.length\"\n            >Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -6288,10 +6306,10 @@ class CyclesEmissionsComponent {
     }
 }
 CyclesEmissionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesEmissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesEmissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-emissions', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -6423,10 +6441,10 @@ class CyclesPracticesComponent {
     }
 }
 CyclesPracticesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesPracticesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesPracticesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td>\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesPracticesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesPracticesComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-practices', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td>\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-practices', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -9626,10 +9644,10 @@ class ImpactAssessmentsProductsComponent {
     }
 }
 ImpactAssessmentsProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th></th>\n            <th></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+ImpactAssessmentsProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\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: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-products', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th></th>\n            <th></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-products', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { cycles: [{
                 type: Input
             }], impactAssessments: [{