@hestia-earth/ui-components 0.0.20 → 0.0.21

package/bundles/hestia-earth-ui-components.umd.js

@@ -5693,92 +5693,6 @@
                     type: i0.Input
                 }] } });
 
-    var MIN_TYPEAHEAD_LENGTH$2 = 1;
-    var CyclesSuggestFormComponent = /** @class */ (function () {
-        function CyclesSuggestFormComponent(formBuilder, nodeService, searchService) {
-            var _this = this;
-            this.formBuilder = formBuilder;
-            this.nodeService = nodeService;
-            this.searchService = searchService;
-            this.cycles = [];
-            this.cycleAdded = new i0.EventEmitter();
-            this.form = this.formBuilder.group({
-                search: ['', i1$2.Validators.required]
-            });
-            this.loading = false;
-            this.suggesting = false;
-            this.formatter = function (_b) {
-                var id = _b["@id"];
-                return id;
-            };
-            this.suggestCycle = function (text$) { return text$.pipe(operators.debounceTime(300), operators.distinctUntilChanged(), operators.tap(function () { return _this.suggesting = true; }), operators.switchMap(function (term) { return _this.suggest(term); }), operators.tap(function () { return _this.suggesting = false; })); };
-        }
-        CyclesSuggestFormComponent.prototype.suggest = function (term) {
-            return term.length < MIN_TYPEAHEAD_LENGTH$2 ?
-                rxjs.of([]) :
-                this.searchService.suggest(term, schema.NodeType.Cycle, [], {
-                    bool: {
-                        must: [
-                            matchType(schema.NodeType.Cycle),
-                            matchAggregatedQuery
-                        ],
-                        must_not: this.cycles.map(function (_b) {
-                            var id = _b["@id"];
-                            return matchExactQuery('@id', id);
-                        }),
-                        should: [
-                            matchPhraseQuery(term, 100, '@id', 'name'),
-                            matchPhrasePrefixQuery(term, 20, '@id', 'name'),
-                            matchBoolPrefixQuery(term, 10, '@id', 'name')
-                        ],
-                        minimum_should_match: 1
-                    }
-                }, 10, ['name', 'site.country.name', 'products.name', 'endDate']);
-        };
-        CyclesSuggestFormComponent.prototype.loadCycle = function (id) {
-            return this.nodeService.get({
-                '@type': schema.NodeType.Cycle,
-                '@id': id
-            }, false);
-        };
-        CyclesSuggestFormComponent.prototype.submit = function () {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                var id, cycle;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            this.loading = true;
-                            id = this.form.value.search["@id"];
-                            return [4 /*yield*/, this.loadCycle(id)];
-                        case 1:
-                            cycle = _b.sent();
-                            this.cycleAdded.emit(cycle);
-                            (_a = this.form.get('search')) === null || _a === void 0 ? void 0 : _a.setValue('');
-                            this.form.updateValueAndValidity();
-                            this.loading = false;
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        return CyclesSuggestFormComponent;
-    }());
-    CyclesSuggestFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesSuggestFormComponent, deps: [{ token: i1__namespace$4.FormBuilder }, { token: HeNodeService }, { token: HeSearchService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesSuggestFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesSuggestFormComponent, selector: "he-cycles-suggest-form", inputs: { cycles: "cycles" }, outputs: { cycleAdded: "cycleAdded" }, ngImport: i0__namespace, template: "<form class=\"mt-2\" [formGroup]=\"form\" (submit)=\"form.valid && submit()\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Compare with Aggregated Cycle</span>\n    </div>\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"suggesting || loading\">\n      <input class=\"input is-small\"\n        placeholder=\"Search by name or id\"\n        formControlName=\"search\" name=\"search\"\n\n        [ngbTypeahead]=\"suggestCycle\"\n        [inputFormatter]=\"formatter\"\n        [resultTemplate]=\"suggestion\"\n        [focusFirst]=\"true\"\n      >\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!(suggesting || loading)\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <div class=\"control\">\n      <button class=\"button is-small\" type=\"submit\" [disabled]=\"suggesting || loading\">\n        <fa-icon icon=\"plus\"></fa-icon>\n      </button>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestion let-cycle=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"cycle.site?.country?.name\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"cycle.site.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=\"cycle.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"cycle.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i10__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesSuggestFormComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'he-cycles-suggest-form',
-                        templateUrl: './cycles-suggest-form.component.html',
-                        styleUrls: ['./cycles-suggest-form.component.scss']
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$4.FormBuilder }, { type: HeNodeService }, { type: HeSearchService }]; }, propDecorators: { cycles: [{
-                    type: i0.Input
-                }], cycleAdded: [{
-                    type: i0.Output
-                }] } });
-
     var Tab;
     (function (Tab) {
         Tab["inputs"] = "Inputs";
@@ -5843,9 +5757,11 @@
         function CyclesActivityComponent() {
             this.originalValues = [];
             this.cycles = [];
+            this.selected = [];
             this.enableCompare = true;
             this.baseUrl = baseUrl();
             this.propertyValue = propertyValue$1;
+            this.defaultLabel = defaultLabel;
             this.showDownload = false;
             this.View = View$4;
             this.selectedView = View$4.table;
@@ -5879,21 +5795,13 @@
         CyclesActivityComponent.prototype.togglePopover = function (popover, context) {
             return popover.isOpen() ? popover.close() : popover.open(context);
         };
-        // Add from suggestion
-        CyclesActivityComponent.prototype.addCycle = function (cycle) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.cycles = __spreadArray(__spreadArray([], __read(this.cycles)), [
-                        cycle
-                    ]);
-                    return [2 /*return*/, this.update()];
-                });
-            });
+        CyclesActivityComponent.prototype.isSelected = function (cycle) {
+            return this.selected.length === 0 || this.selected.includes(cycle['@id']);
         };
         return CyclesActivityComponent;
     }());
     CyclesActivityComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesActivityComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesActivityComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{inputs.length + products.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngFor=\"let product of products\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span>{{product.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let input of inputs\"\n              [attr.title]=\"input.value.term.name\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span>{{input.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let product of products\"\n              [attr.title]=\"product.value.term.units\"\n            >{{product.value.term.units}}</th>\n            <th *ngFor=\"let input of inputs\"\n              [attr.title]=\"input.value.term.units\"\n            >{{input.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <td class=\"width-auto\" [attr.title]=\"cycle.name\">\n              <he-node-link [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{cycle.name || cycle.id}}</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\" *ngFor=\"let product of products\">\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\"\n                  [node]=\"product.value.values[cycle['@id']].nodes[0]\"\n                  key=\"value\"\n                ></he-blank-node-state>\n              </span>\n            </td>\n            <td class=\"is-nowrap\" *ngFor=\"let input of inputs\">\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\"\n                  [node]=\"input.value.values[cycle['@id']].nodes[0]\"\n                  key=\"value\"\n                ></he-blank-node-state>\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <he-cycles-suggest-form *ngIf=\"enableCompare\" [cycles]=\"cycles\" (cycleAdded)=\"addCycle($event)\"></he-cycles-suggest-form>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [original]=\"originalValues[0]\"\n    [recalculated]=\"cycles[0]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.inputs.', 'cycle.products.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesSuggestFormComponent, selector: "he-cycles-suggest-form", inputs: ["cycles"], outputs: ["cycleAdded"] }, { type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["original", "recalculated"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
+    CyclesActivityComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", selected: "selected", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{inputs.length + products.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngFor=\"let product of products\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span>{{product.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let input of inputs\"\n              [attr.title]=\"input.value.term.name\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span>{{input.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let product of products\"\n              [attr.title]=\"product.value.term.units\"\n            >{{product.value.term.units}}</th>\n            <th *ngFor=\"let input of inputs\"\n              [attr.title]=\"input.value.term.units\"\n            >{{input.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr *ngIf=\"isSelected(cycle)\">\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"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\" *ngFor=\"let product of products\">\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\"\n                    [node]=\"product.value.values[cycle['@id']].nodes[0]\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let input of inputs\">\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\"\n                    [node]=\"input.value.values[cycle['@id']].nodes[0]\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [original]=\"originalValues[0]\"\n    [recalculated]=\"cycles[0]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.inputs.', 'cycle.products.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["original", "recalculated"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesActivityComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5905,6 +5813,8 @@
                     type: i0.Input
                 }], cycles: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], dataState: [{
                     type: i0.Input
                 }], enableCompare: [{
@@ -5917,6 +5827,7 @@
     var CyclesCompletenessComponent = /** @class */ (function () {
         function CyclesCompletenessComponent() {
             this.cycles = [];
+            this.selected = [];
             this.baseUrl = baseUrl();
             this.defaultLabel = defaultLabel;
             this.keyToLabel = keyToLabel;
@@ -5932,10 +5843,13 @@
             enumerable: false,
             configurable: true
         });
+        CyclesCompletenessComponent.prototype.isSelected = function (cycle) {
+            return this.selected.length === 0 || this.selected.includes(cycle['@id']);
+        };
         return CyclesCompletenessComponent;
     }());
     CyclesCompletenessComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesCompletenessComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesCompletenessComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", dataState: "dataState" }, ngImport: i0__namespace, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <div class=\"table-container data-table-container mb-1\">\n    <table class=\"table is-narrow data-table has-children-{{cycles.length}}\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\"></th>\n          <th *ngFor=\"let completeness of completenessKeys\"\n            [attr.title]=\"completeness\"\n          ><a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">{{keyToLabel(completeness)}}</a></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n          <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n            <he-node-link [node]=\"cycle\">\n              <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n            </he-node-link>\n          </td>\n          <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n            <span>{{cycle.dataCompleteness[completeness] ? 'Complete' : 'Incomplete'}}</span>\n            <he-blank-node-state class=\"ml-1\"\n              [node]=\"cycle.dataCompleteness\"\n              [key]=\"completeness\"\n            ></he-blank-node-state>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n</div>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    CyclesCompletenessComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", selected: "selected", dataState: "dataState" }, ngImport: i0__namespace, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <div class=\"table-container data-table-container mb-1\">\n    <table class=\"table is-narrow data-table has-children-{{cycles.length}}\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\"></th>\n          <th *ngFor=\"let completeness of completenessKeys\"\n            [attr.title]=\"completeness\"\n          ><a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">{{keyToLabel(completeness)}}</a></th>\n        </tr>\n      </thead>\n      <tbody>\n        <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n          <tr *ngIf=\"isSelected(cycle)\">\n            <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n              <he-node-link [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n              </he-node-link>\n            </td>\n            <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n              <span>{{cycle.dataCompleteness[completeness] ? 'Complete' : 'Incomplete'}}</span>\n              <he-blank-node-state class=\"ml-1\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n  <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n</div>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesCompletenessComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5945,13 +5859,16 @@
                     }]
             }], propDecorators: { cycles: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], dataState: [{
                     type: i0.Input
                 }] } });
 
