@hestia-earth/ui-components 0.9.6 → 0.9.8

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

@@ -4,16 +4,16 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i3$1 from '@angular/router';
+import * as i3$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i5 from '@ng-bootstrap/ng-bootstrap';
+import * as i3$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTypeaheadModule, NgbTooltipModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i1$3 from '@angular/google-maps';
 import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
 import * as i3 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faClone, faCircle, faIdBadge } from '@fortawesome/free-regular-svg-icons';
-import { faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCircle as faCircle$1, faClipboard, faClipboardList, faClone as faClone$1, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faPlus, faPlusCircle, faSearch, faSeedling, faSpellCheck, faSpinner, faTable, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCircle as faCircle$1, faClipboard, faClipboardList, faClone as faClone$1, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faPlus, faPlusCircle, faSearch, faSeedling, faSortAmountUpAlt, faSpellCheck, faSpinner, faTable, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';
 import get from 'lodash.get';
 import { getColor } from 'random-material-color';
 import { SchemaType, isExpandable, TermTermType, EmissionMethodTier, NodeType, productTermTermType, nestedSearchableKeys, SCHEMA_VERSION, sortKeysByType, isTypeNode, CycleFunctionalUnit, SiteSiteType, isTypeValid, typeToSchemaType } from '@hestia-earth/schema';
@@ -24,7 +24,7 @@ import { keyToLabel, isUndefined, isNumber, toPrecision, toDashCase, isBoolean,
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
 import { getDefaultModelId } from '@hestia-earth/glossary';
 import { __rest, __awaiter } from 'tslib';
-import { catchError, map, take, mergeAll, filter, toArray, mergeMap, debounceTime, distinctUntilChanged, tap, switchMap, reduce, distinct, groupBy } from 'rxjs/operators';
+import { catchError, map, take, mergeAll, filter, toArray, mergeMap, shareReplay, debounceTime, distinctUntilChanged, tap, switchMap, reduce, distinct, groupBy } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { DeltaDisplayType, delta, customDeltaFuncs } from '@hestia-earth/utils/dist/delta';
 import orderBy from 'lodash.orderby';
@@ -33,8 +33,8 @@ import { json2csvAsync } from 'json-2-csv';
 import * as i4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { headersFromCsv, toCsv as toCsv$2, toJson } from '@hestia-earth/schema-convert';
-import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
 import { recommendedProperties } from '@hestia-earth/json-schema';
+import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
 import { create, formatters } from 'jsondiffpatch';
 import omit from 'lodash.omit';
 import set from 'lodash.set';
@@ -70,7 +70,7 @@ class HeFontawesomeModule {
         // free-regular
         faClone, faCircle, faIdBadge, 
         // free-solid
-        faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCircle$1, faClipboard, faClipboardList, faClone$1, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faPlus, faPlusCircle, faSearch, faSeedling, faSpellCheck, faSpinner, faTable, faTimes, faUser);
+        faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCircle$1, faClipboard, faClipboardList, faClone$1, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faPlus, faPlusCircle, faSearch, faSeedling, faSortAmountUpAlt, faSpellCheck, faSpinner, faTable, faTimes, faUser);
     }
 }
 HeFontawesomeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: HeFontawesomeModule, deps: [{ token: i3.FaIconLibrary }], target: i0.ɵɵFactoryTarget.NgModule });
@@ -333,6 +333,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             args: [{ selector: 'he-toast', template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  <div class=\"notification is-{{toast.color}}\" role=\"alert\" *ngFor=\"let toast of toasts\">\n    <button class=\"delete\" aria-label=\"delete\" (click)=\"dismiss(toast)\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n    <strong [ngSwitch]=\"toast.color\">\n      <ng-container *ngSwitchCase=\"'danger'\">\n        <ng-container [ngSwitch]=\"toast.message\">\n          <span *ngSwitchCase=\"'Unauthorized'\">You are not allowed to perform this action.</span>\n          <span *ngSwitchCase=\"'form-invalid'\">Please fix all the errors on this page.</span>\n          <span *ngSwitchCase=\"'users-email-already-taken'\">Email already taken.</span>\n          <span *ngSwitchCase=\"'users-auth-already-taken'\">Account already connected.</span>\n          <span *ngSwitchDefault>\n            <span *ngIf=\"toast.showRawMessage\">{{toast.message}}</span>\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <span *ngIf=\"toast.showRawMessage\">{{toast.message}}</span>\n        <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n      </ng-container>\n    </strong>\n  </div>\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: HeToastService }]; } });
 
+/**
+ * Resolves issue with Typeahead bindings.
+ *
+ * @see: https://github.com/ng-bootstrap/ng-bootstrap/issues/4055#issuecomment-1192885359
+ */
+class ApplyPurePipe {
+    transform(templateValue, fnReference, ...fnArguments) {
+        fnArguments.unshift(templateValue);
+        return fnReference.apply(null, fnArguments);
+    }
+}
+ApplyPurePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ApplyPurePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ApplyPurePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: ApplyPurePipe, name: "applyPure" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ApplyPurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'applyPure',
+                    pure: true
+                }]
+        }] });
+
 /* eslint-disable @angular-eslint/directive-selector */
 class BindOnceDirective {
     constructor(templateRef, viewContainerRef) {
@@ -1138,6 +1159,7 @@ const components$8 = [
     IssueConfirmComponent,
     SocialTagsComponent,
     ToastComponent,
+    ApplyPurePipe,
     BindOnceDirective,
     ClickOutsideDirective,
     CompoundDirective,
@@ -1155,6 +1177,7 @@ HeCommonLightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 HeCommonLightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.8", ngImport: i0, type: HeCommonLightModule, declarations: [IssueConfirmComponent,
         SocialTagsComponent,
         ToastComponent,
+        ApplyPurePipe,
         BindOnceDirective,
         ClickOutsideDirective,
         CompoundDirective,
@@ -1168,6 +1191,7 @@ HeCommonLightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         HeFontawesomeModule], exports: [HeFontawesomeModule, IssueConfirmComponent,
         SocialTagsComponent,
         ToastComponent,
+        ApplyPurePipe,
         BindOnceDirective,
         ClickOutsideDirective,
         CompoundDirective,
@@ -1367,16 +1391,6 @@ class HeNodeService {
             .toPromise()
             .catch(() => (responseType === 'json' ? ({}) : ''));
     }
-    getDeepRelations(_a, params) {
-        var { dataState } = _a, node = __rest(_a, ["dataState"]);
-        return this.http
-            .get(`${this.nodeUrl(node)}/deep-relations`, {
-            headers: this.authService.headers,
-            params: filterParams(params)
-        })
-            .toPromise()
-            .catch(handleAPIError);
-    }
     nodeTypeUrl(type) {
         return nodeTypeUrl(this.commonService.apiBaseUrl, type);
     }
@@ -1524,6 +1538,8 @@ class HeEngineService {
         this.modelsLoading = false;
         this.modelsLoaded = false;
         this._models = new ReplaySubject(1);
+        this._recommendations = {};
+        this._requirements = {};
         this.init();
     }
     init() {
@@ -1567,15 +1583,27 @@ class HeEngineService {
             params: filterParams(params)
         }).toPromise();
     }
+    getRequirements$(params) {
+        const key = JSON.stringify(filterParams(params));
+        this._requirements[key] = this._requirements[key] ||
+            this.http.get(`${this._calculationsBaseUrl}/models/requirements`, {
+                params: filterParams(params)
+            }).pipe(shareReplay(1));
+        return this._requirements[key];
+    }
     getRequirements(params) {
-        return this.http.get(`${this._calculationsBaseUrl}/models/requirements`, {
-            params: filterParams(params)
-        }).toPromise();
+        return this.getRequirements$(params).toPromise();
+    }
+    getTermIds$(params) {
+        const key = JSON.stringify(filterParams(params));
+        this._recommendations[key] = this._recommendations[key] ||
+            this.http.get(`${this._calculationsBaseUrl}/models/term-ids`, {
+                params: filterParams(params)
+            }).pipe(shareReplay(1));
+        return this._recommendations[key];
     }
     getTermIds(params) {
-        return this.http.get(`${this._calculationsBaseUrl}/models/term-ids`, {
-            params: filterParams(params)
-        }).toPromise();
+        return this.getTermIds$(params).toPromise();
     }
     orchestratorConfigUrl(type) {
         const configUrl = gitHome + this._orchestratorBaseUrl.substring(this._orchestratorBaseUrl.indexOf('hestia-earth') + 'hestia-earth'.length);
@@ -1764,7 +1792,7 @@ class ClipboardComponent {
     }
 }
 ClipboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ClipboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ClipboardComponent, selector: "he-clipboard", inputs: { value: "value", disabled: "disabled", hideText: "hideText", icon: "icon", size: "size", rotate: "rotate", clipboardClass: "clipboardClass" }, viewQueries: [{ propertyName: "valueNode", first: true, predicate: ["valueNode"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["t"], descendants: true }], ngImport: i0, template: "<span #valueNode [class.is-hidden]=\"hideText\">{{value}}</span>\n\n<span [class]=\"clipboardClass\" pointer (click)=\"!disabled && onClick($event)\"\n  ngbTooltip=\"Copied!\" triggers=\"manual\" placement=\"bottom\" container=\"body\" #t=\"ngbTooltip\"\n>\n  <fa-icon [icon]=\"icon || defaultIcon\" [size]=\"size\" [rotate]=\"rotate\"></fa-icon>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ClipboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ClipboardComponent, selector: "he-clipboard", inputs: { value: "value", disabled: "disabled", hideText: "hideText", icon: "icon", size: "size", rotate: "rotate", clipboardClass: "clipboardClass" }, viewQueries: [{ propertyName: "valueNode", first: true, predicate: ["valueNode"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["t"], descendants: true }], ngImport: i0, template: "<span #valueNode [class.is-hidden]=\"hideText\">{{value}}</span>\n\n<span [class]=\"clipboardClass\" pointer (click)=\"!disabled && onClick($event)\"\n  ngbTooltip=\"Copied!\" triggers=\"manual\" placement=\"bottom\" container=\"body\" #t=\"ngbTooltip\"\n>\n  <fa-icon [icon]=\"icon || defaultIcon\" [size]=\"size\" [rotate]=\"rotate\"></fa-icon>\n</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ClipboardComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-clipboard', template: "<span #valueNode [class.is-hidden]=\"hideText\">{{value}}</span>\n\n<span [class]=\"clipboardClass\" pointer (click)=\"!disabled && onClick($event)\"\n  ngbTooltip=\"Copied!\" triggers=\"manual\" placement=\"bottom\" container=\"body\" #t=\"ngbTooltip\"\n>\n  <fa-icon [icon]=\"icon || defaultIcon\" [size]=\"size\" [rotate]=\"rotate\"></fa-icon>\n</span>\n" }]
@@ -1835,10 +1863,10 @@ class DataTableComponent {
     }
 }
 DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DataTableComponent, selector: "he-data-table", inputs: { minHeight: "minHeight", maxHeight: "maxHeight", nbRows: "nbRows", small: "small", height: "height", width: "width" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.is-small": "this.isSmall" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table th:not(.width-auto):not(.fixed-column),:host ::ng-deep .table td:not(.width-auto):not(.fixed-column){text-align:center}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table thead tr th{border-bottom:0;box-shadow:inset 0 -2px #ededed;top:0;z-index:11}:host ::ng-deep .table thead tr th.has-border-right{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #ededed}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{border-right:0;box-shadow:inset -2px 0 #ededed;left:0;z-index:12;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table tbody tr td:first-child{z-index:10}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td:nth-child(even) td{background-color:#f5f5f5}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fafafa}:host ::ng-deep .table.is-striped tbody td{border-bottom:0}:host ::ng-deep .table.is-narrow{font-size:12px}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}\n"] });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: DataTableComponent, selector: "he-data-table", inputs: { minHeight: "minHeight", maxHeight: "maxHeight", nbRows: "nbRows", small: "small", height: "height", width: "width" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.is-small": "this.isSmall" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr th.has-border-right,:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th:first-child.has-border-right,:host ::ng-deep .table thead tr th.fixed-column.has-border-right,:host ::ng-deep .table tbody tr td:first-child.has-border-right,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep .table thead tr th:first-child.has-border-right:after,:host ::ng-deep .table thead tr th.fixed-column.has-border-right:after,:host ::ng-deep .table tbody tr td:first-child.has-border-right:after,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr:last-child th.has-border-right{box-shadow:inset 0 -1px #ffc000,inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr:last-child th:first-child.has-border-right:after,:host ::ng-deep .table thead tr:last-child th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #c4ae6c1a}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-data-table', template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table th:not(.width-auto):not(.fixed-column),:host ::ng-deep .table td:not(.width-auto):not(.fixed-column){text-align:center}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table thead tr th{border-bottom:0;box-shadow:inset 0 -2px #ededed;top:0;z-index:11}:host ::ng-deep .table thead tr th.has-border-right{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #ededed}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{border-right:0;box-shadow:inset -2px 0 #ededed;left:0;z-index:12;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table tbody tr td:first-child{z-index:10}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{box-shadow:inset 0 -2px #ededed,inset -2px 0 #ededed}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td{background-color:#fafafa}:host ::ng-deep .table.is-hoverable.is-striped tbody tr:not(.is-selected):hover td:nth-child(even) td{background-color:#f5f5f5}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fafafa}:host ::ng-deep .table.is-striped tbody td{border-bottom:0}:host ::ng-deep .table.is-narrow{font-size:12px}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}\n"] }]