+    var isSelected$1 = function (selected, v) { return selected.length === 0 || selected.includes(v['@id']); };
     var cycleValue = function (cycle, values) { var _a; return (((_a = values[cycle['@id']]) === null || _a === void 0 ? void 0 : _a.nodes[0]) || { value: [0] }).value; };
-    var cycleName = function (cycle, index) { return index + 1 + ". " + cycle.name; };
-    var cycleDataset = function (values, termId) { return function (cycle, index) {
+    var cycleName = function (cycle, index) { return index + 1 + ". " + defaultLabel(cycle); };
+    var cycleDataset = function (values, termId, cycle, index) {
         var label = cycleName(cycle, index);
         var color = itemColor(index);
         var data = [propertyValue$1(cycleValue(cycle, values), termId)];
@@ -5962,10 +5879,11 @@
             backgroundColor: color,
             borderColor: color
         };
-    }; };
+    };
     var CyclesEmissionsChartComponent = /** @class */ (function () {
         function CyclesEmissionsChartComponent() {
             this.cycles = [];
+            this.selected = [];
             this.emissionPerCycle = {};
             this.terms = [];
         }
@@ -5976,15 +5894,20 @@
             if ('cycles' in changes && !changes.cycles.firstChange) {
                 return this.init();
             }
+            if ('selected' in changes && !changes.selected.firstChange) {
+                return this.init();
+            }
         };
         CyclesEmissionsChartComponent.prototype.init = function () {
-            this.emissionPerCycle = groupNodesByTerm(this.cycles, 'emissions');
+            var _this = this;
+            var cycles = this.cycles.filter(function (v) { return isSelected$1(_this.selected, v); });
+            this.emissionPerCycle = groupNodesByTerm(cycles, 'emissions');
             this.terms = Object.values(this.emissionPerCycle)
                 .filter(function (_d) {
                 var values = _d.values;
                 return Object.values(values).some(function (_d) {
                     var _e = __read(_d.nodes, 1), value = _e[0].value;
-                    return propertyValue$1(value) > 0;
+                    return propertyValue$1(value) >= 0;
                 });
             })
                 .map(function (_d) {
@@ -5995,11 +5918,14 @@
             return this.selectedTerm ? this.updateChart() : null;
         };
         CyclesEmissionsChartComponent.prototype.updateChart = function () {
+            var _this = this;
             var _a, _b, _c;
             var labels = [(_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''];
             var termId = this.selectedTerm['@id'];
             var values = this.emissionPerCycle[termId].values;
-            var datasets = this.cycles.map(cycleDataset(values, termId));
+            var datasets = this.cycles
+                .map(function (cycle, index) { return isSelected$1(_this.selected, cycle) ? cycleDataset(values, termId, cycle, index) : null; })
+                .filter(Boolean);
             if (this.chart) {
                 this.chart.destroy();
             }
@@ -6032,7 +5958,7 @@
         return CyclesEmissionsChartComponent;
     }());
     CyclesEmissionsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesEmissionsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    CyclesEmissionsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles", selected: "selected" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsChartComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6045,6 +5971,8 @@
                     args: ['chart']
                 }], cycles: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }] } });
 
     var CyclesEmissionsLogsComponent = /** @class */ (function () {
@@ -6126,14 +6054,13 @@
         function CyclesEmissionsComponent() {
             this.originalValues = [];
             this.cycles = [];
-            this.enableCompare = true;
+            this.selected = [];
             this.baseUrl = baseUrl();
             this.propertyValue = propertyValue$1;
-            this.itemColor = itemColor;
+            this.defaultLabel = defaultLabel;
             this.showDownload = false;
             this.View = View$3;
             this.selectedView = View$3.table;
-            this.selectedCycles = [];
             this.emissions = [];
         }
         CyclesEmissionsComponent.prototype.ngOnChanges = function (changes) {
@@ -6157,52 +6084,17 @@
         CyclesEmissionsComponent.prototype.update = function () {
             var emissionsPerCycle = groupNodesByTerm(this.cycles, 'emissions', this.originalValues);
             this.emissions = orderBy$3(grouppedKeys(emissionsPerCycle), ['value.methodTierOrder', 'key'], ['asc', 'asc']);
-            this.selectAllCycles();
         };
         CyclesEmissionsComponent.prototype.togglePopover = function (popover, context) {
             return popover.isOpen() ? popover.close() : popover.open(context);
         };
-        // Add from suggestion
-        CyclesEmissionsComponent.prototype.addCycle = function (cycle) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.cycles = __spreadArray(__spreadArray([], __read(this.cycles)), [
-                        cycle
-                    ]);
-                    return [2 /*return*/, this.update()];
-                });
-            });
-        };
-        // Cycle selection
-        CyclesEmissionsComponent.prototype.selectAllCycles = function () {
-            this.selectedCycles = this.cycles.slice();
-        };
-        CyclesEmissionsComponent.prototype.unselectAllCycles = function () {
-            this.selectedCycles = [];
-        };
-        CyclesEmissionsComponent.prototype.toggleAllCycles = function () {
-            return this.selectedCycles.length ? this.selectAllCycles() : this.unselectAllCycles();
-        };
-        CyclesEmissionsComponent.prototype.selectCycle = function (cycle) {
-            this.selectedCycles = __spreadArray(__spreadArray([], __read(this.selectedCycles)), [
-                cycle
-            ]);
-        };
-        CyclesEmissionsComponent.prototype.unselectCycle = function (index) {
-            this.selectedCycles.splice(index, 1);
-            this.selectedCycles = this.selectedCycles.slice();
-        };
-        CyclesEmissionsComponent.prototype.toggleCycle = function (cycle) {
-            var index = this.selectedCycles.indexOf(cycle);
-            return index >= 0 ? this.unselectCycle(index) : this.selectCycle(cycle);
-        };
         CyclesEmissionsComponent.prototype.isSelected = function (cycle) {
-            return this.selectedCycles.includes(cycle);
+            return this.selected.length === 0 || this.selected.includes(cycle['@id']);
         };
         return CyclesEmissionsComponent;
     }());
     CyclesEmissionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesEmissionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"emissions.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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-active]=\"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 && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{emissions.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngFor=\"let emission of emissions\"\n              [attr.title]=\"emission.value.term.name\"\n            >\n              <he-node-link [node]=\"emission.value.term\">\n                <span>{{emission.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let emission of emissions\"\n              [attr.title]=\"emission.value.term.units\"\n            >{{emission.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <td class=\"width-auto\" [attr.title]=\"cycle.name\" [style.border-left-color]=\"itemColor(i)\">\n              <label *ngIf=\"enableCompare\" class=\"is-inline-block checkbox\">\n                <input type=\"checkbox\" class=\"selector\"\n                  (change)=\"toggleCycle(cycle)\"\n                  [checked]=\"isSelected(cycle)\"\n                >\n              </label>\n              <he-node-link class=\"is-inline-block\" [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{cycle.name || cycle.id}}</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 emission of emissions\">\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\"\n                  [node]=\"emission.value.values[cycle['@id']].nodes[0]\"\n                  key=\"value\"\n                ></he-blank-node-state>\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n\n    <he-cycles-suggest-form *ngIf=\"enableCompare\" [cycles]=\"cycles\" (cycleAdded)=\"addCycle($event)\"></he-cycles-suggest-form>\n  </div>\n\n  <he-cycles-emissions-chart *ngIf=\"cycles.length > 1\" [class.is-hidden]=\"selectedView !== View.chart\"\n    [cycles]=\"selectedCycles\"\n  ></he-cycles-emissions-chart>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [cycle]=\"cycles[0]\"\n    [originalValues]=\"originalValues[0]?.emissions\"\n    [recalculatedValues]=\"cycles[0]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.emissions.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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: ["label.checkbox{width:20px}td he-node-link{width:160px}table.data-table td:first-child{border-left-width:8px}fa-icon{display:inline-block;width:10px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesSuggestFormComponent, selector: "he-cycles-suggest-form", inputs: ["cycles"], outputs: ["cycleAdded"] }, { type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
+    CyclesEmissionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", selected: "selected", dataState: "dataState" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"emissions.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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-active]=\"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 && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{emissions.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngFor=\"let emission of emissions\"\n              [attr.title]=\"emission.value.term.name\"\n            >\n              <he-node-link [node]=\"emission.value.term\">\n                <span>{{emission.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th>\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let emission of emissions\"\n              [attr.title]=\"emission.value.term.units\"\n            >{{emission.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr *ngIf=\"isSelected(cycle)\">\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"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 emission of emissions\">\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\"\n                    [node]=\"emission.value.values[cycle['@id']].nodes[0]\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </div>\n\n  <he-cycles-emissions-chart *ngIf=\"cycles.length > 1\" [class.is-hidden]=\"selectedView !== View.chart\"\n    [cycles]=\"cycles\" [selected]=\"selected\"\n  ></he-cycles-emissions-chart>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [cycle]=\"cycles[0]\"\n    [originalValues]=\"originalValues[0]?.emissions\"\n    [recalculatedValues]=\"cycles[0]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.emissions.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles", "selected"] }, { type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6214,9 +6106,9 @@
                     type: i0.Input
                 }], cycles: [{
                     type: i0.Input
-                }], dataState: [{
+                }], selected: [{
                     type: i0.Input
-                }], enableCompare: [{
+                }], dataState: [{
                     type: i0.Input
                 }] } });
 
@@ -6282,14 +6174,13 @@
         function CyclesPracticesComponent() {
             this.originalValues = [];
             this.cycles = [];
-            this.enableCompare = true;
+            this.selected = [];
             this.baseUrl = baseUrl();
             this.propertyValue = propertyValue$1;
-            this.itemColor = itemColor;
+            this.defaultLabel = defaultLabel;
             this.showDownload = false;
             this.View = View$2;
             this.selectedView = View$2.table;
-            this.selectedCycles = [];
             this.practices = [];
         }
         CyclesPracticesComponent.prototype.ngOnChanges = function (changes) {
@@ -6313,52 +6204,17 @@
         CyclesPracticesComponent.prototype.update = function () {
             var practicesPerCycle = groupNodesByTerm(this.cycles, 'practices', this.originalValues);
             this.practices = orderBy$2(grouppedKeys(practicesPerCycle), ['key'], ['asc']);
-            this.selectAllCycles();
         };
         CyclesPracticesComponent.prototype.togglePopover = function (popover, context) {
             return popover.isOpen() ? popover.close() : popover.open(context);
         };
-        // Add from suggestion
-        CyclesPracticesComponent.prototype.addCycle = function (cycle) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.cycles = __spreadArray(__spreadArray([], __read(this.cycles)), [
-                        cycle
-                    ]);
-                    return [2 /*return*/, this.update()];
-                });
-            });
-        };
-        // Cycle selection
-        CyclesPracticesComponent.prototype.selectAllCycles = function () {
-            this.selectedCycles = this.cycles.slice();
-        };
-        CyclesPracticesComponent.prototype.unselectAllCycles = function () {
-            this.selectedCycles = [];
-        };
-        CyclesPracticesComponent.prototype.toggleAllCycles = function () {
-            return this.selectedCycles.length ? this.selectAllCycles() : this.unselectAllCycles();
-        };
-        CyclesPracticesComponent.prototype.selectCycle = function (cycle) {
-            this.selectedCycles = __spreadArray(__spreadArray([], __read(this.selectedCycles)), [
-                cycle
-            ]);
-        };
-        CyclesPracticesComponent.prototype.unselectCycle = function (index) {
-            this.selectedCycles.splice(index, 1);
-            this.selectedCycles = this.selectedCycles.slice();
-        };
-        CyclesPracticesComponent.prototype.toggleCycle = function (cycle) {
-            var index = this.selectedCycles.indexOf(cycle);
-            return index >= 0 ? this.unselectCycle(index) : this.selectCycle(cycle);
-        };
         CyclesPracticesComponent.prototype.isSelected = function (cycle) {
-            return this.selectedCycles.includes(cycle);
+            return this.selected.length === 0 || this.selected.includes(cycle['@id']);
         };
         return CyclesPracticesComponent;
     }());
     CyclesPracticesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesPracticesComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesPracticesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"practices.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{practices.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></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>{{practice.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></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            >{{practice.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <td class=\"width-auto\" [attr.title]=\"cycle.name\" [style.border-left-color]=\"itemColor(i)\">\n              <label *ngIf=\"enableCompare\" class=\"is-inline-block checkbox\">\n                <input type=\"checkbox\" class=\"selector\"\n                  (change)=\"toggleCycle(cycle)\"\n                  [checked]=\"isSelected(cycle)\"\n                >\n              </label>\n              <he-node-link class=\"is-inline-block\" [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{cycle.name || cycle.id}}</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\"\n                  [node]=\"practice.value.values[cycle['@id']].nodes[0]\"\n                  key=\"value\"\n                ></he-blank-node-state>\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n\n    <he-cycles-suggest-form *ngIf=\"enableCompare\" [cycles]=\"cycles\" (cycleAdded)=\"addCycle($event)\"></he-cycles-suggest-form>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [cycle]=\"cycles[0]\"\n    [originalValues]=\"originalValues[0]?.practices\"\n    [recalculatedValues]=\"cycles[0]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.practices.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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: ["label.checkbox{width:20px}td he-node-link{width:160px}table.data-table td:first-child{border-left-width:8px}fa-icon{display:inline-block;width:10px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesSuggestFormComponent, selector: "he-cycles-suggest-form", inputs: ["cycles"], outputs: ["cycleAdded"] }, { type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
+    CyclesPracticesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", selected: "selected", dataState: "dataState" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"practices.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && cycles.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{practices.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></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>{{practice.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></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            >{{practice.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr *ngIf=\"isSelected(cycle)\">\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"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\"\n                    [node]=\"practice.value.values[cycle['@id']].nodes[0]\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [cycle]=\"cycles[0]\"\n    [originalValues]=\"originalValues[0]?.practices\"\n    [recalculatedValues]=\"cycles[0]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"cycle-practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['cycle.id', 'cycle.@id', 'cycle.practices.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesPracticesComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6370,15 +6226,16 @@
                     type: i0.Input
                 }], cycles: [{
                     type: i0.Input
-                }], dataState: [{
+                }], selected: [{
                     type: i0.Input
-                }], enableCompare: [{
+                }], dataState: [{
                     type: i0.Input
                 }] } });
 
     var CyclesResultComponent = /** @class */ (function () {
         function CyclesResultComponent() {
             this.cycles = [];
+            this.selected = [];
         }
         CyclesResultComponent.prototype.ngAfterViewInit = function () {
             chart_js.Chart.scaleService.updateScaleDefaults('category', {
@@ -6392,14 +6249,27 @@
             if ('cycles' in changes && !changes.cycles.firstChange) {
                 return this.init();
             }
+            if ('selected' in changes && !changes.selected.firstChange) {
+                return this.init();
+            }
+        };
+        CyclesResultComponent.prototype.isSelected = function (cycle) {
+            return this.selected.length === 0 || this.selected.includes(cycle['@id']);
         };
         CyclesResultComponent.prototype.init = function () {
             var _this = this;
-            var labels = this.cycles.map(function (_b, index) {
-                var name = _b.name;
-                return index + 1 + ". " + name;
+            var labels = this.cycles
+                .map(function (cycle, index) { return ({ cycle: cycle, index: index }); })
+                .filter(function (_b) {
+                var cycle = _b.cycle;
+                return _this.isSelected(cycle);
+            })
+                .map(function (_b) {
+                var cycle = _b.cycle, index = _b.index;
+                return index + 1 + ". " + defaultLabel(cycle);
             });
-            var productsPerCycle = groupNodesByTerm(this.cycles, 'products');
+            var cycles = this.cycles.filter(function (v) { return _this.isSelected(v); });
+            var productsPerCycle = groupNodesByTerm(cycles, 'products');
             var datasets = Object.values(productsPerCycle).map(function (_b, index) {
                 var _c = _b.term, name = _c.name, units = _c.units, termId = _c["@id"], values = _b.values;
                 var color = itemColor(index);
@@ -6408,7 +6278,7 @@
                     backgroundColor: color,
                     borderColor: color,
                     barPercentage: 0.5,
-                    data: _this.cycles.map(function (_b) {
+                    data: cycles.map(function (_b) {
                         var id = _b["@id"];
                         return values[id] ? propertyValue$1(values[id].value, termId) : 0;
                     })
@@ -6460,7 +6330,7 @@
         return CyclesResultComponent;
     }());
     CyclesResultComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesResultComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesResultComponent, selector: "he-cycles-result", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"chart-container\">\n  <canvas #chart>{{chart}}</canvas>\n</div>\n", styles: [":host{display:block}.chart-container{height:100%;min-height:300px;position:relative}\n"] });
+    CyclesResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesResultComponent, selector: "he-cycles-result", inputs: { cycles: "cycles", selected: "selected" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"chart-container\">\n  <canvas #chart>{{chart}}</canvas>\n</div>\n", styles: [":host{display:block}.chart-container{height:100%;min-height:300px;position:relative}\n"] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesResultComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6473,6 +6343,8 @@
                     args: ['chart']
                 }], cycles: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }] } });
 
     var components$3 = [
@@ -6485,8 +6357,7 @@
         CyclesFunctionalUnitMeasureComponent,
         CyclesPracticesComponent,
         CyclesPracticesLogsComponent,
-        CyclesResultComponent,
-        CyclesSuggestFormComponent
+        CyclesResultComponent
     ];
     var HeCyclesModule = /** @class */ (function () {
         function HeCyclesModule() {
@@ -6503,8 +6374,7 @@
             CyclesFunctionalUnitMeasureComponent,
             CyclesPracticesComponent,
             CyclesPracticesLogsComponent,
-            CyclesResultComponent,
-            CyclesSuggestFormComponent], imports: [i6.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule,
+            CyclesResultComponent], imports: [i6.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule,
             HeCommonModule,
             HeNodeModule], exports: [CyclesActivityComponent,
             CyclesActivityLogsComponent,
@@ -6515,8 +6385,7 @@
             CyclesFunctionalUnitMeasureComponent,
             CyclesPracticesComponent,
             CyclesPracticesLogsComponent,
-            CyclesResultComponent,
-            CyclesSuggestFormComponent] });
+            CyclesResultComponent] });
     HeCyclesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: HeCyclesModule, imports: [[
                 i6.CommonModule, i1$2.FormsModule, i1$2.ReactiveFormsModule,
                 HeCommonModule,
@@ -6663,7 +6532,7 @@
         },
         _f['must contain as many items as values'] = function (_f) {
             var params = _f.params, dataPath = _f.dataPath;
-            return "The number of " + dataPath.split('.').pop() + " must match the number of values.\n    Currently there are " + (params === null || params === void 0 ? void 0 : params.current) + " dates but " + (params === null || params === void 0 ? void 0 : params.expected) + " values.";
+            return "The number of " + code(dataPath.split('.').pop()) + " must match the number of " + code('value') + ".\n    Currently there are " + (params === null || params === void 0 ? void 0 : params.current) + " " + code(dataPath.split('.').pop()) + " but " + (params === null || params === void 0 ? void 0 : params.expected) + " " + code('value') + ".";
         },
         _f['is too generic'] = function (_f) {
             var params = _f.params;
@@ -7414,19 +7283,19 @@
         }); }));
     };
 