+            args: [{ selector: 'he-data-table', template: "<div class=\"data-table-holder\"\n  [style.height]=\"height\"\n  [style.width]=\"width\"\n>\n  <div class=\"data-table-content\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n  >\n    <div class=\"table-container\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{overflow:hidden;position:relative;z-index:1}:host .data-table-content{position:absolute;top:0;left:0;z-index:1}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep .table-container{overflow:auto!important;width:100%;height:100%}:host ::ng-deep .table{width:100%}:host ::ng-deep .table th,:host ::ng-deep .table td{border:none;height:42px;white-space:nowrap}:host ::ng-deep .table th span:first-child,:host ::ng-deep .table td span:first-child{display:inline-block;max-width:100%}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table .fixed-column{position:sticky}:host ::ng-deep .table tbody tr td{z-index:10}:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{z-index:11}:host ::ng-deep .table thead tr th{top:0;z-index:12}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column{z-index:13}:host ::ng-deep .table thead tr th.has-border-right,:host ::ng-deep .table tbody tr td.has-border-right{box-shadow:inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{left:0;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th:first-child,:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td:first-child,:host ::ng-deep .table tbody tr td.fixed-column{max-width:120px;width:120px}}:host ::ng-deep .table thead tr th:first-child.has-border-right,:host ::ng-deep .table thead tr th.fixed-column.has-border-right,:host ::ng-deep .table tbody tr td:first-child.has-border-right,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep .table thead tr th:first-child.has-border-right:after,:host ::ng-deep .table thead tr th.fixed-column.has-border-right:after,:host ::ng-deep .table tbody tr td:first-child.has-border-right:after,:host ::ng-deep .table tbody tr td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #c4ae6c1a}:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep .table thead tr th.fixed-column,:host ::ng-deep .table tbody tr td.fixed-column{left:120px}}:host ::ng-deep .table thead tr:last-child th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep .table thead tr:last-child th.has-border-right{box-shadow:inset 0 -1px #ffc000,inset -2px 0 #c4ae6c1a}:host ::ng-deep .table thead tr:last-child th:first-child.has-border-right:after,:host ::ng-deep .table thead tr:last-child th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #c4ae6c1a}:host ::ng-deep .table tbody tr{background-color:transparent!important}:host ::ng-deep .table thead tr+tr th{top:42px}:host ::ng-deep .table thead tr+tr+tr th{top:84px}:host ::ng-deep .table thead tr th,:host ::ng-deep .table tbody tr td{background-color:#fff}:host ::ng-deep .table.is-hoverable tbody tr:not(.is-selected):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-striped tbody tr:not(.is-selected):nth-child(even) td{background-color:#fefcf7}:host ::ng-deep .table.is-striped.is-hoverable tr:not(.is-selected):nth-child(even):hover td{background-color:#f3f5f7}:host ::ng-deep .table.is-narrow{font-size:.8rem}:host ::ng-deep .table.is-narrow th,:host ::ng-deep .table.is-narrow td{height:30px}:host ::ng-deep .table.is-narrow thead tr+tr th{top:30px}:host ::ng-deep .table.is-narrow thead tr+tr+tr th{top:60px}:host ::ng-deep .table.is-narrow .select,:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{height:30px;font-size:.8rem}:host ::ng-deep .table.is-narrow .select select,:host ::ng-deep .table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { minHeight: [{
                 type: Input
             }], maxHeight: [{
@@ -1936,8 +1964,8 @@ const locationQuery = (bounds, searchField = 'location') => {
         }
     };
 };
-const fillColor = '#00F';
-const strokeColor = '#00A';
+const fillColor = '#193957';
+const strokeColor = '#0C1B29';
 const fillStyle = {
     fillColor,
     fillOpacity: 0.6
@@ -2091,10 +2119,10 @@ class MapsDrawingConfirmComponent {
     }
 }
 MapsDrawingConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MapsDrawingConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapsDrawingConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: { value: "value", modes: "modes", center: "center", zoom: "zoom" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map\n        height=\"100%\"\n        width=\"100%\"\n        [zoom]=\"zoom\"\n        [center]=\"center\"\n        [options]=\"options\"\n      ></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger is-outlined\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"], dependencies: [{ kind: "component", type: i1$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+MapsDrawingConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: { value: "value", modes: "modes", center: "center", zoom: "zoom" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map\n        height=\"100%\"\n        width=\"100%\"\n        [zoom]=\"zoom\"\n        [center]=\"center\"\n        [options]=\"options\"\n      ></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"], dependencies: [{ kind: "component", type: i1$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: MapsDrawingConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-maps-drawing-confirm', template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map\n        height=\"100%\"\n        width=\"100%\"\n        [zoom]=\"zoom\"\n        [center]=\"center\"\n        [options]=\"options\"\n      ></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger is-outlined\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"] }]
+            args: [{ selector: 'he-maps-drawing-confirm', template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map\n        height=\"100%\"\n        width=\"100%\"\n        [zoom]=\"zoom\"\n        [center]=\"center\"\n        [options]=\"options\"\n      ></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"] }]
         }], propDecorators: { map: [{
                 type: ViewChild,
                 args: [GoogleMap]
@@ -2123,10 +2151,10 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small\" (click)=\"$event.stopPropagation(); active = false\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover{position:relative;display:inline-block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.75rem;padding:.4rem .8rem;color:#4a4a4a;background-color:#fff;border-radius:4px;box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#fff;border-left-color:#fff;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center;box-shadow:-1px 1px 2px #0a0a0a33}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block is-relative popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-popover', template: "<div class=\"is-inline-block popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small\" (click)=\"$event.stopPropagation(); active = false\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover{position:relative;display:inline-block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.75rem;padding:.4rem .8rem;color:#4a4a4a;background-color:#fff;border-radius:4px;box-shadow:0 2px 3px #0a0a0a1a,0 0 0 1px #0a0a0a1a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#fff;border-left-color:#fff;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center;box-shadow:-1px 1px 2px #0a0a0a33}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"] }]
+            args: [{ selector: 'he-popover', template: "<div class=\"is-inline-block is-relative popover is-popover-{{position}}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{message: message, data: data}\"\n    ></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], content: [{
@@ -2149,6 +2177,10 @@ class PopoverConfirmComponent {
         this.confirmed.next(this.data);
         this.popover.active = false;
     }
+    get active() {
+        var _a;
+        return (_a = this.popover) === null || _a === void 0 ? void 0 : _a.active;
+    }
 }
 PopoverConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: PopoverConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 PopoverConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: { message: "message", content: "content", position: "position", popoverClass: "popoverClass" }, outputs: { confirmed: "confirmed" }, viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<he-popover [message]=\"message\" [content]=\"content\" [data]=\"data\" [position]=\"position\" [class]=\"popoverClass\">\n  <ng-content></ng-content>\n\n  <ng-container actions>\n    <button class=\"button is-small is-primary mr-2\" (click)=\"$event.stopPropagation(); confirm()\">\n      <span>Confirm</span>\n    </button>\n  </ng-container>\n</he-popover>\n", styles: ["he-popover{height:100%;width:100%}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "he-popover", inputs: ["message", "content", "data", "position"] }] });
@@ -4383,10 +4415,10 @@ class BibliographiesSearchConfirmComponent {
     }
 }
 BibliographiesSearchConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BibliographiesSearchConfirmComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: HeMendeleyService }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component });
-BibliographiesSearchConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\" name=\"randomname\" autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\"\n            >\n            <a class=\"icon is-small is-right\" (click)=\"!loading && resetSearch()\" [ngSwitch]=\"loading\">\n              <fa-icon *ngSwitchCase=\"true\" icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n              <fa-icon *ngSwitchCase=\"false\" icon=\"times\"></fa-icon>\n            </a>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"mt-2\">\n        <span [class.is-hidden]=\"loading || !searchControl?.value || hasResults\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          <li *ngFor=\"let result of results | async\">\n            <a class=\"is-block p-1 search-result\" (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\"\n            >\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\"><i>{{result.name}}</i></span>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\"\n              >- <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.scopus || result.scopus\"\n              >- <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span>\n                <ng-container *ngTemplateOutlet=\"mendeleyLink; context: {$implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID}\"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BibliographiesSearchConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\" name=\"randomname\" autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\"\n            >\n            <a class=\"icon is-small is-right\" (click)=\"!loading && resetSearch()\" [ngSwitch]=\"loading\">\n              <fa-icon *ngSwitchCase=\"true\" icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n              <fa-icon *ngSwitchCase=\"false\" icon=\"times\"></fa-icon>\n            </a>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"mt-2\">\n        <span [class.is-hidden]=\"loading || !searchControl?.value || hasResults\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          <li *ngFor=\"let result of results | async\">\n            <a class=\"is-block p-1 search-result\" (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\"\n            >\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\"><i>{{result.name}}</i></span>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\"\n              >- <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.scopus || result.scopus\"\n              >- <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span>\n                <ng-container *ngTemplateOutlet=\"mendeleyLink; context: {$implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID}\"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: BibliographiesSearchConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\" name=\"randomname\" autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\"\n            >\n            <a class=\"icon is-small is-right\" (click)=\"!loading && resetSearch()\" [ngSwitch]=\"loading\">\n              <fa-icon *ngSwitchCase=\"true\" icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n              <fa-icon *ngSwitchCase=\"false\" icon=\"times\"></fa-icon>\n            </a>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"mt-2\">\n        <span [class.is-hidden]=\"loading || !searchControl?.value || hasResults\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          <li *ngFor=\"let result of results | async\">\n            <a class=\"is-block p-1 search-result\" (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\"\n            >\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\"><i>{{result.name}}</i></span>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\"\n              >- <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.scopus || result.scopus\"\n              >- <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span>\n                <ng-container *ngTemplateOutlet=\"mendeleyLink; context: {$implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID}\"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
+            args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\" name=\"randomname\" autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\"\n            >\n            <a class=\"icon is-small is-right\" (click)=\"!loading && resetSearch()\" [ngSwitch]=\"loading\">\n              <fa-icon *ngSwitchCase=\"true\" icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n              <fa-icon *ngSwitchCase=\"false\" icon=\"times\"></fa-icon>\n            </a>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"mt-2\">\n        <span [class.is-hidden]=\"loading || !searchControl?.value || hasResults\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          <li *ngFor=\"let result of results | async\">\n            <a class=\"is-block p-1 search-result\" (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\"\n            >\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\"><i>{{result.name}}</i></span>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\"\n              >- <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span class=\"px-1\"\n                *ngIf=\"result.bibliography?.scopus || result.scopus\"\n              >- <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"\n              ></ngb-highlight>\n\n              <span>\n                <ng-container *ngTemplateOutlet=\"mendeleyLink; context: {$implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID}\"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }, { type: HeMendeleyService }, { type: HeSearchService }]; }, propDecorators: { search: [{
                 type: Input
             }], searchSources: [{
@@ -4680,6 +4712,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
 
+class NodeLinkComponent {
+    constructor() {
+        this.showExternalLink = false;
+    }
+    get id() {
+        return this.node['@id'];
+    }
+    get url() {
+        const url = [
+            baseUrl(),
+            this.node['@type'].toLowerCase(),
+            this.id
+        ].filter(Boolean).join('/');
+        return `${url}${this.node.aggregated ? `?dataState=${DataState.recalculated}` : ''}`;
+    }
+    get showLink() {
+        return this.node && linkTypeEnabled(this.node['@type']);
+    }
+    get target() {
+        return this.showExternalLink || isExternal() ? '_blank' : '_self';
+    }
+}
+NodeLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink" }, ngImport: i0, template: "<a *ngIf=\"showLink; else content\" [href]=\"url\" [target]=\"target\" (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{id}}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLinkComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-node-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"showLink; else content\" [href]=\"url\" [target]=\"target\" (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{id}}</span>\n</ng-template>\n" }]
+        }], propDecorators: { node: [{
+                type: Input
+            }], showExternalLink: [{
+                type: Input
+            }] } });
+
 const headerGroup = (header) => {
     const parts = header.split('.');
     return parts.length === 2 ? '' : [parts[0], parts[1]].join('.');
@@ -4774,10 +4839,10 @@ class NodeCsvSelectHeadersComponent {
     }
 }
 NodeCsvSelectHeadersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeCsvSelectHeadersComponent, deps: [{ token: HeSchemaService }], target: i0.ɵɵFactoryTarget.Component });
-NodeCsvSelectHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\"><i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i></p>\n\n<div class=\"columns toggle-all mx-4 pb-1 mb-0\">\n  <div class=\"column\">\n    <label class=\"checkbox ml-1\">\n      <input type=\"checkbox\" class=\"selector\"\n        [(ngModel)]=\"allSelected\"\n        (change)=\"toggleAll(); refresh()\"\n      >\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\"\n    >\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\"\n          aria-haspopup=\"true\" aria-controls=\"select-menu\"\n        >\n          <span>Advanced Filters</span>\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"filter\" aria-hidden=\"true\"></fa-icon>\n          </span>\n        </button>\n      </div>\n      <div class=\"dropdown-menu\" id=\"select-menu\" role=\"menu\">\n        <div class=\"dropdown-content\">\n          <a class=\"dropdown-item\">\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"showNonIncluded\"\n                (change)=\"refresh()\"\n              >\n              <span class=\"ml-2\">Include <code>internal</code> fields</span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\"\n            *ngFor=\"let field of termFields\"\n          >\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\"\n              >\n              <span class=\"ml-2\">{{field}}</span>\n            </label>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"drag-container\" *ngIf=\"!loading; else loader\">\n  <div class=\"card\" *ngFor=\"let group of headers | keys\">\n    <header class=\"card-header\" *ngIf=\"group.key\">\n      <div class=\"card-header-title\">\n        <label class=\"checkbox ml-1\">\n          <input type=\"checkbox\" class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\"\n          >\n          <span class=\"ml-2\">{{group.key}}</span>\n        </label>\n      </div>\n      <span class=\"card-header-icon has-text-link\" aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\" pointer\n      >\n        <span class=\"icon\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!group.value.open\"></fa-icon>\n          <fa-icon icon=\"angle-left\" [class.is-hidden]=\"group.value.open\"></fa-icon>\n        </span>\n      </span>\n    </header>\n\n    <div class=\"card-content p-3\" [class.is-hidden]=\"!group.value.open\">\n      <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group.key)\">\n        <ng-container *ngFor=\"let header of group.value.headers\">\n          <ng-container *ngIf=\"header.included || showNonIncluded\">\n            <li cdkDrag>\n              <label class=\"checkbox ml-2\">\n                <input type=\"checkbox\" class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\"\n                >\n                <span class=\"ml-2\">{{header.header}}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid hsl(0deg,0%,48%)}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NodeCsvSelectHeadersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\"><i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i></p>\n\n<div class=\"columns toggle-all mx-4 pb-1 mb-0\">\n  <div class=\"column\">\n    <label class=\"checkbox ml-1\">\n      <input type=\"checkbox\" class=\"selector\"\n        [(ngModel)]=\"allSelected\"\n        (change)=\"toggleAll(); refresh()\"\n      >\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\"\n    >\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\"\n          aria-haspopup=\"true\" aria-controls=\"select-menu\"\n        >\n          <span>Advanced Filters</span>\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"filter\" aria-hidden=\"true\"></fa-icon>\n          </span>\n        </button>\n      </div>\n      <div class=\"dropdown-menu\" id=\"select-menu\" role=\"menu\">\n        <div class=\"dropdown-content\">\n          <a class=\"dropdown-item\">\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"showNonIncluded\"\n                (change)=\"refresh()\"\n              >\n              <span class=\"ml-2\">Include <code>internal</code> fields</span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\"\n            *ngFor=\"let field of termFields\"\n          >\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\"\n              >\n              <span class=\"ml-2\">{{field}}</span>\n            </label>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"drag-container\" *ngIf=\"!loading; else loader\">\n  <div class=\"card\" *ngFor=\"let group of headers | keys\">\n    <header class=\"card-header\" *ngIf=\"group.key\">\n      <div class=\"card-header-title\">\n        <label class=\"checkbox ml-1\">\n          <input type=\"checkbox\" class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\"\n          >\n          <span class=\"ml-2\">{{group.key}}</span>\n        </label>\n      </div>\n      <span class=\"card-header-icon has-text-secondary\" aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\" pointer\n      >\n        <span class=\"icon\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!group.value.open\"></fa-icon>\n          <fa-icon icon=\"angle-left\" [class.is-hidden]=\"group.value.open\"></fa-icon>\n        </span>\n      </span>\n    </header>\n\n    <div class=\"card-content p-3\" [class.is-hidden]=\"!group.value.open\">\n      <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group.key)\">\n        <ng-container *ngFor=\"let header of group.value.headers\">\n          <ng-container *ngIf=\"header.included || showNonIncluded\">\n            <li cdkDrag>\n              <label class=\"checkbox ml-2\">\n                <input type=\"checkbox\" class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\"\n                >\n                <span class=\"ml-2\">{{header.header}}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid #4A4A4A}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeCsvSelectHeadersComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-csv-select-headers', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\"><i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i></p>\n\n<div class=\"columns toggle-all mx-4 pb-1 mb-0\">\n  <div class=\"column\">\n    <label class=\"checkbox ml-1\">\n      <input type=\"checkbox\" class=\"selector\"\n        [(ngModel)]=\"allSelected\"\n        (change)=\"toggleAll(); refresh()\"\n      >\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\"\n    >\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\"\n          aria-haspopup=\"true\" aria-controls=\"select-menu\"\n        >\n          <span>Advanced Filters</span>\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"filter\" aria-hidden=\"true\"></fa-icon>\n          </span>\n        </button>\n      </div>\n      <div class=\"dropdown-menu\" id=\"select-menu\" role=\"menu\">\n        <div class=\"dropdown-content\">\n          <a class=\"dropdown-item\">\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"showNonIncluded\"\n                (change)=\"refresh()\"\n              >\n              <span class=\"ml-2\">Include <code>internal</code> fields</span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\"\n            *ngFor=\"let field of termFields\"\n          >\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\"\n              >\n              <span class=\"ml-2\">{{field}}</span>\n            </label>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"drag-container\" *ngIf=\"!loading; else loader\">\n  <div class=\"card\" *ngFor=\"let group of headers | keys\">\n    <header class=\"card-header\" *ngIf=\"group.key\">\n      <div class=\"card-header-title\">\n        <label class=\"checkbox ml-1\">\n          <input type=\"checkbox\" class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\"\n          >\n          <span class=\"ml-2\">{{group.key}}</span>\n        </label>\n      </div>\n      <span class=\"card-header-icon has-text-link\" aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\" pointer\n      >\n        <span class=\"icon\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!group.value.open\"></fa-icon>\n          <fa-icon icon=\"angle-left\" [class.is-hidden]=\"group.value.open\"></fa-icon>\n        </span>\n      </span>\n    </header>\n\n    <div class=\"card-content p-3\" [class.is-hidden]=\"!group.value.open\">\n      <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group.key)\">\n        <ng-container *ngFor=\"let header of group.value.headers\">\n          <ng-container *ngIf=\"header.included || showNonIncluded\">\n            <li cdkDrag>\n              <label class=\"checkbox ml-2\">\n                <input type=\"checkbox\" class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\"\n                >\n                <span class=\"ml-2\">{{header.header}}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid hsl(0deg,0%,48%)}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'he-node-csv-select-headers', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\"><i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i></p>\n\n<div class=\"columns toggle-all mx-4 pb-1 mb-0\">\n  <div class=\"column\">\n    <label class=\"checkbox ml-1\">\n      <input type=\"checkbox\" class=\"selector\"\n        [(ngModel)]=\"allSelected\"\n        (change)=\"toggleAll(); refresh()\"\n      >\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\"\n    >\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\"\n          aria-haspopup=\"true\" aria-controls=\"select-menu\"\n        >\n          <span>Advanced Filters</span>\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"filter\" aria-hidden=\"true\"></fa-icon>\n          </span>\n        </button>\n      </div>\n      <div class=\"dropdown-menu\" id=\"select-menu\" role=\"menu\">\n        <div class=\"dropdown-content\">\n          <a class=\"dropdown-item\">\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"showNonIncluded\"\n                (change)=\"refresh()\"\n              >\n              <span class=\"ml-2\">Include <code>internal</code> fields</span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\"\n            *ngFor=\"let field of termFields\"\n          >\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\"\n              >\n              <span class=\"ml-2\">{{field}}</span>\n            </label>\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"drag-container\" *ngIf=\"!loading; else loader\">\n  <div class=\"card\" *ngFor=\"let group of headers | keys\">\n    <header class=\"card-header\" *ngIf=\"group.key\">\n      <div class=\"card-header-title\">\n        <label class=\"checkbox ml-1\">\n          <input type=\"checkbox\" class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\"\n          >\n          <span class=\"ml-2\">{{group.key}}</span>\n        </label>\n      </div>\n      <span class=\"card-header-icon has-text-secondary\" aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\" pointer\n      >\n        <span class=\"icon\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!group.value.open\"></fa-icon>\n          <fa-icon icon=\"angle-left\" [class.is-hidden]=\"group.value.open\"></fa-icon>\n        </span>\n      </span>\n    </header>\n\n    <div class=\"card-content p-3\" [class.is-hidden]=\"!group.value.open\">\n      <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group.key)\">\n        <ng-container *ngFor=\"let header of group.value.headers\">\n          <ng-container *ngIf=\"header.included || showNonIncluded\">\n            <li cdkDrag>\n              <label class=\"checkbox ml-2\">\n                <input type=\"checkbox\" class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\"\n                >\n                <span class=\"ml-2\">{{header.header}}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid #4A4A4A}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: HeSchemaService }]; }, propDecorators: { csv: [{
                 type: Input
             }], keys: [{
@@ -4821,10 +4886,10 @@ class NodeCsvExportConfirmComponent {
     }
 }
 NodeCsvExportConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeCsvExportConfirmComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-NodeCsvExportConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and selecting the exported file.</span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{includedNodes.length}}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <div class=\"table-container\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-hoverable mb-0\">\n            <thead class=\"has-background-black\">\n              <tr>\n                <th>\n                  <span class=\"has-text-white\">@type</span>\n                </th>\n                <th>\n                  <span class=\"has-text-white\">@id</span>\n                </th>\n                <th>\n                  <span class=\"has-text-white\">Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td>\n                  <span *bindOnce=\"node\">{{node.node['@type']}}</span>\n                </td>\n                <td>\n                  <span *bindOnce=\"node\">{{node.node['@id']}}</span>\n                </td>\n                <td>\n                  <span *bindOnce=\"node\">{{node.node.name}}</span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ng-container>\n\n      <he-node-csv-select-headers [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\" [keys]=\"headerKeys\" [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"\n      ></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a class=\"button is-success\" target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\"\n      >\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NodeCsvExportConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and selecting the exported file.</span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{includedNodes.length}}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <he-data-table maxHeight=\"400\" [nbRows]=\"includedNodes.length\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-striped mb-0\" *bindOnce=\"includedNodes\">\n            <thead>\n              <tr>\n                <th class=\"width-auto has-border-right\">\n                  <span>Type</span>\n                </th>\n                <th>\n                  <span>Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td class=\"width-auto has-border-right\">\n                  {{node.node['@type']}}\n                </td>\n                <td>\n                  <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                    <span>{{node.node.name}}</span>\n                  </he-node-link>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </he-data-table>\n      </ng-container>\n\n      <he-node-csv-select-headers [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\" [keys]=\"headerKeys\" [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"\n      ></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a class=\"button is-primary\" target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\"\n      >\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeCsvExportConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-csv-export-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and selecting the exported file.</span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{includedNodes.length}}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <div class=\"table-container\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-hoverable mb-0\">\n            <thead class=\"has-background-black\">\n              <tr>\n                <th>\n                  <span class=\"has-text-white\">@type</span>\n                </th>\n                <th>\n                  <span class=\"has-text-white\">@id</span>\n                </th>\n                <th>\n                  <span class=\"has-text-white\">Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td>\n                  <span *bindOnce=\"node\">{{node.node['@type']}}</span>\n                </td>\n                <td>\n                  <span *bindOnce=\"node\">{{node.node['@id']}}</span>\n                </td>\n                <td>\n                  <span *bindOnce=\"node\">{{node.node.name}}</span>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </ng-container>\n\n      <he-node-csv-select-headers [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\" [keys]=\"headerKeys\" [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"\n      ></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a class=\"button is-success\" target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\"\n      >\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'he-node-csv-export-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and selecting the exported file.</span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{includedNodes.length}}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <he-data-table maxHeight=\"400\" [nbRows]=\"includedNodes.length\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-striped mb-0\" *bindOnce=\"includedNodes\">\n            <thead>\n              <tr>\n                <th class=\"width-auto has-border-right\">\n                  <span>Type</span>\n                </th>\n                <th>\n                  <span>Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td class=\"width-auto has-border-right\">\n                  {{node.node['@type']}}\n                </td>\n                <td>\n                  <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                    <span>{{node.node.name}}</span>\n                  </he-node-link>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </he-data-table>\n      </ng-container>\n\n      <he-node-csv-select-headers [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\" [keys]=\"headerKeys\" [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"\n      ></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a class=\"button is-primary\" target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\"\n      >\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { nodes: [{
                 type: Input
             }], filename: [{
@@ -4927,39 +4992,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
-class NodeLinkComponent {
-    constructor() {
-        this.showExternalLink = false;
-    }
-    get id() {
-        return this.node['@id'];
-    }
-    get url() {
-        const url = [
-            baseUrl(),
-            this.node['@type'].toLowerCase(),
-            this.id
-        ].filter(Boolean).join('/');
-        return `${url}${this.node.aggregated ? `?dataState=${DataState.recalculated}` : ''}`;
-    }
-    get showLink() {
-        return this.node && linkTypeEnabled(this.node['@type']);
-    }
-    get target() {
-        return this.showExternalLink || isExternal() ? '_blank' : '_self';
-    }
-}
-NodeLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink" }, ngImport: i0, template: "<a *ngIf=\"showLink; else content\" [href]=\"url\" [target]=\"target\" (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{id}}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLinkComponent, decorators: [{
-            type: Component$1,
-            args: [{ selector: 'he-node-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a *ngIf=\"showLink; else content\" [href]=\"url\" [target]=\"target\" (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{id}}</span>\n</ng-template>\n" }]
-        }], propDecorators: { node: [{
-                type: Input
-            }], showExternalLink: [{
-                type: Input
-            }] } });
-
 class NodeLogsFileComponent {
     constructor(domSanitizer, nodeService) {
         this.domSanitizer = domSanitizer;
@@ -4994,10 +5026,10 @@ class NodeLogsFileComponent {
     }
 }
 NodeLogsFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsFileComponent, deps: [{ token: i1$1.DomSanitizer }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component });
-NodeLogsFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-link is-small\"\n          [value]=\"nodeLog | async\" [hideText]=\"true\" [icon]=\"['far', 'clone']\" size=\"lg\" rotate=\"180\"\n        ></he-clipboard>\n      </div>\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input class=\"input is-link is-small\"\n            [(ngModel)]=\"modelFilter\" id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\"\n          >\n        </div>\n        <div class=\"control\">\n          <input class=\"input is-link is-small\"\n            [(ngModel)]=\"termFilter\" id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\"\n          >\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-link is-small\">\n            <select (change)=\"applyFilters()\"\n              [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\"\n            >\n              <option *ngFor=\"let level of Level | keys\" [value]=\"level.value\">{{level.value}}</option>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"control\">\n        <button class=\"button is-small\" (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\" placement=\"bottom\" container=\"body\"\n        >\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control pl-3\">\n        <a class=\"button is-dark is-outlined is-small\" target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node!['@id'], 'csv')\"\n        >\n          <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n          <span>Download (CSV)</span>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NodeLogsFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\"\n          [value]=\"nodeLog | async\" [hideText]=\"true\" [icon]=\"['far', 'clone']\" size=\"lg\" rotate=\"180\"\n        ></he-clipboard>\n      </div>\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\" id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\"\n          >\n        </div>\n        <div class=\"control\">\n          <input class=\"input is-secondary is-small\"\n            [(ngModel)]=\"termFilter\" id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\"\n          >\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select (change)=\"applyFilters()\"\n              [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\"\n            >\n              <option *ngFor=\"let level of Level | keys\" [value]=\"level.value\">{{level.value}}</option>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"control\">\n        <button class=\"button is-small\" (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\" placement=\"bottom\" container=\"body\"\n        >\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node!['@id'], 'csv')\"\n        >\n          <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsFileComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-logs-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-link is-small\"\n          [value]=\"nodeLog | async\" [hideText]=\"true\" [icon]=\"['far', 'clone']\" size=\"lg\" rotate=\"180\"\n        ></he-clipboard>\n      </div>\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input class=\"input is-link is-small\"\n            [(ngModel)]=\"modelFilter\" id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\"\n          >\n        </div>\n        <div class=\"control\">\n          <input class=\"input is-link is-small\"\n            [(ngModel)]=\"termFilter\" id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\"\n          >\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-link is-small\">\n            <select (change)=\"applyFilters()\"\n              [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\"\n            >\n              <option *ngFor=\"let level of Level | keys\" [value]=\"level.value\">{{level.value}}</option>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"control\">\n        <button class=\"button is-small\" (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\" placement=\"bottom\" container=\"body\"\n        >\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control pl-3\">\n        <a class=\"button is-dark is-outlined is-small\" target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node!['@id'], 'csv')\"\n        >\n          <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n          <span>Download (CSV)</span>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"] }]
+            args: [{ selector: 'he-node-logs-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\"\n          [value]=\"nodeLog | async\" [hideText]=\"true\" [icon]=\"['far', 'clone']\" size=\"lg\" rotate=\"180\"\n        ></he-clipboard>\n      </div>\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\" id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\"\n          >\n        </div>\n        <div class=\"control\">\n          <input class=\"input is-secondary is-small\"\n            [(ngModel)]=\"termFilter\" id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\"\n          >\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select (change)=\"applyFilters()\"\n              [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\"\n            >\n              <option *ngFor=\"let level of Level | keys\" [value]=\"level.value\">{{level.value}}</option>\n            </select>\n          </div>\n        </div>\n      </ng-container>\n      <div class=\"control\">\n        <button class=\"button is-small\" (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\" placement=\"bottom\" container=\"body\"\n        >\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node!['@id'], 'csv')\"\n        >\n          <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: HeNodeService }]; }, propDecorators: { node: [{
                 type: Input
             }], dataState: [{
@@ -5598,10 +5630,10 @@ class NodeLogsModelsComponent {
     }
 }
 NodeLogsModelsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsModelsComponent, deps: [{ token: HeNodeService }, { token: HeSearchService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component });
-NodeLogsModelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", logsKey: "logsKey" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th class=\"has-border-right\">Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td class=\"has-border-right\">\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-text-left\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td class=\"has-border-right\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-text-left\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"{'@type':'Term','@id':subValue.id}\" [attr.title]=\"subValue.id | keyToLabel\">\n                    <span class=\"is-nowrap has-text-ellipsis\">{{subValue.id | keyToLabel}}</span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"has-border-right\">\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n    <span class=\"pl-1 has-text-{{logColor[model.status]}}\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *ngIf=\"logs?.requirements\">\n    <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.logs\">\n    <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.missingLookups?.length\">\n    <p class=\"mt-2\">Optional data missing:</p>\n\n    <div class=\"table-container data-table-container\">\n      <table class=\"table is-fullwidth mb-0\">\n        <thead class=\"has-background-black\">\n          <tr>\n            <th>\n              <span class=\"has-text-white\">Filename</span>\n            </th>\n            <th>\n              <span class=\"has-text-white\">Column Title</span>\n            </th>\n            <th>\n              <span class=\"has-text-white\">Row (term.id)</span>\n            </th>\n          </tr>\n        </thead>\n        <tbody class=\"has-background-black has-text-white\">\n          <tr *ngFor=\"let data of logs.missingLookups\">\n            <td>{{data.filename}}</td>\n            <td>{{data.column}}</td>\n            <td>{{data.termId}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <ng-container *bindOnce=\"value\">\n    <span class=\"pr-1 is-inline-block is-align-middle\">{{key}}:</span>\n    <ng-template #singleValue>\n      <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n    </ng-template>\n    <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n      <table class=\"table is-bordered has-background-black has-text-white\">\n        <thead *ngIf=\"valueArray[0] | isObject\">\n          <tr>\n            <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let v of valueArray\">\n            <ng-template #singleArrayValue>\n              <td>{{v}}</td>\n            </ng-template>\n            <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n              <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}::ng-deep td .open-node+he-node-link{width:170px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] });
+NodeLogsModelsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", logsKey: "logsKey" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"{'@type':'Term','@id':subValue.id}\" [attr.title]=\"subValue.id | keyToLabel\">\n                    <span class=\"is-nowrap has-text-ellipsis\">{{subValue.id | keyToLabel}}</span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n    <span class=\"pl-1 has-text-{{logColor[model.status]}}\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *ngIf=\"logs?.requirements\">\n    <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.logs\">\n    <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.missingLookups?.length\">\n    <p class=\"mt-2\">Optional data missing:</p>\n\n    <div class=\"table-container data-table-container\">\n      <table class=\"table is-fullwidth mb-0\">\n        <thead>\n          <tr>\n            <th>\n              <span>Filename</span>\n            </th>\n            <th>\n              <span>Column Title</span>\n            </th>\n            <th>\n              <span>Row (term.id)</span>\n            </th>\n          </tr>\n        </thead>\n        <tbody class=\"has-background-black has-text-white\">\n          <tr *ngFor=\"let data of logs.missingLookups\">\n            <td>{{data.filename}}</td>\n            <td>{{data.column}}</td>\n            <td>{{data.termId}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <ng-container *bindOnce=\"value\">\n    <span class=\"pr-1 is-inline-block is-align-middle\">{{key}}:</span>\n    <ng-template #singleValue>\n      <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n    </ng-template>\n    <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n      <table class=\"table is-bordered has-background-black has-text-white\">\n        <thead *ngIf=\"valueArray[0] | isObject\">\n          <tr>\n            <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let v of valueArray\">\n            <ng-template #singleArrayValue>\n              <td>{{v}}</td>\n            </ng-template>\n            <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n              <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}::ng-deep td .open-node+he-node-link{width:170px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th class=\"has-border-right\">Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td class=\"has-border-right\">\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-text-left\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td class=\"has-border-right\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-text-left\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"{'@type':'Term','@id':subValue.id}\" [attr.title]=\"subValue.id | keyToLabel\">\n                    <span class=\"is-nowrap has-text-ellipsis\">{{subValue.id | keyToLabel}}</span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"has-border-right\">\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n    <span class=\"pl-1 has-text-{{logColor[model.status]}}\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *ngIf=\"logs?.requirements\">\n    <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.logs\">\n    <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.missingLookups?.length\">\n    <p class=\"mt-2\">Optional data missing:</p>\n\n    <div class=\"table-container data-table-container\">\n      <table class=\"table is-fullwidth mb-0\">\n        <thead class=\"has-background-black\">\n          <tr>\n            <th>\n              <span class=\"has-text-white\">Filename</span>\n            </th>\n            <th>\n              <span class=\"has-text-white\">Column Title</span>\n            </th>\n            <th>\n              <span class=\"has-text-white\">Row (term.id)</span>\n            </th>\n          </tr>\n        </thead>\n        <tbody class=\"has-background-black has-text-white\">\n          <tr *ngFor=\"let data of logs.missingLookups\">\n            <td>{{data.filename}}</td>\n            <td>{{data.column}}</td>\n            <td>{{data.termId}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <ng-container *bindOnce=\"value\">\n    <span class=\"pr-1 is-inline-block is-align-middle\">{{key}}:</span>\n    <ng-template #singleValue>\n      <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n    </ng-template>\n    <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n      <table class=\"table is-bordered has-background-black has-text-white\">\n        <thead *ngIf=\"valueArray[0] | isObject\">\n          <tr>\n            <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let v of valueArray\">\n            <ng-template #singleArrayValue>\n              <td>{{v}}</td>\n            </ng-template>\n            <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n              <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}::ng-deep td .open-node+he-node-link{width:170px}\n"] }]
+            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"rowsCount\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\" name=\"term\"\n                  placeholder=\"Filter by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"false\"\n                  (selectItem)=\"filterResults()\"\n                >\n                <a class=\"icon is-small is-right\"\n                  [class.is-hidden]=\"!term\"\n                  (click)=\"term = ''; filterResults();\"\n                >\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th>Units</th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th>Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{i + 1}})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>No data</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\" [attr.title]=\"blankNode.term.name\">\n              <a class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\"\n              >\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block\" [node]=\"blankNode.term\">\n                <span class=\"is-nowrap has-text-ellipsis\" [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n            </td>\n            <td>\n              <span [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{blankNode.originalValue | precision:3 | default:'-'}}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.originalValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{blankNode.recalculatedValue | precision:3 | default:'-'}}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">{{blankNode.recalculatedValueByMethodId[model.methodId] | precision:3 | default:'-'}}</div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"\n                ></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta *ngIf=\"blankNode.originalValueByMethodId[model.methodId] !== null && blankNode.recalculatedValueByMethodId[model.methodId] !== null; else noValue\"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"\n                  ></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: blankNode}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a class=\"is-inline-block\" *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\" target=\"_blank\" [title]=\"subValue.key\"\n              >\n                <span class=\"is-nowrap has-text-ellipsis\">{{subValue.key}}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{subValue.key}}</span>\n            </td>\n            <td></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n          >\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{subValue.key | keyToLabel}}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{subValue.id | keyToLabel}}</span>\n                  <he-node-link *ngSwitchDefault class=\"is-block pl-4\" [node]=\"{'@type':'Term','@id':subValue.id}\" [attr.title]=\"subValue.id | keyToLabel\">\n                    <span class=\"is-nowrap has-text-ellipsis\">{{subValue.id | keyToLabel}}</span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">{{subValue.originalValue | precision:3 | default:'-'}}</span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{subValue.recalculatedValue | precision:3 | default:'-'}}\n              </span>\n            </td>\n            <td>-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: {data: subValue}\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\"\n            (click)=\"showLegend = !showLegend\"\n          >\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{logColor[status.value]}}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{status.value}}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input type=\"checkbox\" class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\"\n          >\n          <span class=\"ml-2\">Show only {{filteredType | pluralize}} included in the default Hestia system boundary</span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <td class=\"blank-node-index-{{i}}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n    <ng-container *ngIf=\"getModelsAt(data, i); let models; else noValue\">\n      <ng-template #modelSerie>\n        <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model:models}\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"models | isArray; else modelSerie\">\n        <p *ngFor=\"let model of models\">\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: {model}\"></ng-container>\n        </p>\n      </div>\n    </ng-container>\n  </td>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\">\n  <span\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\" [autoClose]=\"'outside'\"\n    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : (model.showLogs ? p.open({ logs: model.logs }) : null)\"\n  >\n    <span class=\"is-capitalized\">{{methodName(model)}}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">[{{model.logs?.methodTier || model.model?.methodTier}}]</span>\n    <span class=\"pl-1 has-text-{{logColor[model.status]}}\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (<ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model.model}\"></ng-container>)\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <ng-container *ngIf=\"logs?.requirements\">\n    <div class=\"is-requirement\" *ngFor=\"let key of requirementKeys(logs.requirements)\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:{key, value:logs.requirements[key]}\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.logs\">\n    <div class=\"is-log\" *ngFor=\"let key of logs.logs | keys\">\n      <ng-container *ngTemplateOutlet=\"logLine; context:key\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"logs?.missingLookups?.length\">\n    <p class=\"mt-2\">Optional data missing:</p>\n\n    <div class=\"table-container data-table-container\">\n      <table class=\"table is-fullwidth mb-0\">\n        <thead>\n          <tr>\n            <th>\n              <span>Filename</span>\n            </th>\n            <th>\n              <span>Column Title</span>\n            </th>\n            <th>\n              <span>Row (term.id)</span>\n            </th>\n          </tr>\n        </thead>\n        <tbody class=\"has-background-black has-text-white\">\n          <tr *ngFor=\"let data of logs.missingLookups\">\n            <td>{{data.filename}}</td>\n            <td>{{data.column}}</td>\n            <td>{{data.termId}}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{value}}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else defaultValue\">\n    <he-node-link class=\"is-inline-block is-align-middle\" [node]=\"linkedNode\" [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <ng-container *bindOnce=\"value\">\n    <span class=\"pr-1 is-inline-block is-align-middle\">{{key}}:</span>\n    <ng-template #singleValue>\n      <ng-container *ngTemplateOutlet=\"logLineValue; context:{key,value}\"></ng-container>\n    </ng-template>\n    <div class=\"is-inline-block is-align-middle\" *ngIf=\"logValueArray(value); let valueArray; else singleValue\">\n      <table class=\"table is-bordered has-background-black has-text-white\">\n        <thead *ngIf=\"valueArray[0] | isObject\">\n          <tr>\n            <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{v.key}}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let v of valueArray\">\n            <ng-template #singleArrayValue>\n              <td>{{v}}</td>\n            </ng-template>\n            <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n              <td *ngFor=\"let vv of v | keys\">{{vv.value}}</td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep tr.has-sub-rows td{border-bottom-style:dotted}::ng-deep td he-node-link{width:190px}::ng-deep td .open-node+he-node-link{width:170px}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }, { type: HeSearchService }, { type: HeEngineService }]; }, propDecorators: { node: [{
                 type: Input
             }], nodeKey: [{
@@ -5633,10 +5665,10 @@ class NodeMissingLookupFactorsComponent {
     }
 }
 NodeMissingLookupFactorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeMissingLookupFactorsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component });
-NodeMissingLookupFactorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable mb-0\">\n    <thead class=\"has-background-black\">\n      <tr>\n        <th>\n          <span class=\"has-text-white\">Filename</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Column Title</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Row (term.id)</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{log.filename}}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{log.column}}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{log.termId}}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{log.model}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{log.key}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{log.term}}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NodeMissingLookupFactorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable is-striped mb-0\">\n    <thead>\n      <tr>\n        <th>\n          <span>Filename</span>\n        </th>\n        <th>\n          <span>Column Title</span>\n        </th>\n        <th>\n          <span>Row (term.id)</span>\n        </th>\n        <th>\n          <span>Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{log.filename}}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{log.column}}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{log.termId}}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{log.model}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{log.key}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{log.term}}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NodeMissingLookupFactorsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-missing-lookup-factors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable mb-0\">\n    <thead class=\"has-background-black\">\n      <tr>\n        <th>\n          <span class=\"has-text-white\">Filename</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Column Title</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Row (term.id)</span>\n        </th>\n        <th>\n          <span class=\"has-text-white\">Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{log.filename}}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{log.column}}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{log.termId}}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{log.model}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{log.key}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{log.term}}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'he-node-missing-lookup-factors', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable is-striped mb-0\">\n    <thead>\n      <tr>\n        <th>\n          <span>Filename</span>\n        </th>\n        <th>\n          <span>Column Title</span>\n        </th>\n        <th>\n          <span>Row (term.id)</span>\n        </th>\n        <th>\n          <span>Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{log.filename}}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{log.column}}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{log.termId}}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{log.model}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{log.key}}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{log.term}}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { node: [{
                 type: Input
             }] } });