-    var isSite = function (_a) {
-        var type = _a["@type"], id = _a["@id"];
+    var isSite = function (_b) {
+        var type = _b["@type"], id = _b["@id"];
         return type === schema.NodeType.Site && !!id;
     };
-    var siteLocation = function (_a) {
-        var latitude = _a.latitude, longitude = _a.longitude;
+    var siteLocation = function (_b) {
+        var latitude = _b.latitude, longitude = _b.longitude;
         return latitude && longitude ? ({
             lat: latitude,
             lng: longitude
         }) : undefined;
     };
-    var siteDefaultLocation = function (_a) {
-        var region = _a.region, country = _a.country;
+    var siteDefaultLocation = function (_b) {
+        var region = _b.region, country = _b.country;
         var markers = [
             region ? createMarker(termLocation(region), termLocationName(region).name, undefined, 20) : undefined,
             country ? createMarker(termLocation(country), termLocationName(country).name, undefined, 40) : undefined
@@ -7434,12 +7303,12 @@
         return (markers.length ? markers[0] : undefined);
     };
     var siteMarker = function (site) { return createMarker(site ? siteLocation(site) : undefined, site.name); };
-    var sitePolygon = function (_a) {
-        var boundary = _a.boundary;
+    var sitePolygon = function (_b) {
+        var boundary = _b.boundary;
         return (boundary ? polygonsFromFeature(boundary) : undefined);
     };
-    var regions = function (sites) { return utils.unique(sites.map(function (_a) {
-        var country = _a.country, region = _a.region;
+    var regions = function (sites) { return utils.unique(sites.map(function (_b) {
+        var country = _b.country, region = _b.region;
         return region ? region['@id'] : (country ? country['@id'] : null);
     }).filter(Boolean)); };
     var defaultCenter = { lat: 0, lng: 0 };
@@ -7449,6 +7318,7 @@
             this.loaded = false;
             this.loadPolygons = true;
             this.sites = [];
+            this.selected = [];
             this.nodes = [];
             this.center = defaultCenter;
             this.zoom = 2;
@@ -7466,25 +7336,28 @@
         SitesMapsComponent.prototype.ngAfterViewInit = function () {
             return this.googleLoaded && this.loadData();
         };
+        SitesMapsComponent.prototype.isSelected = function (site) {
+            return this.selected.length === 0 || this.selected.includes(site['@id']);
+        };
         SitesMapsComponent.prototype.loadData = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var sites, markers, polygons, termPolygons;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             // loaded data as geojson
                             this.map.googleMap.data.setStyle(function () { return (Object.assign(Object.assign({}, strokeStyle), { strokeOpacity: 0.1 })); });
                             return [4 /*yield*/, this.getSites()];
                         case 1:
-                            sites = _a.sent();
+                            sites = _b.sent();
                             markers = this.addSiteMarkers(sites);
                             polygons = sites.flatMap(sitePolygon).filter(Boolean);
                             polygons.map(function (polygon) { return polygon === null || polygon === void 0 ? void 0 : polygon.setMap(_this.map.googleMap); });
                             this.loaded = true;
                             return [4 /*yield*/, Promise.all(regions(sites).map(function (v) { return _this.addTermsPolygons(v); }))];
                         case 2:
-                            termPolygons = (_a.sent()).flat();
+                            termPolygons = (_b.sent()).flat();
                             this.showNoLocation = markers.length === 0 && polygons.length === 0 && termPolygons.length === 0;
                             return [2 /*return*/, markers.length ?
                                     this.centerMarker(markers[0]) :
@@ -7502,19 +7375,19 @@
         };
         SitesMapsComponent.prototype.addTermsPolygons = function (id) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.loadPolygons) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.termPolygons(id)];
                         case 1:
-                            _a = _b.sent();
+                            _b = _c.sent();
                             return [3 /*break*/, 3];
                         case 2:
-                            _a = [];
-                            _b.label = 3;
-                        case 3: return [2 /*return*/, _a];
+                            _b = [];
+                            _c.label = 3;
+                        case 3: return [2 /*return*/, _b];
                     }
                 });
             });
@@ -7542,82 +7415,83 @@
         };
         SitesMapsComponent.prototype.loadSite = function (node) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!('schemaVersion' in node)) return [3 /*break*/, 1];
-                            _a = node;
+                            _b = node;
                             return [3 /*break*/, 3];
                         case 1: return [4 /*yield*/, this.nodeService.get(node)];
                         case 2:
-                            _a = _b.sent();
-                            _b.label = 3;
+                            _b = _c.sent();
+                            _c.label = 3;
                         case 3: 
                         // means the site was already downloaded
-                        return [2 /*return*/, _a];
+                        return [2 /*return*/, _b];
                     }
                 });
             });
         };
         SitesMapsComponent.prototype.siteData = function (node) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, _c, _d;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var _b, _c, _d, _e;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             if (![
                                 schema.NodeType.Site,
                                 schema.NodeType.Organisation
                             ].includes(node.type)) return [3 /*break*/, 1];
-                            _a = node;
+                            _b = node;
                             return [3 /*break*/, 7];
                         case 1:
                             if (!isSite(node)) return [3 /*break*/, 2];
-                            _b = this.loadSite(node);
+                            _c = this.loadSite(node);
                             return [3 /*break*/, 6];
                         case 2:
                             if (!('site' in node && isSite(node.site))) return [3 /*break*/, 3];
-                            _c = this.loadSite(node.site);
+                            _d = this.loadSite(node.site);
                             return [3 /*break*/, 5];
                         case 3:
-                            _d = this.siteData;
+                            _e = this.siteData;
                             return [4 /*yield*/, this.loadSite(node)];
                         case 4:
-                            _c = _d.apply(this, [_e.sent()]);
-                            _e.label = 5;
+                            _d = _e.apply(this, [_f.sent()]);
+                            _f.label = 5;
                         case 5:
-                            _b = (_c);
-                            _e.label = 6;
+                            _c = (_d);
+                            _f.label = 6;
                         case 6:
-                            _a = (_b);
-                            _e.label = 7;
-                        case 7: return [2 /*return*/, _a];
+                            _b = (_c);
+                            _f.label = 7;
+                        case 7: return [2 /*return*/, _b];
                     }
                 });
             });
         };
         SitesMapsComponent.prototype.getSites = function () {
             var _this = this;
-            var nodes = this.sites && this.sites.length ? this.sites : this.nodes;
+            var _a;
+            var nodes = ((_a = this.sites) === null || _a === void 0 ? void 0 : _a.length) ? this.sites.filter(function (site) { return _this.isSelected(site); }) : this.nodes;
             return Promise.all(nodes.map(function (node) { return _this.siteData(node); }));
         };
         SitesMapsComponent.prototype.termPolygons = function (id) {
             return __awaiter(this, void 0, void 0, function () {
                 var data, polygons, _err_1;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
+                            _b.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, this.nodeService.downloadRaw(baseUrl() + "/gadm/" + id + ".geojson")];
                         case 1:
-                            data = _a.sent();
+                            data = _b.sent();
                             polygons = polygonsFromFeature(data);
                             polygons.map(function (polygon) { return polygon.setMap(_this.map.googleMap); });
                             return [2 /*return*/, polygons];
                         case 2:
-                            _err_1 = _a.sent();
+                            _err_1 = _b.sent();
                             // ignore error if the file does not exist
                             return [2 /*return*/, []];
                         case 3: return [2 /*return*/];
@@ -7628,7 +7502,7 @@
         return SitesMapsComponent;
     }());
     SitesMapsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMapsComponent, deps: [{ token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SitesMapsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: i1$4.GoogleMap, descendants: true }], ngImport: i0__namespace, template: "<google-map *ngIf=\"googleLoaded\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"\n></google-map>\n\n<p *ngIf=\"showNotice\" class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n\n<div class=\"no-location has-text-center has-text-light\" *ngIf=\"showNoLocation\">\n  <span>No precise location data</span>\n</div>\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"], components: [{ type: i1__namespace$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    SitesMapsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", selected: "selected", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: i1$4.GoogleMap, descendants: true }], ngImport: i0__namespace, template: "<google-map *ngIf=\"googleLoaded\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"\n></google-map>\n\n<p *ngIf=\"showNotice\" class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n\n<div class=\"no-location has-text-center has-text-light\" *ngIf=\"showNoLocation\">\n  <span>No precise location data</span>\n</div>\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"], components: [{ type: i1__namespace$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMapsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7643,6 +7517,8 @@
                     type: i0.Input
                 }], sites: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], nodes: [{
                     type: i0.Input
                 }], center: [{
@@ -7750,6 +7626,7 @@
         function SitesMeasurementsComponent() {
             this.originalValues = [];
             this.sites = [];
+            this.selected = [];
             this.showDownload = false;
             this.View = View$1;
             this.selectedView = View$1.table;
@@ -7791,10 +7668,13 @@
             enumerable: false,
             configurable: true
         });
+        SitesMeasurementsComponent.prototype.isSelected = function (site) {
+            return this.selected.length === 0 || this.selected.includes(site['@id']);
+        };
         return SitesMeasurementsComponent;
     }());
     SitesMeasurementsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMeasurementsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SitesMeasurementsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", dataState: "dataState" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"measurements.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && sites.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{measurements.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.name\"\n            >\n              <he-node-link [node]=\"measurement.value.term\">\n                <span>{{measurement.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.units\"\n            >{{measurement.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <td class=\"width-auto\" [attr.title]=\"defaultLabel(site)\">\n              <he-node-link [node]=\"site\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(site)}}</span>\n              </he-node-link>\n            </td>\n            <td class=\"is-nowrap\" *ngFor=\"let measurement of measurements\">\n              <span *ngIf=\"measurement.value.values[site['@id']]\"\n                class=\"trigger-popover\"\n                [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                (click)=\"togglePopover(p, { data: measurement.value.values[site['@id']], site: site, key: 'measurements' })\"\n              >\n                <span pointer>{{measurementValue(measurement.value.values[site['@id']], measurement.value.term['@id']) | precision:3 | default:'-'}}</span>\n                <he-blank-node-state class=\"ml-1\"\n                  [node]=\"measurement.value.values[site['@id']].nodes[0]\"\n                  key=\"value\"\n                ></he-blank-node-state>\n              </span>\n              <span *ngIf=\"!measurement.value.values[site['@id']]\">\n                <span>-</span>\n                <sup class=\"pl-1\" *ngIf=\"siteTooBig(site)\">(1)</sup>\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <p class=\"is-size-7 is-italic\" *ngIf=\"showAreaTooBig\">\n      (1) This region is >{{maxAreaSize}}km2 and is too large to reliably gap fill Measurements.\n    </p>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [site]=\"sites[0]\"\n    [originalValues]=\"originalValues[0].measurements\"\n    [recalculatedValues]=\"sites[0].measurements\"\n  ></he-sites-measurements-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"sites\" filename=\"site-measurements.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['site.id', 'site.@id', 'site.measurements.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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=\"site\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
+    SitesMeasurementsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", selected: "selected", dataState: "dataState" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"measurements.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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=\"!isOriginal && sites.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{measurements.length}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.name\"\n            >\n              <he-node-link [node]=\"measurement.value.term\">\n                <span>{{measurement.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.units\"\n            >{{measurement.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr *ngIf=\"isSelected(site)\">\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(site)\">\n                <he-node-link [node]=\"site\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(site)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let measurement of measurements\">\n                <span *ngIf=\"measurement.value.values[site['@id']]\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: measurement.value.values[site['@id']], site: site, key: 'measurements' })\"\n                >\n                  <span pointer>{{measurementValue(measurement.value.values[site['@id']], measurement.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\"\n                    [node]=\"measurement.value.values[site['@id']].nodes[0]\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n                <span *ngIf=\"!measurement.value.values[site['@id']]\">\n                  <span>-</span>\n                  <sup class=\"pl-1\" *ngIf=\"siteTooBig(site)\">(1)</sup>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <p class=\"is-size-7 is-italic\" *ngIf=\"showAreaTooBig\">\n      (1) This region is >{{maxAreaSize}}km2 and is too large to reliably gap fill Measurements.\n    </p>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [site]=\"sites[0]\"\n    [originalValues]=\"originalValues[0].measurements\"\n    [recalculatedValues]=\"sites[0].measurements\"\n  ></he-sites-measurements-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"sites\" filename=\"site-measurements.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"['site.id', 'site.@id', 'site.measurements.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\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=\"site\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{node.name}}</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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMeasurementsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7806,6 +7686,8 @@
                     type: i0.Input
                 }], sites: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], dataState: [{
                     type: i0.Input
                 }] } });
@@ -8282,7 +8164,7 @@
         return FilesFormComponent;
     }());
     FilesFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, deps: [{ token: i0__namespace.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"property.schema?.description\" [autoClose]=\"'outside'\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n          <label class=\"label has-text-right-tablet has-text-ellipsis\"\n            *bindOnce=\"property\"\n            [for]=\"property.id\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n            </ng-container>\n          </label>\n        </div>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"'Duplicate ' + pluralize(property.key, 1)\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"'Remove ' + pluralize(property.key, 1)\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <button class=\"button is-dark is-outlined is-small\" type=\"button\"\n                *ngIf=\"editable && !errorsEditable\"\n                (click)=\"addArrayGroup(property)\"\n              >\n                <fa-icon icon=\"plus-circle\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n                <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n              </button>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"propertySuggest(property.fullKey, property.suggestions?.type)\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <he-popover-confirm class=\"control\"\n    *ngIf=\"enableAddError(property)\"\n    position=\"left\"\n    [content]=\"popupErrorForm\"\n    (confirmed)=\"addError(property, $event)\"\n  >\n    <span class=\"button is-small\">\n      <fa-icon icon=\"comments\"></fa-icon>\n    </span>\n  </he-popover-confirm>\n\n  <ng-container *ngIf=\"editable && property.editable\">\n    <ng-container [ngSwitch]=\"property.schemaType\">\n      <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n        <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *bindOnce=\"property\">\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n  </ng-container>\n  <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n    <a class=\"button is-small is-danger\" title=\"Add field\"\n      (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n    >\n      <fa-icon icon=\"plus-circle\"></fa-icon>\n      <span class=\"pl-2\">Add</span>\n    </a>\n  </div>\n  <div class=\"control\" *ngIf=\"isRequired(property)\">\n    <label class=\"button is-small is-danger\" [for]=\"property.id\"\n      ngbTooltip=\"This field is required\" placement=\"top\"\n    >\n      <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n    </label>\n  </div>\n  <ng-container *ngIf=\"property.externalUrl?.url\">\n    <div class=\"control\">\n      <a class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{'is-dark is-outlined': property.key === 'type'}\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n      >\n        <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n      </a>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"unitConverterEnabled(property)\">\n    <div class=\"control\">\n      <button class=\"button is-small\" title=\"Open calculator\"\n        [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n        triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n        (click)=\"openUnitConverter(p, property)\"\n      >\n        <fa-icon icon=\"calculator\"></fa-icon>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"suggestNewProperty(property.fullKey)\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatter\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { type: i10__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i10__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe } });
+    FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<he-maps-drawing-confirm *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\" [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"\n></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"\n></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <span\n    class=\"trigger-popover\"\n    [ngbPopover]=\"property.schema?.description\" [autoClose]=\"'outside'\"\n    triggers=\"hover\" placement=\"right\" container=\"body\"\n  >\n    <span>{{property.key}}</span>\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{property.key}}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  <ng-container *ngIf=\"(isOpen || property.closedVisible) && !property.isHidden\">\n    <div class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\"\n      [ngSwitch]=\"!!property.properties.length\"\n    >\n      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n          <label class=\"label has-text-right-tablet has-text-ellipsis\"\n            *bindOnce=\"property\"\n            [for]=\"property.id\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"property.schema?.description && editable && property.editable ? labelDescription : labelDefault; context: {$implicit: property}\">\n            </ng-container>\n          </label>\n        </div>\n\n        <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n          <div class=\"field\">\n            <ng-container *ngTemplateOutlet=\"inputForm; context: {$implicit: property}\"></ng-container>\n\n            <ng-container *ngIf=\"(editable || errorsEditable) && (property.hasError || property.hasWarning)\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: false}\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"panel\" *ngSwitchCase=\"true\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\"\n      >\n        <div class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\" pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\"\n        >\n          <div class=\"columns is-mobile is-vcentered\">\n            <span class=\"column is-narrow py-1 my-0\">\n              <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!property.isOpen\"></fa-icon>\n              <fa-icon icon=\"angle-right\" [class.is-hidden]=\"property.isOpen\"></fa-icon>\n            </span>\n            <span class=\"column py-1 my-0\">\n              <span class=\"is-size-6\">{{property.key}}</span>\n            </span>\n            <span *ngIf=\"property.schemaType\" class=\"column is-narrow py-1 my-0\">\n              <span class=\"tags mb-0 has-addons\">\n                <span class=\"tag mb-0 is-light\">Type</span>\n                <span class=\"tag mb-0 is-white\">\n                  <he-schema-version-link linkClass=\"is-small\" [node]=\"{'@type': property.schemaType}\">\n                    <span>{{property.schemaType}}</span>\n                  </he-schema-version-link>\n                </span>\n              </span>\n            </span>\n            <he-popover-confirm class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\" placement=\"top\"\n              [message]=\"'<p>This will remove the group completely.</p>' + (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') + '<p>Do you confirm?</p>'\"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\"\n            >\n              <fa-icon icon=\"times\" size=\"sm\"></fa-icon>\n            </he-popover-confirm>\n          </div>\n        </div>\n        <div class=\"panel-block is-block p-0\" *ngIf=\"property.isOpen\">\n          <ng-container [ngSwitch]=\"property.isArray\">\n            <div class=\"px-3 pt-4\" *ngIf=\"property.error\">\n              <ng-container *ngTemplateOutlet=\"propertyError; context: {property: property, edit: true}\"></ng-container>\n            </div>\n\n            <div class=\"mt-3\" *ngSwitchCase=\"false\">\n              <p class=\"help py-1 px-2\" *ngIf=\"editable && !property.editable\">\n                To change the {{property.key}}, please delete it first, then add the field again\n              </p>\n              <ng-container *ngIf=\"editable && property.editable\">\n                <ng-container [ngSwitch]=\"property.schema?.title\">\n                  <p class=\"help py-1 px-2\" *ngSwitchCase=\"'Bibliography'\">\n                    Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                  </p>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: property}\"></ng-container>\n\n              <div class=\"px-3 mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <div class=\"property-group py-2 px-3 mt-2\">\n                <div class=\"columns is-multiline mb-0\">\n                  <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                    <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop2}\"></ng-container>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"py-2 px-3 mt-2\" *ngSwitchCase=\"true\">\n              <div class=\"mt-1\" *ngIf=\"errorsEditable\">\n                <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: property}\"></ng-container>\n              </div>\n\n              <ng-container *ngFor=\"let prop2 of property.properties; trackBy: trackByProperty\">\n                <div class=\"card p-0 my-4\" *ngIf=\"prop2.key\"\n                  [id]=\"prop2.fullKey + '_' + prop2.id\"\n                >\n                  <div class=\"property-array-number\">\n                    <div class=\"tags has-addons\">\n                      <span class=\"tag is-dark\">{{prop2.key}}</span>\n                      <ng-container *ngIf=\"editable && !errorsEditable && property.editable\">\n                        <span class=\"tag is-info\" pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"'Duplicate ' + pluralize(property.key, 1)\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span class=\"tag is-light\" pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\" placement=\"top\"\n                        >\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm class=\"tag is-delete\"\n                          [ngbTooltip]=\"'Remove ' + pluralize(property.key, 1)\" placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\" position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"\n                        ></he-popover-confirm>\n                      </ng-container>\n                    </div>\n                  </div>\n\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: prop2}\"></ng-container>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"errorsEditable\">\n                    <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: prop2}\"></ng-container>\n                  </div>\n\n                  <div class=\"px-4 mt-2\" *ngIf=\"prop2.error\">\n                    <ng-container *ngTemplateOutlet=\"propertyError; context: {property: prop2, edit: true}\"></ng-container>\n                  </div>\n\n                  <div class=\"property-group card-content p-3\">\n                    <div class=\"columns is-multiline my-0\">\n                      <ng-container *ngFor=\"let prop3 of prop2.properties; trackBy: trackByProperty\">\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: prop3}\"></ng-container>\n                      </ng-container>\n                    </div>\n                  </div>\n                </div>\n              </ng-container>\n\n              <button class=\"button is-dark is-outlined is-small\" type=\"button\"\n                *ngIf=\"editable && !errorsEditable\"\n                (click)=\"addArrayGroup(property)\"\n              >\n                <fa-icon icon=\"plus-circle\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n                <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n              </button>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"propertySuggest(property.fullKey, property.suggestions?.type)\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <he-popover-confirm class=\"control\"\n    *ngIf=\"enableAddError(property)\"\n    position=\"left\"\n    [content]=\"popupErrorForm\"\n    (confirmed)=\"addError(property, $event)\"\n  >\n    <span class=\"button is-small\">\n      <fa-icon icon=\"comments\"></fa-icon>\n    </span>\n  </he-popover-confirm>\n\n  <ng-container *ngIf=\"editable && property.editable\">\n    <ng-container [ngSwitch]=\"property.schemaType\">\n      <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n        <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *bindOnce=\"property\">\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n  </ng-container>\n  <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n    <a class=\"button is-small is-danger\" title=\"Add field\"\n      (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n    >\n      <fa-icon icon=\"plus-circle\"></fa-icon>\n      <span class=\"pl-2\">Add</span>\n    </a>\n  </div>\n  <div class=\"control\" *ngIf=\"isRequired(property)\">\n    <label class=\"button is-small is-danger\" [for]=\"property.id\"\n      ngbTooltip=\"This field is required\" placement=\"top\"\n    >\n      <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n    </label>\n  </div>\n  <ng-container *ngIf=\"property.externalUrl?.url\">\n    <div class=\"control\">\n      <a class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{'is-dark is-outlined': property.key === 'type'}\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n      >\n        <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n      </a>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"unitConverterEnabled(property)\">\n    <div class=\"control\">\n      <button class=\"button is-small\" title=\"Open calculator\"\n        [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n        triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n        (click)=\"openUnitConverter(p, property)\"\n      >\n        <fa-icon icon=\"calculator\"></fa-icon>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"suggestNewProperty(property.fullKey)\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatter\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "selected", "nodes", "center", "zoom", "showNotice"] }, { type: i10__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i10__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8532,9 +8414,10 @@
                     type: i0.Input
                 }] } });
 
+    var isSelected = function (selected, v) { return selected.length === 0 || selected.includes(v['@id']); };
     var impactValue = function (impact, values) { var _a; return (((_a = values[impact['@id']]) === null || _a === void 0 ? void 0 : _a.nodes[0]) || { value: 0 }).value; };
     var impactName = function (impact, index) { return index + 1 + ". " + defaultLabel(impact); };