@@ -6017,10 +6049,10 @@ class CyclesActivityComponent {
     }
 }
 CyclesActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\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\">\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\">\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  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\"\n              [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\"\n              [attr.colspan]=\"products.length\"\n            >Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesActivityComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-activity', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\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\">\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\">\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  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-activity', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\"\n              [attr.colspan]=\"inputs.length\"\n              [class.has-border-right]=\"products.length\"\n            >Inputs</th>\n            <th *ngIf=\"products.length\"\n              [attr.colspan]=\"products.length\"\n            >Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\"\n            >\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.name\"\n            >\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\"\n              [innerHtml]=\"input.value.term.units | compound\"\n            ></th>\n            <th *ngFor=\"let product of products; let pl = last\"\n              [attr.title]=\"product.value.term.units\"\n              [innerHtml]=\"product.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\"\n              >\n                <span *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\"\n                >\n                  <span pointer>{{propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\"\n                *ngFor=\"let product of products; let pl = last\"\n              >\n                <span *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\"\n                >\n                  <span pointer>{{propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\"\n  [cycles]=\"cycles\"\n></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"\n  ></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"inputs-products.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No activity data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -6050,10 +6082,10 @@ class CyclesCompletenessComponent {
     }
 }
 CyclesCompletenessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesCompletenessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", dataState: "dataState" }, ngImport: i0, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\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>\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\" [dataState]=\"dataState\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\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: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CyclesCompletenessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", dataState: "dataState" }, ngImport: i0, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\n      <thead>\n        <tr class=\"has-text-weight-semibold\">\n          <th class=\"width-auto has-border-right\"></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>\n            <td class=\"width-auto has-border-right\" [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\" [dataState]=\"dataState\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\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: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-completeness', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\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>\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\" [dataState]=\"dataState\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\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" }]
+            args: [{ selector: 'he-cycles-completeness', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n    <table class=\"table is-narrow is-striped\">\n      <thead>\n        <tr class=\"has-text-weight-semibold\">\n          <th class=\"width-auto has-border-right\"></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>\n            <td class=\"width-auto has-border-right\" [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\" [dataState]=\"dataState\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\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" }]
         }], propDecorators: { cycles: [{
                 type: Input
             }], dataState: [{
@@ -6143,10 +6175,10 @@ class CyclesEmissionsChartComponent {
     }
 }
 CyclesEmissionsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CyclesEmissionsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 an Emission</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}} ({{term.units}})</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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+CyclesEmissionsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n        </select>\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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions-chart', 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 an Emission</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}} ({{term.units}})</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"] }]
+            args: [{ selector: 'he-cycles-emissions-chart', template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n        </select>\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"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
@@ -6274,10 +6306,10 @@ class CyclesEmissionsComponent {
     }
 }
 CyclesEmissionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesEmissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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\">\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  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesEmissionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesEmissionsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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\">\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  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-emissions', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container  *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                [class.has-border-right]=\"!lastGroup\"\n                [attr.colspan]=\"item.value.emissions.length\"\n              >{{item.key | keyToLabel}}</th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\"\n              >\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis:30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\"\n                [innerHtml]=\"emission.value.term.units | compound\"\n              ></th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td class=\"is-nowrap\" *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\"\n                >\n                  <span *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                    triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                    (click)=\"togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\"\n                  >\n                    <span pointer>{{propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id']) | precision:3 | default:'-'}}</span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"\n                    ></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"\n></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"\n  ></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"emissions.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -6409,10 +6441,10 @@ class CyclesPracticesComponent {
     }
 }
 CyclesPracticesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesPracticesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CyclesPracticesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-active]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-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  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+CyclesPracticesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: CyclesPracticesComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-practices', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-active]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-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  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-cycles-practices', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.timeline\" (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"cycles.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.name\"\n            >\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\"\n              [attr.title]=\"practice.value.term.units\"\n              [innerHtml]=\"practice.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\"\n                >\n                  <span pointer>{{propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\" [filterTermTypes]=\"timelineTermType\"\n  ></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"\n  ></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"cycles\" filename=\"practices.csv\" [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p><b>{{defaultLabel(node)}}</b></p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], cycles: [{
@@ -6618,10 +6650,10 @@ class EngineOrchestratorEditComponent {
     }
 }
 EngineOrchestratorEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EngineOrchestratorEditComponent, deps: [{ token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component });
-EngineOrchestratorEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0, template: "<p>\n  <i>The configuration below is a preview of the <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a> used for the orchestration of the Hestia's calculations.</i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div class=\"field\">\n        <input type=\"checkbox\" class=\"switch\"\n          [(ngModel)]=\"onlyGapFilled\" id=\"onlyGapFilled\"\n          (change)=\"filterModels()\"\n        >\n        <label class=\"is-size-7\" for=\"onlyGapFilled\">\n          <span>Show only gap-filled data</span>\n        </label>\n      </div>\n    </div>\n    <div class=\"column is-12-mobile is-narrow-tablet has-text-right\">\n      <div class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\"\n      >\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button class=\"button is-light\"\n            aria-haspopup=\"true\" aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\" placement=\"bottom\" container=\"body\" [disableTooltip]=\"showDisplayBy\"\n          >\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Prority</span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Type</span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\"\n              [class.is-active]=\"displayBy === 'list'\"\n              (click)=\"displayBy = 'list'\"\n            >\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Prority</span>\n            </a>\n            <a class=\"dropdown-item\"\n              [class.is-active]=\"displayBy === 'type'\"\n              (click)=\"displayBy = 'type'\"\n            >\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:models}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\"\n      >\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{group.key}} ({{group.value.length}})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:groupedModels[selectedGroupedKey]}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model;context:{$implicit:v}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data)\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:data}\"></ng-container>\n    </div>\n\n    <hr>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{data.key | keyToLabel}}</span>:\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{data.value}}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span>{{data.model | keyToLabel}}</span>\n          </p>\n        </ng-template>\n\n        <ng-template #modelFromPathLink>\n          <ng-container *ngIf=\"modelPathLink$(data) | async as link; else defaultView\">\n            <ng-container *ngTemplateOutlet=\"modelPathLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container *ngTemplateOutlet=\"modelLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"data.runStrategy\">\n          <span class=\"pr-1\">Run strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.runStrategy,type:'run'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.runArgs\">\n            <p><b>Run arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.runArgs}\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"data.mergeStrategy\">\n          <span class=\"pr-1\">Merge strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.mergeStrategy,type:'merge'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.mergeArgs\">\n            <p><b>Merge arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.mergeArgs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{modelKeyName(link.modelKey)}}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <he-node-link *ngIf=\"link.term\" [node]=\"{'@type':'Term','@id':link.term}\" [showExternalLink]=\"true\">\n    <span>{{link.term | keyToLabel}}</span>\n  </he-node-link>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\"><code>{{strategy}}</code></span>\n\n  <a class=\"is-size-7\" [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\" target=\"_blank\">\n    <span class=\"pr-1\">(View Docs)</span>\n    <fa-icon icon=\"external-link-alt\"></fa-icon>\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    <p *ngFor=\"let arg of args | keys\">\n      <span class=\"has-text-underline\">{{arg.key}}</span>: <code>{{arg.value | json}}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid hsl(0deg,0%,48%)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] });
+EngineOrchestratorEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0, template: "<p>\n  <i>The configuration below is a preview of the <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a> used for the orchestration of the Hestia's calculations.</i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div class=\"field is-relative\">\n        <input type=\"checkbox\" class=\"switch is-small is-rounded\"\n          [(ngModel)]=\"onlyGapFilled\" id=\"onlyGapFilled\"\n          (change)=\"filterModels()\"\n        >\n        <label class=\"is-size-7\" for=\"onlyGapFilled\">\n          <span>Show only gap-filled data</span>\n        </label>\n      </div>\n    </div>\n    <div class=\"column is-12-mobile is-narrow-tablet has-text-right\">\n      <div class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\"\n      >\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button class=\"button\"\n            aria-haspopup=\"true\" aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\" placement=\"bottom\" container=\"body\" [disableTooltip]=\"showDisplayBy\"\n          >\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Prority</span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">#sort-menu\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Type</span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\"\n              [class.is-selected]=\"displayBy === 'list'\"\n              (click)=\"displayBy = 'list'\"\n            >\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Prority</span>\n            </a>\n            <a class=\"dropdown-item\"\n              [class.is-selected]=\"displayBy === 'type'\"\n              (click)=\"displayBy = 'type'\"\n            >\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:models}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\"\n      >\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{group.key}} ({{group.value.length}})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:groupedModels[selectedGroupedKey]}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model;context:{$implicit:v}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data)\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:data}\"></ng-container>\n    </div>\n\n    <hr>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{data.key | keyToLabel}}</span>:\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{data.value}}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span>{{data.model | keyToLabel}}</span>\n          </p>\n        </ng-template>\n\n        <ng-template #modelFromPathLink>\n          <ng-container *ngIf=\"modelPathLink$(data) | async as link; else defaultView\">\n            <ng-container *ngTemplateOutlet=\"modelPathLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container *ngTemplateOutlet=\"modelLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"data.runStrategy\">\n          <span class=\"pr-1\">Run strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.runStrategy,type:'run'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.runArgs\">\n            <p><b>Run arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.runArgs}\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"data.mergeStrategy\">\n          <span class=\"pr-1\">Merge strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.mergeStrategy,type:'merge'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.mergeArgs\">\n            <p><b>Merge arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.mergeArgs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{modelKeyName(link.modelKey)}}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <he-node-link *ngIf=\"link.term\" [node]=\"{'@type':'Term','@id':link.term}\" [showExternalLink]=\"true\">\n    <span>{{link.term | keyToLabel}}</span>\n  </he-node-link>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\"><code>{{strategy}}</code></span>\n\n  <a class=\"is-size-7\" [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\" target=\"_blank\">\n    <span class=\"pr-1\">(View Docs)</span>\n    <fa-icon icon=\"external-link-alt\"></fa-icon>\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    <p *ngFor=\"let arg of args | keys\">\n      <span class=\"has-text-underline\">{{arg.key}}</span>: <code>{{arg.value | json}}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4A4A4A}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EngineOrchestratorEditComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-engine-orchestrator-edit', template: "<p>\n  <i>The configuration below is a preview of the <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a> used for the orchestration of the Hestia's calculations.</i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div class=\"field\">\n        <input type=\"checkbox\" class=\"switch\"\n          [(ngModel)]=\"onlyGapFilled\" id=\"onlyGapFilled\"\n          (change)=\"filterModels()\"\n        >\n        <label class=\"is-size-7\" for=\"onlyGapFilled\">\n          <span>Show only gap-filled data</span>\n        </label>\n      </div>\n    </div>\n    <div class=\"column is-12-mobile is-narrow-tablet has-text-right\">\n      <div class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\"\n      >\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button class=\"button is-light\"\n            aria-haspopup=\"true\" aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\" placement=\"bottom\" container=\"body\" [disableTooltip]=\"showDisplayBy\"\n          >\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Prority</span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Type</span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\"\n              [class.is-active]=\"displayBy === 'list'\"\n              (click)=\"displayBy = 'list'\"\n            >\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Prority</span>\n            </a>\n            <a class=\"dropdown-item\"\n              [class.is-active]=\"displayBy === 'type'\"\n              (click)=\"displayBy = 'type'\"\n            >\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:models}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\"\n      >\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{group.key}} ({{group.value.length}})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:groupedModels[selectedGroupedKey]}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model;context:{$implicit:v}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data)\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:data}\"></ng-container>\n    </div>\n\n    <hr>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{data.key | keyToLabel}}</span>:\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{data.value}}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span>{{data.model | keyToLabel}}</span>\n          </p>\n        </ng-template>\n\n        <ng-template #modelFromPathLink>\n          <ng-container *ngIf=\"modelPathLink$(data) | async as link; else defaultView\">\n            <ng-container *ngTemplateOutlet=\"modelPathLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container *ngTemplateOutlet=\"modelLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"data.runStrategy\">\n          <span class=\"pr-1\">Run strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.runStrategy,type:'run'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.runArgs\">\n            <p><b>Run arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.runArgs}\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"data.mergeStrategy\">\n          <span class=\"pr-1\">Merge strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.mergeStrategy,type:'merge'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.mergeArgs\">\n            <p><b>Merge arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.mergeArgs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{modelKeyName(link.modelKey)}}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <he-node-link *ngIf=\"link.term\" [node]=\"{'@type':'Term','@id':link.term}\" [showExternalLink]=\"true\">\n    <span>{{link.term | keyToLabel}}</span>\n  </he-node-link>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\"><code>{{strategy}}</code></span>\n\n  <a class=\"is-size-7\" [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\" target=\"_blank\">\n    <span class=\"pr-1\">(View Docs)</span>\n    <fa-icon icon=\"external-link-alt\"></fa-icon>\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    <p *ngFor=\"let arg of args | keys\">\n      <span class=\"has-text-underline\">{{arg.key}}</span>: <code>{{arg.value | json}}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid hsl(0deg,0%,48%)}\n"] }]
+            args: [{ selector: 'he-engine-orchestrator-edit', template: "<p>\n  <i>The configuration below is a preview of the <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a> used for the orchestration of the Hestia's calculations.</i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <div class=\"field is-relative\">\n        <input type=\"checkbox\" class=\"switch is-small is-rounded\"\n          [(ngModel)]=\"onlyGapFilled\" id=\"onlyGapFilled\"\n          (change)=\"filterModels()\"\n        >\n        <label class=\"is-size-7\" for=\"onlyGapFilled\">\n          <span>Show only gap-filled data</span>\n        </label>\n      </div>\n    </div>\n    <div class=\"column is-12-mobile is-narrow-tablet has-text-right\">\n      <div class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\"\n      >\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button class=\"button\"\n            aria-haspopup=\"true\" aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\" placement=\"bottom\" container=\"body\" [disableTooltip]=\"showDisplayBy\"\n          >\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Prority</span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">#sort-menu\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n                <span class=\"pl-2\">Display by Type</span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\"\n              [class.is-selected]=\"displayBy === 'list'\"\n              (click)=\"displayBy = 'list'\"\n            >\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Prority</span>\n            </a>\n            <a class=\"dropdown-item\"\n              [class.is-selected]=\"displayBy === 'type'\"\n              (click)=\"displayBy = 'type'\"\n            >\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:models}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\"\n      >\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{group.key}} ({{group.value.length}})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:groupedModels[selectedGroupedKey]}\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model;context:{$implicit:v}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data)\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList;context:{$implicit:data}\"></ng-container>\n    </div>\n\n    <hr>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{data.key | keyToLabel}}</span>:\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{data.value}}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span>{{data.model | keyToLabel}}</span>\n          </p>\n        </ng-template>\n\n        <ng-template #modelFromPathLink>\n          <ng-container *ngIf=\"modelPathLink$(data) | async as link; else defaultView\">\n            <ng-container *ngTemplateOutlet=\"modelPathLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container *ngTemplateOutlet=\"modelLink;context:{model:data.model, value: data.value, link}\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"data.runStrategy\">\n          <span class=\"pr-1\">Run strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.runStrategy,type:'run'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.runArgs\">\n            <p><b>Run arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.runArgs}\"></ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"data.mergeStrategy\">\n          <span class=\"pr-1\">Merge strategy:</span>\n          <ng-container *ngTemplateOutlet=\"strategiesLink;context:{strategy:data.mergeStrategy,type:'merge'}\"></ng-container>\n\n          <div class=\"pl-3 is-size-7\" *ngIf=\"data.mergeArgs\">\n            <p><b>Merge arguments:</b></p>\n            <ng-container *ngTemplateOutlet=\"strategiesArgs;context:{$implicit:data.mergeArgs}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{modelKeyName(link.modelKey)}}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <he-node-link *ngIf=\"link.term\" [node]=\"{'@type':'Term','@id':link.term}\" [showExternalLink]=\"true\">\n    <span>{{link.term | keyToLabel}}</span>\n  </he-node-link>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{value}}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey;context:{link, model}\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">{{model | keyToLabel}}</span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\"><code>{{strategy}}</code></span>\n\n  <a class=\"is-size-7\" [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\" target=\"_blank\">\n    <span class=\"pr-1\">(View Docs)</span>\n    <fa-icon icon=\"external-link-alt\"></fa-icon>\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    <p *ngFor=\"let arg of args | keys\">\n      <span class=\"has-text-underline\">{{arg.key}}</span>: <code>{{arg.value | json}}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4A4A4A}\n"] }]
         }], ctorParameters: function () { return [{ type: HeEngineService }]; }, propDecorators: { config: [{
                 type: Input
             }], nodeType: [{
@@ -6679,7 +6711,7 @@ class EngineRequirementsFormComponent {
     }
 }
 EngineRequirementsFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EngineRequirementsFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component });
-EngineRequirementsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0, template: "<form class=\"needs-validation mt-3\" novalidate\n  [formGroup]=\"form\"\n>\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermId\">\n        <span>Product Term ID</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\" [class.has-icons-right]=\"suggestingProductTermId\">\n          <input class=\"input\"\n            formControlName=\"productTermId\" name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\"\n          >\n          <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!suggestingProductTermId\">\n            <fa-icon icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermType\">\n        <span>Product Term Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"productTermType\" name=\"productTermType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let termType of productTermTermType\" [value]=\"termType\">{{termType | keyToLabel}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"tier\">\n        <span>Emissions Method Tier</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"tier\" name=\"tier\">\n              <option [ngValue]=\"undefined\">Select a Tier</option>\n              <option *ngFor=\"let tier of EmissionMethodTier | keys\" [value]=\"tier.value\">{{tier.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"siteType\">\n        <span>Site Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"siteType\" name=\"siteType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let siteType of SiteSiteType | keys\" [value]=\"siteType.value\">{{siteType.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestionProductTermId let-r=\"result\" let-t=\"term\">\n  <ngb-highlight [result]=\"r.name\" [term]=\"t\"></ngb-highlight>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i5.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EngineRequirementsFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0, template: "<form class=\"needs-validation mt-3\" novalidate\n  [formGroup]=\"form\"\n>\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermId\">\n        <span>Product Term ID</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\" [class.has-icons-right]=\"suggestingProductTermId\">\n          <input class=\"input\"\n            formControlName=\"productTermId\" name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\"\n          >\n          <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!suggestingProductTermId\">\n            <fa-icon icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermType\">\n        <span>Product Term Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"productTermType\" name=\"productTermType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let termType of productTermTermType\" [value]=\"termType\">{{termType | keyToLabel}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"tier\">\n        <span>Emissions Method Tier</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"tier\" name=\"tier\">\n              <option [ngValue]=\"undefined\">Select a Tier</option>\n              <option *ngFor=\"let tier of EmissionMethodTier | keys\" [value]=\"tier.value\">{{tier.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"siteType\">\n        <span>Site Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"siteType\" name=\"siteType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let siteType of SiteSiteType | keys\" [value]=\"siteType.value\">{{siteType.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestionProductTermId let-r=\"result\" let-t=\"term\">\n  <ngb-highlight [result]=\"r.name\" [term]=\"t\"></ngb-highlight>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: EngineRequirementsFormComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-engine-requirements-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"needs-validation mt-3\" novalidate\n  [formGroup]=\"form\"\n>\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermId\">\n        <span>Product Term ID</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\" [class.has-icons-right]=\"suggestingProductTermId\">\n          <input class=\"input\"\n            formControlName=\"productTermId\" name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\"\n          >\n          <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!suggestingProductTermId\">\n            <fa-icon icon=\"spinner\" [pulse]=\"true\"></fa-icon>\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"productTermType\">\n        <span>Product Term Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"productTermType\" name=\"productTermType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let termType of productTermTermType\" [value]=\"termType\">{{termType | keyToLabel}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"tier\">\n        <span>Emissions Method Tier</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"tier\" name=\"tier\">\n              <option [ngValue]=\"undefined\">Select a Tier</option>\n              <option *ngFor=\"let tier of EmissionMethodTier | keys\" [value]=\"tier.value\">{{tier.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"field is-horizontal mt-3\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"siteType\">\n        <span>Site Type</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"field\">\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth\">\n            <select formControlName=\"siteType\" name=\"siteType\">\n              <option [ngValue]=\"undefined\">Select a Type</option>\n              <option *ngFor=\"let siteType of SiteSiteType | keys\" [value]=\"siteType.value\">{{siteType.value}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestionProductTermId let-r=\"result\" let-t=\"term\">\n  <ngb-highlight [result]=\"r.name\" [term]=\"t\"></ngb-highlight>\n</ng-template>\n" }]
@@ -7791,10 +7823,10 @@ class SitesMeasurementsComponent {
     }
 }
 SitesMeasurementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SitesMeasurementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SitesMeasurementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\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\">\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  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"sites.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\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 [innerHtml]=\"measurement.value.term.name | ellipsis:30 | compound\"></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              [innerHtml]=\"measurement.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\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\" [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\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    </he-data-table>\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  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.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=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+SitesMeasurementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"sites.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.name\"\n            >\n              <he-node-link [node]=\"measurement.value.term\">\n                <span [innerHtml]=\"measurement.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.units\"\n              [innerHtml]=\"measurement.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [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\" [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\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    </he-data-table>\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  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.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=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: SitesMeasurementsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-sites-measurements', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\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\">\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  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"sites.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\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 [innerHtml]=\"measurement.value.term.name | ellipsis:30 | compound\"></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              [innerHtml]=\"measurement.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\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\" [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\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    </he-data-table>\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  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.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=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"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"] }]