-    var impactAssessmentDataset = function (values) { return function (impact, index) {
+    var impactAssessmentDataset = function (values, impact, index) {
         var label = impactName(impact, index);
         var color = itemColor(index);
         var data = [impactValue(impact, values)];
@@ -8545,10 +8428,11 @@
             backgroundColor: color,
             borderColor: color
         };
-    }; };
+    };
     var ImpactAssessmentsIndicatorsChartComponent = /** @class */ (function () {
         function ImpactAssessmentsIndicatorsChartComponent() {
             this.impactAssessments = [];
+            this.selected = [];
             this.key = 'impacts';
             this.indicatorPerImpactAssessment = {};
             this.terms = [];
@@ -8560,6 +8444,9 @@
             if ('impactAssessments' in changes && !changes.impactAssessments.firstChange) {
                 return this.init();
             }
+            if ('selected' in changes && !changes.selected.firstChange) {
+                return this.init();
+            }
         };
         ImpactAssessmentsIndicatorsChartComponent.prototype.termAllowed = function (term) {
             var _a;
@@ -8567,13 +8454,14 @@
         };
         ImpactAssessmentsIndicatorsChartComponent.prototype.init = function () {
             var _this = this;
-            this.indicatorPerImpactAssessment = groupNodesByTerm(this.impactAssessments, this.key);
+            var impacts = this.impactAssessments.filter(function (v) { return isSelected(_this.selected, v); });
+            this.indicatorPerImpactAssessment = groupNodesByTerm(impacts, this.key);
             this.terms = Object.values(this.indicatorPerImpactAssessment)
                 .filter(function (_d) {
                 var term = _d.term, values = _d.values;
                 return _this.termAllowed(term) && Object.values(values).some(function (_d) {
                     var _e = __read(_d.nodes, 1), value = _e[0].value;
-                    return value > 0;
+                    return value >= 0;
                 });
             })
                 .map(function (_d) {
@@ -8581,17 +8469,20 @@
                 return term;
             });
             this.selectedTerm = this.terms.includes(this.selectedTerm) ? this.selectedTerm : this.terms[0];
-            return this.selectedTerm ? this.updateCharts() : null;
+            return this.selectedTerm ? this.updateChart() : null;
         };
-        ImpactAssessmentsIndicatorsChartComponent.prototype.updateBarChart = function () {
+        ImpactAssessmentsIndicatorsChartComponent.prototype.updateChart = function () {
+            var _this = this;
             var _a, _b, _c;
             var labels = [(_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''];
             var values = this.indicatorPerImpactAssessment[this.selectedTerm['@id']].values;
-            var datasets = this.impactAssessments.map(impactAssessmentDataset(values));
-            if (this.barChart) {
-                this.barChart.destroy();
+            var datasets = this.impactAssessments
+                .map(function (impact, index) { return isSelected(_this.selected, impact) ? impactAssessmentDataset(values, impact, index) : null; })
+                .filter(Boolean);
+            if (this.chart) {
+                this.chart.destroy();
             }
-            this.barChart = new chart_js.Chart((_c = this.barChartRef) === null || _c === void 0 ? void 0 : _c.nativeElement, {
+            this.chart = new chart_js.Chart((_c = this.chartRef) === null || _c === void 0 ? void 0 : _c.nativeElement, {
                 type: 'bar',
                 data: {
                     labels: labels,
@@ -8617,47 +8508,10 @@
                 }
             });
         };
-        ImpactAssessmentsIndicatorsChartComponent.prototype.updatePieChart = function () {
-            var _a, _b, _c;
-            var values = this.indicatorPerImpactAssessment[this.selectedTerm['@id']].values;
-            var labels = this.impactAssessments.map(impactName);
-            var colors = this.impactAssessments.map(listColor);
-            var data = this.impactAssessments.map(function (impact) { return impactValue(impact, values); });
-            var datasets = [{
-                    label: (_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
-                    data: data,
-                    backgroundColor: colors,
-                    hoverOffset: 4
-                }];
-            if (this.pieChart) {
-                this.pieChart.destroy();
-            }
-            this.pieChart = new chart_js.Chart((_c = this.pieChartRef) === null || _c === void 0 ? void 0 : _c.nativeElement, {
-                type: 'pie',
-                data: {
-                    labels: labels,
-                    datasets: datasets
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    legend: {
-                        display: false
-                    },
-                    layout: {
-                        padding: 0
-                    }
-                }
-            });
-        };
-        ImpactAssessmentsIndicatorsChartComponent.prototype.updateCharts = function () {
-            this.updateBarChart();
-            this.updatePieChart();
-        };
         return ImpactAssessmentsIndicatorsChartComponent;
     }());
     ImpactAssessmentsIndicatorsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ImpactAssessmentsIndicatorsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "barChartRef", first: true, predicate: ["barChart"], descendants: true }, { propertyName: "pieChartRef", first: true, predicate: ["pieChart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateCharts()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"columns h-100\">\n      <div class=\"column is-12 chart-container\">\n        <canvas #barChart></canvas>\n      </div>\n      <div class=\"column is-4 chart-container is-hidden\">\n        <canvas #pieChart></canvas>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    ImpactAssessmentsIndicatorsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", selected: "selected", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8665,14 +8519,13 @@
                         templateUrl: './impact-assessments-indicators-chart.component.html',
                         styleUrls: ['./impact-assessments-indicators-chart.component.scss']
                     }]
-            }], propDecorators: { barChartRef: [{
-                    type: i0.ViewChild,
-                    args: ['barChart']
-                }], pieChartRef: [{
+            }], propDecorators: { chartRef: [{
                     type: i0.ViewChild,
-                    args: ['pieChart']
+                    args: ['chart']
                 }], impactAssessments: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], key: [{
                     type: i0.Input
                 }], filterTermTypes: [{
@@ -8763,42 +8616,25 @@
         View["logs"] = "logs";
     })(View || (View = {}));
     var ImpactAssessmentsProductsComponent = /** @class */ (function () {
-        function ImpactAssessmentsProductsComponent(formBuilder, nodeService, searchService, toastService) {
-            var _this = this;
-            this.formBuilder = formBuilder;
+        function ImpactAssessmentsProductsComponent(nodeService) {
             this.nodeService = nodeService;
-            this.searchService = searchService;
-            this.toastService = toastService;
             this.dataStateValues = {};
             this.impactAssessments = [];
+            this.selected = [];
             this.key = 'impacts';
-            this.enableCompare = true;
             this.enableFilterMethodModel = false;
+            this.loading = false;
             this.propertyValue = propertyValue$1;
-            this.itemColor = itemColor;
             this.baseUrl = baseUrl();
             this.showDownload = false;
             this.View = View;
             this.selectedView = View.table;
             this.methodModels = [];
             this.indicators = [];
-            // Adding impacts to compare
-            this.form = this.formBuilder.group({
-                search: ['', i1$2.Validators.required]
-            });
-            this.selectedImpactAssessments = [];
-            this.loading = false;
-            this.suggesting = false;
-            this.formatter = function (_b) {
-                var id = _b["@id"];
-                return id;
-            };
-            this.suggestImpactAssessment = function (text$) { return text$.pipe(operators.debounceTime(300), operators.distinctUntilChanged(), operators.tap(function () { return _this.suggesting = true; }), operators.switchMap(function (term) { return _this.suggest(term); }), operators.tap(function () { return _this.suggesting = false; })); };
         }
         ImpactAssessmentsProductsComponent.prototype.ngOnChanges = function (changes) {
             if ('impactAssessments' in changes) {
                 this.dataStateValues[this.dataState] = changes.impactAssessments.currentValue.slice();
-                this.selectAllImpacts();
                 return this.update();
             }
             if ('dataState' in changes) {
@@ -8900,6 +8736,9 @@
             enumerable: false,
             configurable: true
         });
+        ImpactAssessmentsProductsComponent.prototype.isSelected = function (impact) {
+            return this.selected.length === 0 || this.selected.includes(impact['@id']);
+        };
         // Recalculation logs
         ImpactAssessmentsProductsComponent.prototype.showRecalculationLogs = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -8919,122 +8758,10 @@
                 });
             });
         };
-        // Compare
-        ImpactAssessmentsProductsComponent.prototype.selectAllImpacts = function () {
-            this.selectedImpactAssessments = this.impactAssessments.slice();
-        };
-        ImpactAssessmentsProductsComponent.prototype.unselectAllImpacts = function () {
-            this.selectedImpactAssessments = [];
-        };
-        ImpactAssessmentsProductsComponent.prototype.toggleAllImpacts = function () {
-            return this.selectedImpactAssessments.length ? this.selectAllImpacts() : this.unselectAllImpacts();
-        };
-        ImpactAssessmentsProductsComponent.prototype.selectImpact = function (impact) {
-            this.selectedImpactAssessments = __spreadArray(__spreadArray([], __read(this.selectedImpactAssessments)), [
-                impact
-            ]);
-        };
-        ImpactAssessmentsProductsComponent.prototype.unselectImpact = function (index) {
-            this.selectedImpactAssessments.splice(index, 1);
-            this.selectedImpactAssessments = this.selectedImpactAssessments.slice();
-        };
-        ImpactAssessmentsProductsComponent.prototype.toggleImpact = function (impact) {
-            var index = this.selectedImpactAssessments.indexOf(impact);
-            return index >= 0 ? this.unselectImpact(index) : this.selectImpact(impact);
-        };
-        ImpactAssessmentsProductsComponent.prototype.isSelected = function (impact) {
-            return this.selectedImpactAssessments.includes(impact);
-        };
-        ImpactAssessmentsProductsComponent.prototype.suggest = function (term) {
-            return term.length < MIN_TYPEAHEAD_LENGTH ?
-                rxjs.of([]) :
-                this.searchService.suggest(term, schema.NodeType.ImpactAssessment, [], {
-                    bool: {
-                        must: [
-                            matchType(schema.NodeType.ImpactAssessment),
-                            matchAggregatedQuery
-                        ],
-                        must_not: this.impactAssessments.map(function (_b) {
-                            var id = _b["@id"];
-                            return matchExactQuery('@id', id);
-                        }),
-                        should: [
-                            matchPhraseQuery(term, 100, '@id', 'name', 'cycle.name'),
-                            matchPhrasePrefixQuery(term, 20, '@id', 'name', 'cycle.name'),
-                            matchBoolPrefixQuery(term, 10, '@id', 'name', 'cycle.name')
-                        ],
-                        minimum_should_match: 1
-                    }
-                }, 10, ['cycle.name', 'country.name', 'product.name', 'endDate']);
-        };
-        ImpactAssessmentsProductsComponent.prototype.loadImpact = function (id) {
-            return __awaiter(this, void 0, void 0, function () {
-                var impact, _b, _c, _d, _e, _f;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
-                        case 0: return [4 /*yield*/, this.nodeService.get({
-                                '@type': schema.NodeType.ImpactAssessment,
-                                '@id': id,
-                                dataState: api.DataState.recalculated
-                            }, false)];
-                        case 1:
-                            impact = _g.sent();
-                            if (!impact['@id']) return [3 /*break*/, 3];
-                            _d = (_c = Object).assign;
-                            _e = [Object.assign({}, impact)];
-                            _f = {};
-                            return [4 /*yield*/, this.fetchCycle(impact)];
-                        case 2:
-                            _b = _d.apply(_c, _e.concat([(_f.cycle = _g.sent(), _f)]));
-                            return [3 /*break*/, 4];
-                        case 3:
-                            _b = null;
-                            _g.label = 4;
-                        case 4: return [2 /*return*/, _b];
-                    }
-                });
-            });
-        };
-        ImpactAssessmentsProductsComponent.prototype.fetchCycle = function (_b) {
-            var cycle = _b.cycle;
-            return !cycle || cycle.name ? cycle : this.nodeService.get({
-                '@type': schema.NodeType.Cycle,
-                '@id': cycle['@id']
-            });
-        };
-        ImpactAssessmentsProductsComponent.prototype.addImpact = function () {
-            var _a;
-            return __awaiter(this, void 0, void 0, function () {
-                var _b, id, name, impact;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            this.loading = true;
-                            _b = this.form.value.search, id = _b["@id"], name = _b.name;
-                            return [4 /*yield*/, this.loadImpact(id)];
-                        case 1:
-                            impact = _c.sent();
-                            if (impact) {
-                                this.impactAssessments = __spreadArray(__spreadArray([], __read(this.impactAssessments)), [
-                                    impact
-                                ]);
-                                this.selectImpact(impact);
-                            }
-                            else {
-                                this.toastService.error("Error while loading " + (name || id));
-                            }
-                            this.loading = false;
-                            (_a = this.form.get('search')) === null || _a === void 0 ? void 0 : _a.setValue('');
-                            this.form.updateValueAndValidity();
-                            return [2 /*return*/, this.update()];
-                    }
-                });
-            });
-        };
         return ImpactAssessmentsProductsComponent;
     }());
-    ImpactAssessmentsProductsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsProductsComponent, deps: [{ token: i1__namespace$4.FormBuilder }, { token: HeNodeService }, { token: HeSearchService }, { token: HeToastService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ImpactAssessmentsProductsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", enableCompare: "enableCompare", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"indicators.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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-active]=\"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-active]=\"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 && impactAssessments.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\" *bindOnce=\"indicators\">\n      <table class=\"table is-narrow data-table has-children-{{indicators.length + 1}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\">\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 *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span>{{indicator.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit:</a>\n              <span class=\"pl-1\">1 kg</span>\n            </th>\n            <th>Product</th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n            >{{indicator.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <td class=\"width-auto\" [attr.title]=\"impactName(impactAssessment)\" [style.border-left-color]=\"itemColor(i)\">\n              <label *ngIf=\"enableCompare\" class=\"is-inline-block checkbox\">\n                <input type=\"checkbox\" class=\"selector\"\n                  (change)=\"toggleImpact(impactAssessment)\"\n                  [checked]=\"isSelected(impactAssessment)\"\n                >\n              </label>\n              <he-node-link class=\"is-inline-block\" [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?.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\"\n                  [node]=\"indicator.value.values[impactAssessment['@id']].nodes[0]\"\n                  key=\"value\"\n                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                ></he-blank-node-state>\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <form *ngIf=\"enableCompare\" class=\"mt-2\" [formGroup]=\"form\" (submit)=\"form.valid && addImpact()\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static\">Compare with Aggregated Impact Assessment</span>\n        </div>\n        <div class=\"control is-expanded\" [class.has-icons-right]=\"suggesting || loading\">\n          <input class=\"input is-small\"\n            placeholder=\"Search by name or id\"\n            formControlName=\"search\" name=\"search\"\n\n            [ngbTypeahead]=\"suggestImpactAssessment\"\n            [inputFormatter]=\"formatter\"\n            [resultTemplate]=\"suggestion\"\n            [focusFirst]=\"true\"\n          >\n          <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!(suggesting || loading)\">\n            <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n          </span>\n        </div>\n        <div class=\"control\">\n          <button class=\"button is-small\" type=\"submit\" [disabled]=\"suggesting || loading\">\n            <fa-icon icon=\"plus\"></fa-icon>\n          </button>\n        </div>\n      </div>\n    </form>\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=\"impactAssessments.length > 1\" [class.is-hidden]=\"selectedView !== View.chart\"\n    [key]=\"key\"\n    [impactAssessments]=\"selectedImpactAssessments\"\n    [filterTermTypes]=\"filterTermTypes\"\n  ></he-impact-assessments-indicators-chart>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[0]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[0][key]\"\n    [recalculatedValues]=\"impactAssessments[0][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=\"panel-block\">\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: ["label.checkbox{width:20px}td he-node-link{width:160px}table.data-table td:first-child{border-left-width:8px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { type: i10__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
+    ImpactAssessmentsProductsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsProductsComponent, deps: [{ token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImpactAssessmentsProductsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", selected: "selected", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"indicators.length; else emptyTable\">\n  <div class=\"columns is-variable is-2 m-0\">\n    <div class=\"column is-hidden-mobile\"></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-active]=\"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-active]=\"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-active]=\"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 && impactAssessments.length === 1\">\n          <button class=\"button is-small\" [class.is-active]=\"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    <div class=\"has-text-right mb-2\">\n      <button class=\"button is-dark is-outlined is-small\" (click)=\"showDownload = true\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download (CSV)</span>\n      </button>\n    </div>\n\n    <div class=\"table-container data-table-container mb-1\">\n      <table class=\"table is-narrow data-table has-children-{{indicators.length + 1}}\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\">\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 *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span>{{indicator.value.term.name | ellipsis:30}}</span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit:</a>\n              <span class=\"pl-1\">1 kg</span>\n            </th>\n            <th>Product</th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n            >{{indicator.value.term.units}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr *ngIf=\"isSelected(impactAssessment)\">\n              <td class=\"width-auto\" [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?.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\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].nodes[0]\"\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    </div>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\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=\"impactAssessments.length > 1\" [class.is-hidden]=\"selectedView !== View.chart\"\n    [key]=\"key\"\n    [impactAssessments]=\"impactAssessments\" [selected]=\"selected\"\n    [filterTermTypes]=\"filterTermTypes\"\n  ></he-impact-assessments-indicators-chart>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedView === View.logs && !isOriginal\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[0]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[0][key]\"\n    [recalculatedValues]=\"impactAssessments[0][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=\"panel-block\">\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}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }, { type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "selected", "key", "filterTermTypes"] }, { type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { type: i10__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], pipes: { "ellipsis": EllipsisPipe, "default": DefaultPipe, "precision": PrecisionPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsProductsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9042,16 +8769,16 @@
                         templateUrl: './impact-assessments-products.component.html',
                         styleUrls: ['./impact-assessments-products.component.scss']
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$4.FormBuilder }, { type: HeNodeService }, { type: HeSearchService }, { type: HeToastService }]; }, propDecorators: { cycles: [{
+            }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { cycles: [{
                     type: i0.Input
                 }], impactAssessments: [{
                     type: i0.Input
+                }], selected: [{
+                    type: i0.Input
                 }], key: [{
                     type: i0.Input
                 }], dataState: [{
                     type: i0.Input
-                }], enableCompare: [{
-                    type: i0.Input
                 }], filterTermTypes: [{
                     type: i0.Input
                 }], enableFilterMethodModel: [{
@@ -9160,7 +8887,6 @@
     exports.CyclesPracticesComponent = CyclesPracticesComponent;
     exports.CyclesPracticesLogsComponent = CyclesPracticesLogsComponent;
     exports.CyclesResultComponent = CyclesResultComponent;
-    exports.CyclesSuggestFormComponent = CyclesSuggestFormComponent;
     exports.DefaultPipe = DefaultPipe;
     exports.EllipsisPipe = EllipsisPipe;
     exports.FilesFormComponent = FilesFormComponent;