+            args: [{ selector: 'he-sites-measurements', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"sites.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.name\"\n            >\n              <he-node-link [node]=\"measurement.value.term\">\n                <span [innerHtml]=\"measurement.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\"\n              [attr.title]=\"measurement.value.term.units\"\n              [innerHtml]=\"measurement.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [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\" [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\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    </he-data-table>\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  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{i + 1}}. {{defaultLabel(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.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=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"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"] }]
         }], propDecorators: { originalValues: [{
                 type: Input
             }], sites: [{
@@ -7909,7 +7941,7 @@ class FilesFormComponent {
         this.formatPropertyError = formatPropertyError;
         this.properties = [];
         this.formatter = (value) => { var _a; return typeof value === 'object' ? ('bibliography' in value ? (_a = value.bibliography) === null || _a === void 0 ? void 0 : _a.title : value.name) : value; };
-        this.suggestNewProperty = (fullKey) => (text$) => text$.pipe(distinctUntilChanged(), switchMap(term => of(this.newProperties(findProperty(this.properties, fullKey) || this.nodeProperty, term))));
+        this.suggestNewProperty = ({ fullKey }) => (text$) => text$.pipe(distinctUntilChanged(), switchMap(term => of(this.newProperties(findProperty(this.properties, fullKey) || this.nodeProperty, term))));
         this.suggestExistingNode = (type, term, uniqueKey = '@id') => term.length < MIN_TYPEAHEAD_LENGTH ?
             of([]) :
             this.searchService.suggest(term, type, [], {
@@ -7948,10 +7980,10 @@ class FilesFormComponent {
                 of([]) :
                 this.searchService.suggest(term, NodeType.Term, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.queries) || [], null, 5, this.suggestTermFields))
         };
-        this.propertySuggest = (fullKey, suggestType) => (text$) => text$.pipe(debounceTime(suggestType === defaultSuggestionType ? 0 : 300), distinctUntilChanged(), mergeMap(term => {
+        this.propertySuggest = ({ fullKey, suggestions }) => (text$) => text$.pipe(debounceTime((suggestions === null || suggestions === void 0 ? void 0 : suggestions.type) === defaultSuggestionType ? 0 : 300), distinctUntilChanged(), mergeMap(term => {
             const property = findProperty(this.properties, fullKey);
-            return (property === null || property === void 0 ? void 0 : property.editable) && suggestType in this.suggester ?
-                of(term).pipe(tap(() => property.loading = true), switchMap(() => this.suggester[suggestType](term, property)), tap(() => property.loading = false)) :
+            return (property === null || property === void 0 ? void 0 : property.editable) && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.type) in this.suggester ?
+                of(term).pipe(tap(() => property.loading = true), switchMap(() => this.suggester[suggestions === null || suggestions === void 0 ? void 0 : suggestions.type](term, property)), tap(() => property.loading = false)) :
                 of([]);
         }));
     }
@@ -8290,10 +8322,10 @@ class FilesFormComponent {
     }
 }
 FilesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesFormComponent, deps: [{ token: i0.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0.ɵɵFactoryTarget.Component });
-FilesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, 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\n  <ng-content></ng-content>\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              <ng-container *ngIf=\"editable && !errorsEditable\">\n                <button class=\"button is-dark is-outlined is-small\" type=\"button\"\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\n                <he-node-recommendations buttonClass=\"is-small\"\n                [node]=\"node\" [nodeField]=\"property.key\"\n                (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i5.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i5.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] });
+FilesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, 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\n  <ng-content></ng-content>\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-secondary]=\"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              <ng-container *ngIf=\"editable && !errorsEditable\">\n                <button class=\"button is-info is-small\" type=\"button\"\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\n                <he-node-recommendations buttonClass=\"is-small\"\n                [node]=\"node\" [nodeField]=\"property.key\"\n                (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\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-secondary]=\"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]=\"property | applyPure: propertySuggest\"\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-secondary]=\"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-info': 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]=\"property | applyPure: suggestNewProperty\"\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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-form', 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\n  <ng-content></ng-content>\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              <ng-container *ngIf=\"editable && !errorsEditable\">\n                <button class=\"button is-dark is-outlined is-small\" type=\"button\"\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\n                <he-node-recommendations buttonClass=\"is-small\"\n                [node]=\"node\" [nodeField]=\"property.key\"\n                (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\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"] }]
+            args: [{ selector: 'he-files-form', 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\n  <ng-content></ng-content>\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-secondary]=\"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              <ng-container *ngIf=\"editable && !errorsEditable\">\n                <button class=\"button is-info is-small\" type=\"button\"\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\n                <he-node-recommendations buttonClass=\"is-small\"\n                [node]=\"node\" [nodeField]=\"property.key\"\n                (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n                ></he-node-recommendations>\n              </ng-container>\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-secondary]=\"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]=\"property | applyPure: propertySuggest\"\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-secondary]=\"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-info': 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]=\"property | applyPure: suggestNewProperty\"\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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: HeSearchService }, { type: HeUsersService }]; }, propDecorators: { schemas: [{
                 type: Input
             }], errors: [{
@@ -9129,10 +9161,10 @@ class ImpactAssessmentsGraphComponent {
     }
 }
 ImpactAssessmentsGraphComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [{ token: i0.NgZone }, { token: HeSearchService }, { token: HeNodeService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ImpactAssessmentsGraphComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n            ></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{legendItem.mobileText}}</span>\n              <span class=\"is-hidden-touch\">{{legendItem.text}}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">Calculations are not up to date. Some terms may not display correctly.</span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\" class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">No chart available. Switch to <code>recalculated</code> version.</p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 768px){.key-label{font-size:.675rem}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}@media screen and (min-width: 1408px){.is-legend-item{min-width:200px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}:host ::ng-deep .tip-background{fill:#000}:host ::ng-deep .tip-text{font-weight:400;alignment-baseline:central;fill:#fff}:host ::ng-deep .tip-text *{font-weight:inherit;alignment-baseline:inherit}:host ::ng-deep .tip-text-key{font-weight:700}:host ::ng-deep .tip-anchor{text-decoration:underline;color:#fff;cursor:pointer;fill:#fff}:host ::ng-deep .tip-anchor:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: HeSearchService }, { type: HeNodeService }, { type: HeEngineService }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
@@ -9233,10 +9265,10 @@ class ImpactAssessmentsIndicatorsChartComponent {
     }
 }
 ImpactAssessmentsIndicatorsChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsIndicatorsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 an Indicator</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}} ({{term.units}})</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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+ImpactAssessmentsIndicatorsChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n        </select>\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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', 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 an Indicator</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}} ({{term.units}})</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"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n        </select>\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"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
@@ -9482,10 +9514,10 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
     }
 }
 ImpactAssessmentsIndicatorBreakdownChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [{ token: i0.NgZone }, { token: i1$1.DomSanitizer }, { token: HeSearchService }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsIndicatorBreakdownChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: "impactAssessment", indicators: "indicators" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{term.name}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a class=\"button is-dark is-outlined is-small\" [href]=\"csvContent\" [download]=\"id + '-logs.csv'\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download All (CSV)</span>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{selectedTerm?.name}}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{selectedMethod.name}})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ImpactAssessmentsIndicatorBreakdownChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: "impactAssessment", indicators: "indicators" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{term.name}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a class=\"button is-ghost is-small\" [href]=\"csvContent\" [download]=\"id + '-logs.csv'\"\n        nbgTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{selectedTerm?.name}}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{selectedMethod.name}})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{term.name}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a class=\"button is-dark is-outlined is-small\" [href]=\"csvContent\" [download]=\"id + '-logs.csv'\">\n        <fa-icon icon=\"download\"></fa-icon>\n        <span class=\"pl-2\">Download All (CSV)</span>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{selectedTerm?.name}}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{selectedMethod.name}})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}} ({{term.units}})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{term.name}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a class=\"button is-ghost is-small\" [href]=\"csvContent\" [download]=\"id + '-logs.csv'\"\n        nbgTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{selectedTerm?.name}}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{selectedMethod.name}})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.DomSanitizer }, { type: HeSearchService }, { type: HeNodeService }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
@@ -9612,10 +9644,10 @@ class ImpactAssessmentsProductsComponent {
     }
 }
 ImpactAssessmentsProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component });
-ImpactAssessmentsProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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\">\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  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i5.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
+ImpactAssessmentsProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "nbRows", "small", "height", "width"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-products', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column is-hidden-mobile\"></div>\n  <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n    <div class=\"column is-narrow\">\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    <div class=\"column is-narrow col-sep is-hidden-mobile\"></div>\n  </ng-container>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-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\">\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  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr>\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr>\n            <th class=\"width-auto\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-products', template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button class=\"button is-ghost\" (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\" placement=\"bottom\"\n      >\n        <fa-icon icon=\"download\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.table\" (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.chart\" (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.breakdown\" (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button class=\"button is-small\" [class.is-selected]=\"selectedView === View.logs\" (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span>Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" [nbRows]=\"impactAssessments.length\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\"\n                  (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\"\n                >\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{term.name}}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.name\"\n            >\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis:30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\"\n              [attr.title]=\"indicator.value.term.units\"\n              [innerHtml]=\"indicator.value.term.units | compound\"\n            ></th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{impactName(impactAssessment)}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.units\">\n                <span class=\"is-nowrap has-text-ellipsis\">1 {{impactAssessment.product?.units}}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product\" [node]=\"impactAssessment.product\">\n                  <span>{{impactAssessment.product.name | ellipsis:30}}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\" [autoClose]=\"'outside'\"\n                  triggers=\"manual\" #p=\"ngbPopover\" placement=\"left\" container=\"body\"\n                  (click)=\"togglePopover(p, { data: indicator.value.values[impactAssessment['@id']], impactAssessment: impactAssessment, key: key })\"\n                >\n                  <span pointer>{{propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id']) | precision:3 | default:'-'}}</span>\n                  <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"\n                  ></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"\n></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"\n></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">{{i + 1}}. {{impactName(value)}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"\n  ></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\" [filename]=\"'impact-' + key + '.csv'\" [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"\n></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data</span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{cycleLabel(node.cycle)}}</span>\n      <span *ngIf=\"!data.cycle\">{{data.name}}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\" [nodeType]=\"node['@type']\" [dataKey]=\"key\"\n  ></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.product.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { cycles: [{
                 type: Input
             }], impactAssessments: [{
@@ -9700,5 +9732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, EllipsisPipe, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, GetPipe, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaService, HeSearchModule, HeSearchService, HeSitesModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MapsDrawingConfirmComponent, MendeleySearchResult, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, Repository, SchemaVersionLinkComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, TagsInputDirective, Template, TimesPipe, ToastComponent, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeTerms, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, deserializeSearchFilters, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, filenameWithoutExt, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findProperty, findPropertyById, formatCustomErrorMessage, formatError, formatPropertyError, gitBranch, gitHome, gitRawBaseUrl, groupChanged, groupLogsByModel, groupLogsByTerm, handleAPIError, hasError, hasWarning, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMissingOneOfError, isMissingPropertyError, isSchemaIri, isScrolledBelow, itemColor, keyToDataPath, levels, linkTypeEnabled, listColor, locationQuery, logValueArray, logsKey, lookupUrl, lookups, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, missingNodeErrorMessage, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, safeJSONParse, safeJSONStringify, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchQuery, searchResultsFields, searchableTypes, serializeSearchFilters, siblingProperty, singleProperty, siteTooBig, sortOrder, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, termChildToParent, termLocation, termLocationName, termProperties, termTypeGroups, termTypeLabel, termTypeLookupUrl, toCsv$1 as toCsv, typeToNewProperty, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, EllipsisPipe, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, GetPipe, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaService, HeSearchModule, HeSearchService, HeSitesModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MapsDrawingConfirmComponent, MendeleySearchResult, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, Repository, SchemaVersionLinkComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, TagsInputDirective, Template, TimesPipe, ToastComponent, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeTerms, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, deserializeSearchFilters, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, filenameWithoutExt, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findProperty, findPropertyById, formatCustomErrorMessage, formatError, formatPropertyError, gitBranch, gitHome, gitRawBaseUrl, groupChanged, groupLogsByModel, groupLogsByTerm, handleAPIError, hasError, hasWarning, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMissingOneOfError, isMissingPropertyError, isSchemaIri, isScrolledBelow, itemColor, keyToDataPath, levels, linkTypeEnabled, listColor, locationQuery, logValueArray, logsKey, lookupUrl, lookups, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, missingNodeErrorMessage, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, safeJSONParse, safeJSONStringify, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchQuery, searchResultsFields, searchableTypes, serializeSearchFilters, siblingProperty, singleProperty, siteTooBig, sortOrder, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, termChildToParent, termLocation, termLocationName, termProperties, termTypeGroups, termTypeLabel, termTypeLookupUrl, toCsv$1 as toCsv, typeToNewProperty, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map