@hestia-earth/ui-components 0.0.32 → 0.1.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/google-maps'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-solid-svg-icons'), require('@angular/platform-browser'), require('rxjs'), require('random-material-color'), require('@hestia-earth/schema'), require('@hestia-earth/api'), require('@hestia-earth/utils'), require('pluralize'), require('rxjs/operators'), require('@hestia-earth/utils/dist/term'), require('csvtojson'), require('@angular/common/http'), require('@hestia-earth/utils/dist/delta'), require('json-2-csv'), require('@angular/cdk/drag-drop'), require('@hestia-earth/schema-convert'), require('@hestia-earth/json-schema/schema-utils'), require('jsondiffpatch'), require('chart.js'), require('moment'), require('moment/locale/en-gb'), require('uuid'), require('@google/markerclustererplus'), require('chartjs-plugin-datalabels')) :
-    typeof define === 'function' && define.amd ? define('@hestia-earth/ui-components', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/router', '@ng-bootstrap/ng-bootstrap', '@angular/google-maps', '@fortawesome/angular-fontawesome', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-solid-svg-icons', '@angular/platform-browser', 'rxjs', 'random-material-color', '@hestia-earth/schema', '@hestia-earth/api', '@hestia-earth/utils', 'pluralize', 'rxjs/operators', '@hestia-earth/utils/dist/term', 'csvtojson', '@angular/common/http', '@hestia-earth/utils/dist/delta', 'json-2-csv', '@angular/cdk/drag-drop', '@hestia-earth/schema-convert', '@hestia-earth/json-schema/schema-utils', 'jsondiffpatch', 'chart.js', 'moment', 'moment/locale/en-gb', 'uuid', '@google/markerclustererplus', 'chartjs-plugin-datalabels'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["hestia-earth"] = global["hestia-earth"] || {}, global["hestia-earth"]["ui-components"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.router, global.i11, global.ng.googleMaps, global.i1, global.freeRegularSvgIcons, global.freeSolidSvgIcons, global.ng.platformBrowser, global.rxjs, global.randomMaterialColor, global.schema, global.api, global.utils, global.pluralize, global.rxjs.operators, global.term, global.csvtojson, global.ng.common.http, global.delta, global.json2Csv, global.ng.cdk.dragDrop, global.schemaConvert, global.schemaUtils, global.jsondiffpatch, global.chart_js, global.moment, null, global.uuid$1, global.MarkerClusterer, global.ChartDataLabels));
-})(this, (function (exports, i0, i6, i1$2, i5, i11, i1$4, i1, freeRegularSvgIcons, freeSolidSvgIcons, i1$1, rxjs, randomMaterialColor, schema, api, utils, pluralize, operators, term, csvtojson, i1$3, delta, json2Csv, i6$1, schemaConvert, schemaUtils, jsondiffpatch, chart_js, moment, enGb, uuid$1, MarkerClusterer, ChartDataLabels) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/google-maps'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-solid-svg-icons'), require('@angular/platform-browser'), require('rxjs'), require('random-material-color'), require('@hestia-earth/schema'), require('@hestia-earth/api'), require('@hestia-earth/utils'), require('pluralize'), require('rxjs/operators'), require('@hestia-earth/utils/dist/term'), require('csvtojson'), require('@angular/common/http'), require('@hestia-earth/utils/dist/delta'), require('json-2-csv'), require('@angular/cdk/drag-drop'), require('@hestia-earth/schema-convert'), require('@hestia-earth/json-schema/schema-utils'), require('jsondiffpatch'), require('chart.js'), require('moment'), require('moment/locale/en-gb'), require('uuid'), require('@google/markerclustererplus'), require('@hestia-earth/glossary'), require('chartjs-plugin-datalabels')) :
+    typeof define === 'function' && define.amd ? define('@hestia-earth/ui-components', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/router', '@ng-bootstrap/ng-bootstrap', '@angular/google-maps', '@fortawesome/angular-fontawesome', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-solid-svg-icons', '@angular/platform-browser', 'rxjs', 'random-material-color', '@hestia-earth/schema', '@hestia-earth/api', '@hestia-earth/utils', 'pluralize', 'rxjs/operators', '@hestia-earth/utils/dist/term', 'csvtojson', '@angular/common/http', '@hestia-earth/utils/dist/delta', 'json-2-csv', '@angular/cdk/drag-drop', '@hestia-earth/schema-convert', '@hestia-earth/json-schema/schema-utils', 'jsondiffpatch', 'chart.js', 'moment', 'moment/locale/en-gb', 'uuid', '@google/markerclustererplus', '@hestia-earth/glossary', 'chartjs-plugin-datalabels'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["hestia-earth"] = global["hestia-earth"] || {}, global["hestia-earth"]["ui-components"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.router, global.i11, global.ng.googleMaps, global.i1, global.freeRegularSvgIcons, global.freeSolidSvgIcons, global.ng.platformBrowser, global.rxjs, global.randomMaterialColor, global.schema, global.api, global.utils, global.pluralize, global.rxjs.operators, global.term, global.csvtojson, global.ng.common.http, global.delta, global.json2Csv, global.ng.cdk.dragDrop, global.schemaConvert, global.schemaUtils, global.jsondiffpatch, global.chart_js, global.moment, null, global.uuid$1, global.MarkerClusterer, global.glossary, global.ChartDataLabels));
+})(this, (function (exports, i0, i6, i1$2, i5, i11, i1$4, i1, freeRegularSvgIcons, freeSolidSvgIcons, i1$1, rxjs, randomMaterialColor, schema, api, utils, pluralize, operators, term, csvtojson, i1$3, delta, json2Csv, i6$1, schemaConvert, schemaUtils, jsondiffpatch, chart_js, moment, enGb, uuid$1, MarkerClusterer, glossary, ChartDataLabels) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -392,7 +392,7 @@
             // free-regular
             freeRegularSvgIcons.faClone, freeRegularSvgIcons.faCircle, freeRegularSvgIcons.faIdBadge, 
             // free-solid
-            freeSolidSvgIcons.faAngleDoubleLeft, freeSolidSvgIcons.faAngleDoubleRight, freeSolidSvgIcons.faAngleDown, freeSolidSvgIcons.faAngleLeft, freeSolidSvgIcons.faAngleRight, freeSolidSvgIcons.faBookOpen, freeSolidSvgIcons.faBuilding, freeSolidSvgIcons.faCalculator, freeSolidSvgIcons.faChartBar, freeSolidSvgIcons.faCheck, freeSolidSvgIcons.faCircle, freeSolidSvgIcons.faClipboard, freeSolidSvgIcons.faClipboardList, freeSolidSvgIcons.faClone, freeSolidSvgIcons.faComments, freeSolidSvgIcons.faDownload, freeSolidSvgIcons.faDrawPolygon, freeSolidSvgIcons.faEdit, freeSolidSvgIcons.faExclamationTriangle, freeSolidSvgIcons.faExternalLinkAlt, freeSolidSvgIcons.faFilter, freeSolidSvgIcons.faList, freeSolidSvgIcons.faLongArrowAltDown, freeSolidSvgIcons.faLongArrowAltUp, freeSolidSvgIcons.faLongArrowAltLeft, freeSolidSvgIcons.faLongArrowAltRight, freeSolidSvgIcons.faMap, freeSolidSvgIcons.faMapMarked, freeSolidSvgIcons.faMapMarkedAlt, freeSolidSvgIcons.faMinusCircle, freeSolidSvgIcons.faPlus, freeSolidSvgIcons.faPlusCircle, freeSolidSvgIcons.faSearch, freeSolidSvgIcons.faSeedling, freeSolidSvgIcons.faSpellCheck, freeSolidSvgIcons.faSpinner, freeSolidSvgIcons.faTimes, freeSolidSvgIcons.faUser);
+            freeSolidSvgIcons.faAngleDoubleLeft, freeSolidSvgIcons.faAngleDoubleRight, freeSolidSvgIcons.faAngleDown, freeSolidSvgIcons.faAngleLeft, freeSolidSvgIcons.faAngleRight, freeSolidSvgIcons.faBookOpen, freeSolidSvgIcons.faBuilding, freeSolidSvgIcons.faCalculator, freeSolidSvgIcons.faChartBar, freeSolidSvgIcons.faCheck, freeSolidSvgIcons.faCircle, freeSolidSvgIcons.faClipboard, freeSolidSvgIcons.faClipboardList, freeSolidSvgIcons.faClone, freeSolidSvgIcons.faComments, freeSolidSvgIcons.faDownload, freeSolidSvgIcons.faDrawPolygon, freeSolidSvgIcons.faEdit, freeSolidSvgIcons.faEllipsisV, freeSolidSvgIcons.faExclamationTriangle, freeSolidSvgIcons.faExternalLinkAlt, freeSolidSvgIcons.faFilter, freeSolidSvgIcons.faList, freeSolidSvgIcons.faLongArrowAltDown, freeSolidSvgIcons.faLongArrowAltUp, freeSolidSvgIcons.faLongArrowAltLeft, freeSolidSvgIcons.faLongArrowAltRight, freeSolidSvgIcons.faMap, freeSolidSvgIcons.faMapMarked, freeSolidSvgIcons.faMapMarkedAlt, freeSolidSvgIcons.faMinusCircle, freeSolidSvgIcons.faPlus, freeSolidSvgIcons.faPlusCircle, freeSolidSvgIcons.faSearch, freeSolidSvgIcons.faSeedling, freeSolidSvgIcons.faSpellCheck, freeSolidSvgIcons.faSpinner, freeSolidSvgIcons.faTimes, freeSolidSvgIcons.faUser);
         }
         return HeFontawesomeModule;
     }());
@@ -437,13 +437,14 @@
         return SocialTagsComponent;
     }());
     SocialTagsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SocialTagsComponent, deps: [{ token: i1__namespace$1.Meta }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SocialTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SocialTagsComponent, selector: "he-social-tags", inputs: { config: "config" }, host: { properties: { "class": "this.classes" } }, ngImport: i0__namespace, template: "<span></span>\n", styles: [""] });
+    SocialTagsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SocialTagsComponent, selector: "he-social-tags", inputs: { config: "config" }, host: { properties: { "class": "this.classes" } }, ngImport: i0__namespace, template: "<span></span>\n", styles: [""], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SocialTagsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-social-tags',
                         templateUrl: './social-tags.component.html',
-                        styleUrls: ['./social-tags.component.scss']
+                        styleUrls: ['./social-tags.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.Meta }]; }, propDecorators: { config: [{
                     type: i0.Input
@@ -1057,7 +1058,6 @@
         schema.EmissionMethodTier['tier 1'],
         schema.EmissionMethodTier.background
     ].indexOf(methodTier); };
-    var isMethodModelAllowed = function (node, filterMethod) { return !filterMethod || !node['methodModel'] || node['methodModel']['@id'] === filterMethod['@id']; };
     var grouppedValueKeys = [
         'dates', 'sd', 'min', 'max', 'inputs', 'depthUpper', 'depthLower', 'startDate', 'endDate',
         'methodTier', 'methodModel'
@@ -1065,11 +1065,13 @@
     var isHigherState = function (sourceNode, newNode) { return !sourceNode ||
         isState(newNode, 'value', NodeKeyState.updated) ||
         (!isState(sourceNode, 'value', NodeKeyState.updated) && isState(newNode, 'value', NodeKeyState.added)); };
-    var groupNodesByTerm = function (nodes, key, originalValues, filterMethod) {
+    var groupNodesByTerm = function (nodes, key, originalValues, includeNode) {
         if (nodes === void 0) { nodes = []; }
         if (originalValues === void 0) { originalValues = []; }
+        if (includeNode === void 0) { includeNode = function (node) { return true; }; }
         var groups = nodes.reduce(function (prev, node, index) { return (node[key] || []).reduce(function (group, blankNode) {
-            if (!isMethodModelAllowed(blankNode, filterMethod)) {
+            // skip node based on condition
+            if (!includeNode(blankNode)) {
                 return group;
             }
             var nodeId = node['@id'];
@@ -1592,13 +1594,14 @@
         return BlankNodeStateComponent;
     }());
     BlankNodeStateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeStateComponent, deps: [{ token: HeAggregationEngineService }, { token: HeEngineService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BlankNodeStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: { nodeType: "nodeType", dataKey: "dataKey", key: "key", node: "node", state: "state" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"node\">\n  <span *ngFor=\"let star of stars\">*</span>\n  <span *ngIf=\"is(NodeKeyState.unchanged)\">\u2020</span>\n\n  <ng-container *ngIf=\"showLink\">\n    <!-- <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.aggregated)\">\n      <ng-container *ngIf=\"aggregatedModel$ | async as model\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n      </ng-container>\n    </span> -->\n\n    <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.added); else showUpdated\">\n      <ng-container *ngIf=\"engineModel$ | async as model\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n      </ng-container>\n    </span>\n  </ng-container>\n</ng-container>\n\n<ng-template #showUpdated>\n  <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.updated)\">\n    <ng-container *ngIf=\"engineModel$ | async as model\">\n      <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n    </ng-container>\n  </span>\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-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:inline-block}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+    BlankNodeStateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: { nodeType: "nodeType", dataKey: "dataKey", key: "key", node: "node", state: "state" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"node\">\n  <span *ngFor=\"let star of stars\">*</span>\n  <span *ngIf=\"is(NodeKeyState.unchanged)\">\u2020</span>\n\n  <ng-container *ngIf=\"showLink\">\n    <!-- <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.aggregated)\">\n      <ng-container *ngIf=\"aggregatedModel$ | async as model\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n      </ng-container>\n    </span> -->\n\n    <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.added); else showUpdated\">\n      <ng-container *ngIf=\"engineModel$ | async as model\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n      </ng-container>\n    </span>\n  </ng-container>\n</ng-container>\n\n<ng-template #showUpdated>\n  <span class=\"ml-2\" *ngIf=\"is(NodeKeyState.updated)\">\n    <ng-container *ngIf=\"engineModel$ | async as model\">\n      <ng-container *ngTemplateOutlet=\"docsLink; context: {$implicit: model}\"></ng-container>\n    </ng-container>\n  </span>\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-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:inline-block}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeStateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-blank-node-state',
                         templateUrl: './blank-node-state.component.html',
-                        styleUrls: ['./blank-node-state.component.scss']
+                        styleUrls: ['./blank-node-state.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeAggregationEngineService }, { type: HeEngineService }]; }, propDecorators: { nodeType: [{
                     type: i0.Input
@@ -1628,13 +1631,14 @@
         return BlankNodeStateNoticeComponent;
     }());
     BlankNodeStateNoticeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeStateNoticeComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BlankNodeStateNoticeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: { dataState: "dataState", showAggregated: "showAggregated", showDeleted: "showDeleted", showUnchanged: "showUnchanged" }, ngImport: i0__namespace, template: "<p class=\"is-size-7 is-italic\" *ngIf=\"show\">\n  <span>Recalculations:</span>\n  <span class=\"pl-1 notice-data-added\">* Data Added</span>\n  <span class=\"pl-1 notice-data-updated\">** Data Updated</span>\n  <span *ngIf=\"showAggregated\" class=\"pl-1 notice-data-aggregated\">*** Data Aggregated</span>\n  <span *ngIf=\"showDeleted\" class=\"pl-1 notice-data-deleted\">**** Data Deleted</span>\n  <span *ngIf=\"showUnchanged\" class=\"pl-1 notice-data-unchaged\">\u2020 Data Unchanged</span>\n</p>\n", styles: [""], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    BlankNodeStateNoticeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: { dataState: "dataState", showAggregated: "showAggregated", showDeleted: "showDeleted", showUnchanged: "showUnchanged" }, ngImport: i0__namespace, template: "<p class=\"is-size-7 is-italic\" *ngIf=\"show\">\n  <span>Recalculations:</span>\n  <span class=\"pl-1 notice-data-added\">* Data Added</span>\n  <span class=\"pl-1 notice-data-updated\">** Data Updated</span>\n  <span *ngIf=\"showAggregated\" class=\"pl-1 notice-data-aggregated\">*** Data Aggregated</span>\n  <span *ngIf=\"showDeleted\" class=\"pl-1 notice-data-deleted\">**** Data Deleted</span>\n  <span *ngIf=\"showUnchanged\" class=\"pl-1 notice-data-unchaged\">\u2020 Data Unchanged</span>\n</p>\n", styles: [""], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeStateNoticeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-blank-node-state-notice',
                         templateUrl: './blank-node-state-notice.component.html',
-                        styleUrls: ['./blank-node-state-notice.component.scss']
+                        styleUrls: ['./blank-node-state-notice.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { dataState: [{
                     type: i0.Input
@@ -1689,13 +1693,14 @@
         return BlankNodeValueDeltaComponent;
     }());
     BlankNodeValueDeltaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeValueDeltaComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BlankNodeValueDeltaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: { value: "value", originalValue: "originalValue", displayType: "displayType" }, ngImport: i0__namespace, template: "<small [class.is-hidden]=\"hide\">\n  <span class=\"has-text-{{color}}\">\n    <span *ngIf=\"delta > 0\">+</span>\n    <ng-container [ngSwitch]=\"displayType\">\n      <ng-container *ngSwitchCase=\"DeltaDisplayType.absolute\">\n        <span *bindOnce=\"delta\">{{delta | precision:3}}</span>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DeltaDisplayType.percent\">\n        <span *bindOnce=\"delta\">{{delta | number:'1.0-2'}}</span>\n        <span>%</span>\n      </ng-container>\n    </ng-container>\n  </span>\n</small>\n", styles: [""], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], pipes: { "precision": PrecisionPipe, "number": i6__namespace.DecimalPipe } });
+    BlankNodeValueDeltaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: { value: "value", originalValue: "originalValue", displayType: "displayType" }, ngImport: i0__namespace, template: "<small [class.is-hidden]=\"hide\">\n  <span class=\"has-text-{{color}}\">\n    <span *ngIf=\"delta > 0\">+</span>\n    <ng-container [ngSwitch]=\"displayType\">\n      <ng-container *ngSwitchCase=\"DeltaDisplayType.absolute\">\n        <span *bindOnce=\"delta\">{{delta | precision:3}}</span>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"DeltaDisplayType.percent\">\n        <span *bindOnce=\"delta\">{{delta | number:'1.0-2'}}</span>\n        <span>%</span>\n      </ng-container>\n    </ng-container>\n  </span>\n</small>\n", styles: [""], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], pipes: { "precision": PrecisionPipe, "number": i6__namespace.DecimalPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BlankNodeValueDeltaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-blank-node-value-delta',
                         templateUrl: './blank-node-value-delta.component.html',
-                        styleUrls: ['./blank-node-value-delta.component.scss']
+                        styleUrls: ['./blank-node-value-delta.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { value: [{
                     type: i0.Input
@@ -1836,13 +1841,14 @@
         return LinkKeyValueComponent;
     }());
     LinkKeyValueComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkKeyValueComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LinkKeyValueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: { node: "node", nodeType: "nodeType", dataKey: "dataKey", key: "key" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!isUndefined\">\n  <ng-container *bindOnce=\"node\">\n    <a [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\"><b>{{key}}</b></a>\n    <span class=\"pr-2\">:</span>\n    <a class=\"pr-1\" [href]=\"valueLink\" *ngIf=\"valueLink; else showString\">{{valueString}}</a>\n    <he-blank-node-state\n      [node]=\"node\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"\n    ></he-blank-node-state>\n  </ng-container>\n</ng-container>\n\n<ng-template #showString>\n  <ng-container *ngIf=\"isArray\">\n    <p *ngFor=\"let v of value\">{{toString(v) | precision:3}}</p>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray\">\n    <span class=\"pr-1\">{{valueString | precision:3}}</span>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block}\n"], components: [{ type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "precision": PrecisionPipe } });
+    LinkKeyValueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: { node: "node", nodeType: "nodeType", dataKey: "dataKey", key: "key" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!isUndefined\">\n  <ng-container *bindOnce=\"node\">\n    <a [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\"><b>{{key}}</b></a>\n    <span class=\"pr-2\">:</span>\n    <a class=\"pr-1\" [href]=\"valueLink\" *ngIf=\"valueLink; else showString\">{{valueString}}</a>\n    <he-blank-node-state\n      [node]=\"node\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"\n    ></he-blank-node-state>\n  </ng-container>\n</ng-container>\n\n<ng-template #showString>\n  <ng-container *ngIf=\"isArray\">\n    <p *ngFor=\"let v of value\">{{toString(v) | precision:3}}</p>\n  </ng-container>\n  <ng-container *ngIf=\"!isArray\">\n    <span class=\"pr-1\">{{valueString | precision:3}}</span>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block}\n"], components: [{ type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "precision": PrecisionPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkKeyValueComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-link-key-value',
                         templateUrl: './link-key-value.component.html',
-                        styleUrls: ['./link-key-value.component.scss']
+                        styleUrls: ['./link-key-value.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { node: [{
                     type: i0.Input
@@ -2139,13 +2145,14 @@
         return SchemaVersionLinkComponent;
     }());
     SchemaVersionLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SchemaVersionLinkComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SchemaVersionLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass", text: "text" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"url\">\n  <a [href]=\"url\" target=\"_blank\" [class]=\"linkClass\" (click)=\"$event.stopPropagation()\">\n    <ng-content></ng-content>\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n  </a>\n</ng-container>\n", styles: ["a{color:inherit}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    SchemaVersionLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass", text: "text" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"url\">\n  <a [href]=\"url\" target=\"_blank\" [class]=\"linkClass\" (click)=\"$event.stopPropagation()\">\n    <ng-content></ng-content>\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n  </a>\n</ng-container>\n", styles: ["a{color:inherit}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SchemaVersionLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-schema-version-link',
                         templateUrl: './schema-version-link.component.html',
-                        styleUrls: ['./schema-version-link.component.scss']
+                        styleUrls: ['./schema-version-link.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { node: [{
                     type: i0.Input
@@ -2275,13 +2282,14 @@
         return UnitConverterComponent;
     }());
     UnitConverterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UnitConverterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    UnitConverterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UnitConverterComponent, selector: "he-unit-converter", inputs: { term: "term", value: "value", fromUnits: "fromUnits", toUnits: "toUnits" }, ngImport: i0__namespace, template: "<div class=\"columns mb-0\">\n  <div class=\"column\">\n    <label class=\"label has-text-white\" for=\"value\">Value</label>\n  </div>\n  <div class=\"column\">\n    <label class=\"label has-text-white\" for=\"result\">Convert To</label>\n  </div>\n</div>\n\n<div class=\"columns\">\n  <div class=\"column\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <input type=\"number\" class=\"input\" [(ngModel)]=\"value\" name=\"value\" id=\"value\"\n          (input)=\"updateValue()\"\n        >\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"fromUnits\" name=\"fromUnits\" id=\"fromUnits\"\n            (change)=\"updateUnits()\"\n          >\n            <option [value]=\"undefined\">Unit</option>\n            <option *ngFor=\"let unit of ConvertUnits | keys\" [value]=\"unit.value\">{{unit.key}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"column\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <input type=\"string\" class=\"input\" [value]=\"result\" name=\"result\" id=\"result\" readonly>\n      </div>\n      <div class=\"control\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"toUnits\" name=\"toUnits\" id=\"toUnits\"\n            (change)=\"updateUnits()\"\n          >\n            <option [value]=\"undefined\">Unit</option>\n            <option *ngFor=\"let unit of units\" [value]=\"unit\">{{unit}}</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-white px-2\"\n          [value]=\"result\" [disabled]=\"!result\" [hideText]=\"true\"\n        ></he-clipboard>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"field is-horizontal\" *ngFor=\"let arg of arguments\">\n  <div class=\"field-label is-normal\">\n    <label class=\"label has-text-white\" [for]=\"arg.key\">\n      <span class=\"is-capitalized\">{{arg.key}}</span>\n      <span class=\"has-text-danger pl-1\">*</span>\n    </label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <div class=\"control\">\n        <input type=\"string\" class=\"input is-small\"\n          [(ngModel)]=\"arg.value\" [id]=\"arg.key\"\n          (input)=\"updateValue()\"\n          placeholder=\"Required for conversion\"\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".select{min-width:85px}\n"], components: [{ type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }], directives: [{ type: i1__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keys": KeysPipe } });
+    UnitConverterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UnitConverterComponent, selector: "he-unit-converter", inputs: { term: "term", value: "value", fromUnits: "fromUnits", toUnits: "toUnits" }, ngImport: i0__namespace, template: "<div class=\"columns mb-0\">\n  <div class=\"column\">\n    <label class=\"label has-text-white\" for=\"value\">Value</label>\n  </div>\n  <div class=\"column\">\n    <label class=\"label has-text-white\" for=\"result\">Convert To</label>\n  </div>\n</div>\n\n<div class=\"columns\">\n  <div class=\"column\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <input type=\"number\" class=\"input\" [(ngModel)]=\"value\" name=\"value\" id=\"value\"\n          (input)=\"updateValue()\"\n        >\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"fromUnits\" name=\"fromUnits\" id=\"fromUnits\"\n            (change)=\"updateUnits()\"\n          >\n            <option [value]=\"undefined\">Unit</option>\n            <option *ngFor=\"let unit of ConvertUnits | keys\" [value]=\"unit.value\">{{unit.key}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"column\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <input type=\"string\" class=\"input\" [value]=\"result\" name=\"result\" id=\"result\" readonly>\n      </div>\n      <div class=\"control\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"toUnits\" name=\"toUnits\" id=\"toUnits\"\n            (change)=\"updateUnits()\"\n          >\n            <option [value]=\"undefined\">Unit</option>\n            <option *ngFor=\"let unit of units\" [value]=\"unit\">{{unit}}</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-white px-2\"\n          [value]=\"result\" [disabled]=\"!result\" [hideText]=\"true\"\n        ></he-clipboard>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"field is-horizontal\" *ngFor=\"let arg of arguments\">\n  <div class=\"field-label is-normal\">\n    <label class=\"label has-text-white\" [for]=\"arg.key\">\n      <span class=\"is-capitalized\">{{arg.key}}</span>\n      <span class=\"has-text-danger pl-1\">*</span>\n    </label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <div class=\"control\">\n        <input type=\"string\" class=\"input is-small\"\n          [(ngModel)]=\"arg.value\" [id]=\"arg.key\"\n          (input)=\"updateValue()\"\n          placeholder=\"Required for conversion\"\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".select{min-width:85px}\n"], components: [{ type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }], directives: [{ type: i1__namespace$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keys": KeysPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: UnitConverterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-unit-converter',
                         templateUrl: './unit-converter.component.html',
-                        styleUrls: ['./unit-converter.component.scss']
+                        styleUrls: ['./unit-converter.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { term: [{
                     type: i0.Input
@@ -4260,7 +4268,7 @@
      */
     var searchResultsFields = Object.freeze((_a$3 = {},
         _a$3[schema.NodeType.Cycle] = [
-            'description', 'dataDescription', 'endDate',
+            'description', 'endDate',
             'emissionsCount', 'inputsCount', 'productsCount',
             'site.location', 'site.country.name', 'site.region.name'
         ],
@@ -4271,7 +4279,7 @@
      * List of fields to search in.
      */
     var searchFields = Object.freeze((_b = {},
-        _b[schema.NodeType.Cycle] = ['name', 'description', 'dataDescription'],
+        _b[schema.NodeType.Cycle] = ['name', 'description'],
         _b[schema.NodeType.Source] = ['name', 'bibliography.title'],
         _b[schema.NodeType.ImpactAssessment] = ['name', 'product.name', 'country.name'],
         _b));
@@ -4526,13 +4534,14 @@
         return BibliographiesSearchConfirmComponent;
     }());
     BibliographiesSearchConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BibliographiesSearchConfirmComponent, deps: [{ token: i1__namespace$4.FormBuilder }, { token: HeMendeleyService }, { token: HeSearchService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BibliographiesSearchConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0__namespace, 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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+    BibliographiesSearchConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0__namespace, 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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i6__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BibliographiesSearchConfirmComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-bibliographies-search-confirm',
                         templateUrl: './bibliographies-search-confirm.component.html',
-                        styleUrls: ['./bibliographies-search-confirm.component.scss']
+                        styleUrls: ['./bibliographies-search-confirm.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$4.FormBuilder }, { type: HeMendeleyService }, { type: HeSearchService }]; }, propDecorators: { search: [{
                     type: i0.Input
@@ -4973,13 +4982,14 @@
         return NodeCsvSelectHeadersComponent;
     }());
     NodeCsvSelectHeadersComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeCsvSelectHeadersComponent, deps: [{ token: HeSchemaService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeCsvSelectHeadersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0__namespace, 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 #7a7a7a}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:2px;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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i1__namespace$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6__namespace$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "keys": KeysPipe } });
+    NodeCsvSelectHeadersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0__namespace, 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 #7a7a7a}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:2px;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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i1__namespace$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6__namespace$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "keys": KeysPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeCsvSelectHeadersComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-csv-select-headers',
                         templateUrl: './node-csv-select-headers.component.html',
-                        styleUrls: ['./node-csv-select-headers.component.scss']
+                        styleUrls: ['./node-csv-select-headers.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeSchemaService }]; }, propDecorators: { csv: [{
                     type: i0.Input
@@ -5039,13 +5049,14 @@
         return NodeCsvExportConfirmComponent;
     }());
     NodeCsvExportConfirmComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeCsvExportConfirmComponent, deps: [{ token: i1__namespace$1.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeCsvExportConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0__namespace, 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: [""], components: [{ type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }] });
+    NodeCsvExportConfirmComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0__namespace, 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: [""], components: [{ type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeCsvExportConfirmComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-csv-export-confirm',
                         templateUrl: './node-csv-export-confirm.component.html',
-                        styleUrls: ['./node-csv-export-confirm.component.scss']
+                        styleUrls: ['./node-csv-export-confirm.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }]; }, propDecorators: { nodes: [{
                     type: i0.Input
@@ -5117,13 +5128,14 @@
         return NodeDiffsComponent;
     }());
     NodeDiffsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeDiffsComponent, deps: [{ token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeDiffsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeDiffsComponent, selector: "he-node-diffs", inputs: { data: "data", id: "id", type: "type", displayType: "displayType" }, outputs: { diffsLoaded: "diffsLoaded" }, ngImport: i0__namespace, template: "<div *ngIf=\"loading\" class=\"has-text-center py-3\">\n  <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n</div>\n\n<ng-container *ngIf=\"left && right\">\n  <ng-container [ngSwitch]=\"displayType\">\n    <div *ngSwitchCase=\"DiffsDisplayType.diffs\" [innerHTML]=\"diffHtml\"></div>\n\n    <div *ngSwitchCase=\"DiffsDisplayType.sideBySide\" class=\"columns\">\n      <div class=\"column is-6\">\n        <pre class=\"has-background-black has-text-white\"><code>{{left | json}}</code></pre>\n      </div>\n      <div class=\"column is-6\">\n        <pre class=\"has-background-black has-text-white\"><code>{{right | json}}</code></pre>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "json": i6__namespace.JsonPipe } });
+    NodeDiffsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeDiffsComponent, selector: "he-node-diffs", inputs: { data: "data", id: "id", type: "type", displayType: "displayType" }, outputs: { diffsLoaded: "diffsLoaded" }, ngImport: i0__namespace, template: "<div *ngIf=\"loading\" class=\"has-text-center py-3\">\n  <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n</div>\n\n<ng-container *ngIf=\"left && right\">\n  <ng-container [ngSwitch]=\"displayType\">\n    <div *ngSwitchCase=\"DiffsDisplayType.diffs\" [innerHTML]=\"diffHtml\"></div>\n\n    <div *ngSwitchCase=\"DiffsDisplayType.sideBySide\" class=\"columns\">\n      <div class=\"column is-6\">\n        <pre class=\"has-background-black has-text-white\"><code>{{left | json}}</code></pre>\n      </div>\n      <div class=\"column is-6\">\n        <pre class=\"has-background-black has-text-white\"><code>{{right | json}}</code></pre>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "json": i6__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeDiffsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-diffs',
                         templateUrl: './node-diffs.component.html',
-                        styleUrls: ['./node-diffs.component.scss']
+                        styleUrls: ['./node-diffs.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { data: [{
                     type: i0.Input
@@ -5161,13 +5173,14 @@
         return NodeIconComponent;
     }());
     NodeIconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeIconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeIconComponent, selector: "he-node-icon", inputs: { type: "type", size: "size" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon\">\n  <fa-icon [icon]=\"icon\" [size]=\"size\"></fa-icon>\n</ng-container>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    NodeIconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeIconComponent, selector: "he-node-icon", inputs: { type: "type", size: "size" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"icon\">\n  <fa-icon [icon]=\"icon\" [size]=\"size\"></fa-icon>\n</ng-container>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeIconComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-icon',
                         templateUrl: './node-icon.component.html',
-                        styleUrls: ['./node-icon.component.scss']
+                        styleUrls: ['./node-icon.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { type: [{
                     type: i0.Input
@@ -5197,13 +5210,14 @@
         return NodeLinkComponent;
     }());
     NodeLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeLinkComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink" }, ngImport: i0__namespace, template: "<a *ngIf=\"showLink; else content\"\n  [href]=\"baseUrl + '/' + node!['@type'].toLowerCase() + '/' + node!['@id']\"\n  [target]=\"target\"\n  (click)=\"$event.stopPropagation()\"\n  >\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\">{{node!['@id']}}</span>\n</ng-template>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    NodeLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink" }, ngImport: i0__namespace, template: "<a *ngIf=\"showLink; else content\"\n  [href]=\"baseUrl + '/' + node!['@type'].toLowerCase() + '/' + node!['@id']\"\n  [target]=\"target\"\n  (click)=\"$event.stopPropagation()\"\n  >\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\">{{node!['@id']}}</span>\n</ng-template>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-link',
                         templateUrl: './node-link.component.html',
-                        styleUrls: ['./node-link.component.scss']
+                        styleUrls: ['./node-link.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { node: [{
                     type: i0.Input
@@ -5270,13 +5284,14 @@
         return NodeLogsFileComponent;
     }());
     NodeLogsFileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeLogsFileComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeLogsFileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0__namespace, 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"], components: [{ type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "async": i6__namespace.AsyncPipe, "keys": KeysPipe } });
+    NodeLogsFileComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0__namespace, 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"], components: [{ type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "async": i6__namespace.AsyncPipe, "keys": KeysPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeLogsFileComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-logs-file',
                         templateUrl: './node-logs-file.component.html',
-                        styleUrls: ['./node-logs-file.component.scss']
+                        styleUrls: ['./node-logs-file.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: HeNodeService }]; }, propDecorators: { node: [{
                     type: i0.Input
@@ -5684,13 +5699,14 @@
         return NodeMissingLookupFactorsComponent;
     }());
     NodeMissingLookupFactorsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeMissingLookupFactorsComponent, deps: [{ token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeMissingLookupFactorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0__namespace, 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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    NodeMissingLookupFactorsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0__namespace, 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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeMissingLookupFactorsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-missing-lookup-factors',
                         templateUrl: './node-missing-lookup-factors.component.html',
-                        styleUrls: ['./node-missing-lookup-factors.component.scss']
+                        styleUrls: ['./node-missing-lookup-factors.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { node: [{
                     type: i0.Input
@@ -5727,13 +5743,14 @@
         return NodeValueDetailsComponent;
     }());
     NodeValueDetailsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeValueDetailsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeValueDetailsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: { data: "data", nodeType: "nodeType", dataKey: "dataKey" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"data\">\n  <ng-container *ngIf=\"data?.nodes?.length === 1; else showTable\">\n    <ng-container *ngFor=\"let key of keys\">\n      <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n    </ng-container>\n    <ng-container *ngFor=\"let key of additionalKeys\">\n      <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #showTable>\n  <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" key=\"term\"></he-link-key-value>\n\n  <div class=\"table-container mt-2\">\n    <table class=\"table is-narrow\">\n      <thead>\n        <th *ngFor=\"let key of tableKeys\">\n          <a [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\"><b>{{key}}</b></a>\n        </th>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let node of data!.nodes\">\n          <td *ngFor=\"let key of tableKeys\">\n            <he-link-key-value [node]=\"node\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n", styles: ["table{background-color:transparent;color:#fff}table::ng-deep he-link-key-value a:first-child,table::ng-deep he-link-key-value a:first-child+span{display:none}\n"], components: [{ type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataKey", "key"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    NodeValueDetailsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: { data: "data", nodeType: "nodeType", dataKey: "dataKey" }, ngImport: i0__namespace, template: "<ng-container *bindOnce=\"data\">\n  <ng-container *ngIf=\"data?.nodes?.length === 1; else showTable\">\n    <ng-container *ngFor=\"let key of keys\">\n      <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n    </ng-container>\n    <ng-container *ngFor=\"let key of additionalKeys\">\n      <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #showTable>\n  <he-link-key-value [node]=\"data!.nodes[0]\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" key=\"term\"></he-link-key-value>\n\n  <div class=\"table-container mt-2\">\n    <table class=\"table is-narrow\">\n      <thead>\n        <th *ngFor=\"let key of tableKeys\">\n          <a [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\"><b>{{key}}</b></a>\n        </th>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let node of data!.nodes\">\n          <td *ngFor=\"let key of tableKeys\">\n            <he-link-key-value [node]=\"node\" [nodeType]=\"nodeType\" [dataKey]=\"dataKey\" [key]=\"key\"></he-link-key-value>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n", styles: ["table{background-color:transparent;color:#fff}table::ng-deep he-link-key-value a:first-child,table::ng-deep he-link-key-value a:first-child+span{display:none}\n"], components: [{ type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataKey", "key"] }], directives: [{ type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeValueDetailsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-node-value-details',
                         templateUrl: './node-value-details.component.html',
-                        styleUrls: ['./node-value-details.component.scss']
+                        styleUrls: ['./node-value-details.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { data: [{
                     type: i0.Input
@@ -5753,7 +5770,7 @@
     })(NodeField || (NodeField = {}));
     var filtersByType = (_c = {},
         _c[schema.NodeType.Cycle] = function (cycle) {
-            var primaryProduct = api.getPrimaryProduct(cycle.products);
+            var primaryProduct = (cycle.products || []).find(function (p) { var _a; return p.primary && !!((_a = p.term) === null || _a === void 0 ? void 0 : _a['@id']); });
             return primaryProduct ? {
                 productTermId: primaryProduct.term['@id']
             } : {};
@@ -5777,6 +5794,7 @@
             this.engineService = engineService;
             this.selectRecommendation = new i0.EventEmitter();
             this.loading = false;
+            this.visible = false;
             this.recommendations = [];
         }
         NodeRecommendationsComponent.prototype.ngOnChanges = function (changes) {
@@ -5788,6 +5806,9 @@
                 }
             }
         };
+        NodeRecommendationsComponent.prototype.trackByValue = function (_index, id) {
+            return id;
+        };
         Object.defineProperty(NodeRecommendationsComponent.prototype, "type", {
             get: function () {
                 var _a, _b;
@@ -5808,7 +5829,7 @@
                         case 1:
                             ids = _c.sent();
                             existingIds = (this.node[this.nodeField] || []).map(function (n) { var _a; return (_a = n.term) === null || _a === void 0 ? void 0 : _a['@id']; }).filter(Boolean);
-                            this.recommendations = ids.filter(function (id) { return !existingIds.includes(id); });
+                            this.recommendations = ids.filter(function (id) { return !existingIds.includes(id); }).sort();
                             this.loading = false;
                             return [2 /*return*/];
                     }
@@ -5824,11 +5845,11 @@
         return NodeRecommendationsComponent;
     }());
     NodeRecommendationsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeRecommendationsComponent, deps: [{ token: HeEngineService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NodeRecommendationsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeRecommendationsComponent, selector: "app-node-recommendations", inputs: { node: "node", nodeField: "nodeField", buttonClass: "buttonClass" }, outputs: { selectRecommendation: "selectRecommendation" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *bindOnce=\"recommendations\">\n    <button class=\"button mr-2 mb-2 {{buttonClass}}\" [class.ml-2]=\"i === 0\"\n      *ngFor=\"let id of recommendations; let i = index\" (click)=\"add(id, i)\"\n    >\n      <fa-icon icon=\"plus-circle\"></fa-icon>\n      <span class=\"pl-2\">Add</span>\n      <span class=\"pl-1\">{{id | keyToLabel}}</span>\n    </button>\n  </ng-container>\n</ng-container>\n\n<ng-template #loader>\n  <span class=\"pl-2 is-size-7\">Loading recommendations... </span>\n  <span class=\"pl-2\"><fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon></span>\n</ng-template>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe } });
+    NodeRecommendationsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: { node: "node", nodeField: "nodeField", buttonClass: "buttonClass" }, outputs: { selectRecommendation: "selectRecommendation" }, usesOnChanges: true, ngImport: i0__namespace, template: "<p class=\"my-2 is-size-7\" [class.is-hidden]=\"!loading && recommendations.length === 0\">\n  <span class=\"pr-2\">Recommendations</span>\n  <span *ngIf=\"loading\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n  </span>\n  <a *ngIf=\"!loading\" (click)=\"visible = !visible\">\n    <span *ngIf=\"visible\">Hide</span>\n    <span *ngIf=\"!visible\">Show</span>\n  </a>\n</p>\n\n<div [class.is-hidden]=\"!visible\">\n  <button class=\"button mr-2 mb-2 {{buttonClass}}\"\n    *ngFor=\"let id of recommendations; trackBy: trackByValue; let i = index\" (click)=\"add(id, i)\"\n  >\n    <fa-icon icon=\"plus-circle\"></fa-icon>\n    <span class=\"pl-2\">Add</span>\n    <span class=\"pl-1\">{{id | keyToLabel}}</span>\n  </button>\n</div>\n", styles: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NodeRecommendationsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'app-node-recommendations',
+                        selector: 'he-node-recommendations',
                         templateUrl: './node-recommendations.component.html',
                         styleUrls: ['./node-recommendations.component.scss']
                     }]
@@ -5906,13 +5927,14 @@
         return CyclesFunctionalUnitMeasureComponent;
     }());
     CyclesFunctionalUnitMeasureComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesFunctionalUnitMeasureComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesFunctionalUnitMeasureComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: { cycle: "cycle" }, ngImport: i0__namespace, template: "<span class=\"pl-1\" [ngSwitch]=\"cycle?.functionalUnit\">\n  <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">1 hectare</ng-container>\n  <ng-container *ngSwitchDefault>relative</ng-container>\n</span>\n", styles: [""], directives: [{ type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    CyclesFunctionalUnitMeasureComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: { cycle: "cycle" }, ngImport: i0__namespace, template: "<span class=\"pl-1\" [ngSwitch]=\"cycle?.functionalUnit\">\n  <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">1 hectare</ng-container>\n  <ng-container *ngSwitchDefault>relative</ng-container>\n</span>\n", styles: [""], directives: [{ type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesFunctionalUnitMeasureComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-cycles-functional-unit-measure',
                         templateUrl: './cycles-functional-unit-measure.component.html',
-                        styleUrls: ['./cycles-functional-unit-measure.component.scss']
+                        styleUrls: ['./cycles-functional-unit-measure.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { cycle: [{
                     type: i0.Input
@@ -6074,13 +6096,14 @@
         return CyclesCompletenessComponent;
     }());
     CyclesCompletenessComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesCompletenessComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesCompletenessComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", selected: "selected", dataState: "dataState" }, ngImport: i0__namespace, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <div class=\"table-container data-table-container mb-1\">\n    <table class=\"table is-narrow data-table has-children-{{cycles.length}}\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\"></th>\n          <th *ngFor=\"let completeness of completenessKeys\"\n            [attr.title]=\"completeness\"\n          ><a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">{{keyToLabel(completeness)}}</a></th>\n        </tr>\n      </thead>\n      <tbody>\n        <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n          <tr *ngIf=\"isSelected(cycle)\">\n            <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n              <he-node-link [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n              </he-node-link>\n            </td>\n            <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n              <span>{{cycle.dataCompleteness[completeness] ? 'Complete' : 'Incomplete'}}</span>\n              <he-blank-node-state class=\"ml-1\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n  <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n</div>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    CyclesCompletenessComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { cycles: "cycles", selected: "selected", dataState: "dataState" }, ngImport: i0__namespace, template: "<div class=\"p-3\" *ngIf=\"cycles.length; else emptyTable\">\n  <div class=\"table-container data-table-container mb-1\">\n    <table class=\"table is-narrow data-table has-children-{{cycles.length}}\">\n      <thead>\n        <tr>\n          <th class=\"width-auto\"></th>\n          <th *ngFor=\"let completeness of completenessKeys\"\n            [attr.title]=\"completeness\"\n          ><a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">{{keyToLabel(completeness)}}</a></th>\n        </tr>\n      </thead>\n      <tbody>\n        <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n          <tr *ngIf=\"isSelected(cycle)\">\n            <td class=\"width-auto\" [attr.title]=\"defaultLabel(cycle)\">\n              <he-node-link [node]=\"cycle\">\n                <span class=\"is-nowrap has-text-ellipsis\">{{i + 1}}. {{defaultLabel(cycle)}}</span>\n              </he-node-link>\n            </td>\n            <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n              <span>{{cycle.dataCompleteness[completeness] ? 'Complete' : 'Incomplete'}}</span>\n              <he-blank-node-state class=\"ml-1\"\n                [node]=\"cycle.dataCompleteness\"\n                [key]=\"completeness\"\n              ></he-blank-node-state>\n            </td>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n  <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n</div>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["nodeType", "dataKey", "key", "node", "state"] }, { type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted", "showUnchanged"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesCompletenessComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-cycles-completeness',
                         templateUrl: './cycles-completeness.component.html',
-                        styleUrls: ['./cycles-completeness.component.scss']
+                        styleUrls: ['./cycles-completeness.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], propDecorators: { cycles: [{
                     type: i0.Input
@@ -6106,7 +6129,8 @@
         };
     };
     var CyclesEmissionsChartComponent = /** @class */ (function () {
-        function CyclesEmissionsChartComponent() {
+        function CyclesEmissionsChartComponent(ngZone) {
+            this.ngZone = ngZone;
             this.cycles = [];
             this.selected = [];
             this.emissionPerCycle = {};
@@ -6142,7 +6166,7 @@
             this.selectedTerm = this.terms.includes(this.selectedTerm) ? this.selectedTerm : this.terms[0];
             return this.selectedTerm ? this.updateChart() : null;
         };
-        CyclesEmissionsChartComponent.prototype.updateChart = function () {
+        CyclesEmissionsChartComponent.prototype.initChart = function () {
             var _this = this;
             var _a, _b, _c;
             var labels = [(_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''];
@@ -6180,9 +6204,13 @@
                 }
             });
         };
+        CyclesEmissionsChartComponent.prototype.updateChart = function () {
+            var _this = this;
+            this.ngZone.runOutsideAngular(function () { return _this.initChart(); });
+        };
         return CyclesEmissionsChartComponent;
     }());
-    CyclesEmissionsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CyclesEmissionsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsChartComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
     CyclesEmissionsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles", selected: "selected" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesEmissionsChartComponent, decorators: [{
                 type: i0.Component,
@@ -6191,7 +6219,7 @@
                         templateUrl: './cycles-emissions-chart.component.html',
                         styleUrls: ['./cycles-emissions-chart.component.scss']
                     }]
-            }], propDecorators: { chartRef: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { chartRef: [{
                     type: i0.ViewChild,
                     args: ['chart']
                 }], cycles: [{
@@ -6458,7 +6486,8 @@
                 }] } });
 
     var CyclesResultComponent = /** @class */ (function () {
-        function CyclesResultComponent() {
+        function CyclesResultComponent(ngZone) {
+            this.ngZone = ngZone;
             this.cycles = [];
             this.selected = [];
         }
@@ -6509,7 +6538,7 @@
                     })
                 };
             });
-            this.updateChart(datasets, labels);
+            this.ngZone.runOutsideAngular(function () { return _this.updateChart(datasets, labels); });
         };
         CyclesResultComponent.prototype.updateChart = function (datasets, labels) {
             if (datasets === void 0) { datasets = []; }
@@ -6554,16 +6583,17 @@
         };
         return CyclesResultComponent;
     }());
-    CyclesResultComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesResultComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CyclesResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesResultComponent, selector: "he-cycles-result", inputs: { cycles: "cycles", selected: "selected" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"chart-container\">\n  <canvas #chart>{{chart}}</canvas>\n</div>\n", styles: [":host{display:block}.chart-container{height:100%;min-height:300px;position:relative}\n"] });
+    CyclesResultComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesResultComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CyclesResultComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CyclesResultComponent, selector: "he-cycles-result", inputs: { cycles: "cycles", selected: "selected" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"chart-container\">\n  <canvas #chart>{{chart}}</canvas>\n</div>\n", styles: [":host{display:block}.chart-container{height:100%;min-height:300px;position:relative}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CyclesResultComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-cycles-result',
                         templateUrl: './cycles-result.component.html',
-                        styleUrls: ['./cycles-result.component.scss']
+                        styleUrls: ['./cycles-result.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], propDecorators: { chartRef: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { chartRef: [{
                     type: i0.ViewChild,
                     args: ['chart']
                 }], cycles: [{
@@ -6681,13 +6711,14 @@
         return EngineOrchestratorEditComponent;
     }());
     EngineOrchestratorEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EngineOrchestratorEditComponent, deps: [{ token: HeEngineService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EngineOrchestratorEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0__namespace, 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=\"pl-3 model-parallel my-3\">\n  <p class=\"is-size-7\"><i>Models running in parallel</i></p>\n</div>\n\n<div *ngIf=\"config\">\n  <div class=\"pl-3\" *bindOnce=\"config\">\n    <ng-container *ngTemplateOutlet=\"models;context:{$implicit:config.models}\"></ng-container>\n  </div>\n</div>\n\n<ng-template #models 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=\"models;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>{{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, link: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, link: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 #modelLink let-model=\"model\" let-link=\"link\">\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.modelKey\">{{link.modelKey}}</span>\n\n  <p>\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\">\n  <span *ngIf=\"link.modelKey\">{{link.modelKey}}</span>\n\n  <p>\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\"><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 #7a7a7a}\n"], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe, "async": i6__namespace.AsyncPipe, "keys": KeysPipe, "json": i6__namespace.JsonPipe } });
+    EngineOrchestratorEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0__namespace, 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=\"pl-3 model-parallel my-3\">\n  <p class=\"is-size-7\"><i>Models running in parallel</i></p>\n</div>\n\n<div *ngIf=\"config\">\n  <div class=\"pl-3\" *bindOnce=\"config\">\n    <ng-container *ngTemplateOutlet=\"models;context:{$implicit:config.models}\"></ng-container>\n  </div>\n</div>\n\n<ng-template #models 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=\"models;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>{{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, link: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, link: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 #modelLink let-model=\"model\" let-link=\"link\">\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.modelKey\">{{link.modelKey}}</span>\n\n  <p>\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\">\n  <span *ngIf=\"link.modelKey\">{{link.modelKey}}</span>\n\n  <p>\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\"><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 #7a7a7a}\n"], components: [{ type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink"] }, { type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe, "async": i6__namespace.AsyncPipe, "keys": KeysPipe, "json": i6__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EngineOrchestratorEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-engine-orchestrator-edit',
                         templateUrl: './engine-orchestrator-edit.component.html',
-                        styleUrls: ['./engine-orchestrator-edit.component.scss']
+                        styleUrls: ['./engine-orchestrator-edit.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeEngineService }]; }, propDecorators: { config: [{
                     type: i0.Input
@@ -6755,13 +6786,14 @@
         return EngineRequirementsFormComponent;
     }());
     EngineRequirementsFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EngineRequirementsFormComponent, deps: [{ token: i1__namespace$4.FormBuilder }, { token: HeSearchService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EngineRequirementsFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0__namespace, 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: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe, "keys": KeysPipe } });
+    EngineRequirementsFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0__namespace, 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: [""], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }], directives: [{ type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyToLabel": KeyToLabelPipe, "keys": KeysPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EngineRequirementsFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-engine-requirements-form',
                         templateUrl: './engine-requirements-form.component.html',
-                        styleUrls: ['./engine-requirements-form.component.scss']
+                        styleUrls: ['./engine-requirements-form.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$4.FormBuilder }, { type: HeSearchService }]; } });
 
@@ -7894,13 +7926,14 @@
         return SitesMapsComponent;
     }());
     SitesMapsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMapsComponent, deps: [{ token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SitesMapsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", selected: "selected", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: i1$4.GoogleMap, descendants: true }], ngImport: i0__namespace, template: "<google-map *ngIf=\"googleLoaded\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"\n></google-map>\n\n<p *ngIf=\"showNotice\" class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n\n<div class=\"no-location has-text-center has-text-light\" *ngIf=\"showNoLocation\">\n  <span>No precise location data</span>\n</div>\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"], components: [{ type: i1__namespace$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    SitesMapsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", selected: "selected", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: i1$4.GoogleMap, descendants: true }], ngImport: i0__namespace, template: "<google-map *ngIf=\"googleLoaded\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"\n></google-map>\n\n<p *ngIf=\"showNotice\" class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n\n<div class=\"no-location has-text-center has-text-light\" *ngIf=\"showNoLocation\">\n  <span>No precise location data</span>\n</div>\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"], components: [{ type: i1__namespace$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SitesMapsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-sites-maps',
                         templateUrl: './sites-maps.component.html',
-                        styleUrls: ['./sites-maps.component.scss']
+                        styleUrls: ['./sites-maps.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { map: [{
                     type: i0.ViewChild,
@@ -8621,13 +8654,14 @@
         return FilesFormComponent;
     }());
     FilesFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, deps: [{ token: i0__namespace.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\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              <button class=\"button is-dark is-outlined is-small\" type=\"button\"\n                *ngIf=\"editable && !errorsEditable\"\n                (click)=\"addArrayGroup(property)\"\n              >\n                <fa-icon icon=\"plus-circle\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n                <span class=\"pl-1\">{{property.key | pluralize:1}}</span>\n              </button>\n\n              <app-node-recommendations buttonClass=\"is-dark is-outlined is-small\"\n                [node]=\"node\" [nodeField]=\"property.key\"\n                (selectRecommendation)=\"onSelectRecommendation(property, $event)\"\n              ></app-node-recommendations>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputForm let-property>\n  <ng-container *ngIf=\"property.key\">\n    <ng-container [ngSwitch]=\"property.suggestions?.type\">\n      <ng-container *ngSwitchCase=\"'select'\">\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"inputInput; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\"\n      [class.has-icons-right]=\"property.loading\"\n    >\n      <input class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n\n        [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!editable || !property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{enabled: editable && property.editable && property.schema?.type === 'array', items: property.schema?.items, delimiter: ';', allowDuplicates: true, placeholder: property.placeholder}\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n\n        [ngbTypeahead]=\"propertySuggest(property.fullKey, property.suggestions?.type)\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\"\n      >\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\"\n    *ngIf=\"!property.hasError && propertyModel.invalid\"\n  >\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\"\n        [class.is-link]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n      >\n        <select\n          [(ngModel)]=\"property.value\" #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!editable || !property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\"\n        >\n          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">{{value}}</option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: {$implicit: property}\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a class=\"button is-small\" title=\"Remove field\"\n      [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n      [class.is-danger]=\"!property.changed && property.hasError\"\n      [class.is-warning]=\"!property.changed && property.hasWarning\"\n      (click)=\"$event.stopPropagation(); propertyChanged(null, property)\"\n    >\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <he-popover-confirm class=\"control\"\n    *ngIf=\"enableAddError(property)\"\n    position=\"left\"\n    [content]=\"popupErrorForm\"\n    (confirmed)=\"addError(property, $event)\"\n  >\n    <span class=\"button is-small\">\n      <fa-icon icon=\"comments\"></fa-icon>\n    </span>\n  </he-popover-confirm>\n\n  <ng-container *ngIf=\"editable && property.editable\">\n    <ng-container [ngSwitch]=\"property.schemaType\">\n      <ng-container *ngSwitchCase=\"SchemaType.Actor\">\n        <ng-container *ngTemplateOutlet=\"actorAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"SchemaType.Cycle\">\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </ng-container>\n    <ng-container *bindOnce=\"property\">\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\"\n          (click)=\"mapDrawingProperty = property\"\n        >\n          <fa-icon icon=\"map-marked-alt\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"bibliographiesSearchKey(property)\">\n        <button class=\"button is-small\" title=\"Advanced Search\"\n          (click)=\"bibliographiesSearchProperty = property\"\n        >\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: {$implicit: property}\"></ng-container>\n  </ng-container>\n  <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n    <a class=\"button is-small is-danger\" title=\"Add field\"\n      (click)=\"$event.stopPropagation(); addMissingProperty(property)\"\n    >\n      <fa-icon icon=\"plus-circle\"></fa-icon>\n      <span class=\"pl-2\">Add</span>\n    </a>\n  </div>\n  <div class=\"control\" *ngIf=\"isRequired(property)\">\n    <label class=\"button is-small is-danger\" [for]=\"property.id\"\n      ngbTooltip=\"This field is required\" placement=\"top\"\n    >\n      <fa-icon icon=\"exclamation-triangle\"></fa-icon>\n    </label>\n  </div>\n  <ng-container *ngIf=\"property.externalUrl?.url\">\n    <div class=\"control\">\n      <a class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{'is-dark is-outlined': property.key === 'type'}\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\"\n      >\n        <fa-icon [icon]=\"property.externalUrl.icon || 'external-link-alt'\"></fa-icon>\n      </a>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"unitConverterEnabled(property)\">\n    <div class=\"control\">\n      <button class=\"button is-small\" title=\"Open calculator\"\n        [ngbPopover]=\"convertUnits\" autoClose=\"outside\"\n        triggers=\"manual\" #p=\"ngbPopover\" placement=\"bottom\" container=\"body\"\n        (click)=\"openUnitConverter(p, property)\"\n      >\n        <fa-icon icon=\"calculator\"></fa-icon>\n      </button>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #actorAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === '@id'\">\n    <button class=\"button is-small\" title=\"Add myself as Actor\"\n      (click)=\"setUserActorId(property)\"\n    >\n      <fa-icon [icon]=\"['far', 'id-badge']\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  <div class=\"control\" *ngIf=\"property.key === 'cycleDuration'\">\n    <button class=\"button is-small\" title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button class=\"button is-small\" title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\"\n    >\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header class=\"card-header\" *ngIf=\"editable && property.editable && (property.addPropertyEnabled || deepEditable); else padder\">\n    <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-small\">\n          <label class=\"label\" [for]=\"property.id + '_new'\">\n            <span>Add new field</span>\n          </label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field has-addons\">\n            <div class=\"control is-expanded\">\n              <input class=\"input is-small\"\n                [(ngModel)]=\"property.newProperty\"\n                [id]=\"property.id + '_new'\"\n                name=\"randomname\"\n                placeholder=\"Search and select field from results\"\n\n                [ngbTypeahead]=\"suggestNewProperty(property.fullKey)\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatter\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\"\n              >\n            </div>\n            <div class=\"control\">\n              <button class=\"button is-small\" type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\"\n              >\n                <fa-icon icon=\"plus\"></fa-icon>\n                <span class=\"pl-2\">Add</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </header>\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-edit=\"edit\">\n  <p class=\"help\"\n    [class.is-danger]=\"property.hasError\"\n    [class.is-warning]=\"property.hasWarning\"\n    *ngIf=\"property.error\"\n  >\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\"\n      *ngIf=\"edit && errorsEditable && property.error.index >= 0\"\n      (click)=\"editError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\"\n    >\n      <fa-icon class=\"pr-2\" icon=\"check\"></fa-icon>\n      <span>Resolved</span>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  <div class=\"panel is-default\" *ngIf=\"showMap\">\n    <div class=\"open-group panel-heading py-0\"\n      (click)=\"mapVisible = !mapVisible\" pointer\n      [class.is-open]=\"mapVisible\"\n    >\n      <div class=\"columns is-mobile is-vcentered mb-0\">\n        <span class=\"column is-narrow py-1 my-0\">\n          <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!mapVisible\"></fa-icon>\n          <fa-icon icon=\"angle-right\" [class.is-hidden]=\"mapVisible\"></fa-icon>\n        </span>\n        <span class=\"column py-1 my-0\">\n          <span class=\"is-size-6\">View on Map</span>\n        </span>\n      </div>\n    </div>\n    <div class=\"panel-block is-block p-0\" [class.is-hidden]=\"!mapVisible\">\n      <he-sites-maps [sites]=\"[node]\" [showNotice]=\"false\"></he-sites-maps>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #nodeErrorForm let-property>\n  <ng-container *ngIf=\"property.newError && property.editable\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select [(ngModel)]=\"property.newError.level\">\n            <option [value]=\"undefined\">Select Level</option>\n            <option value=\"error\">Error</option>\n            <option value=\"warning\">Warning</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"control is-expanded\">\n        <textarea class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"\n        ></textarea>\n      </div>\n      <div class=\"control\">\n        <button class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\"\n        >\n          <fa-icon icon=\"plus-circle\"></fa-icon>\n          <span class=\"pl-2\">Add</span>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #popupErrorForm let-data=\"data\">\n  <div class=\"field has-addons\">\n    <div class=\"control\">\n      <div class=\"select\">\n        <select [(ngModel)]=\"data.level\">\n          <option [value]=\"undefined\">Select Level</option>\n          <option value=\"error\">Error</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"control\">\n      <input class=\"input\"\n        [(ngModel)]=\"data.message\"\n        placeholder=\"Enter your message here\"\n      >\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\"\n  ></ngb-highlight>\n</ng-template>\n\n<ng-template #padder>\n  <div class=\"pt-1\"></div>\n</ng-template>\n\n<ng-template #convertUnits let-value=\"value\" let-term=\"term\" let-units=\"units\">\n  <he-unit-converter [value]=\"value\" [term]=\"term\" [toUnits]=\"units\"></he-unit-converter>\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#ededed;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 768px){.card-toggle{position:relative}}.card-toggle>fa-icon{display:inline-block;width:10px}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: NodeRecommendationsComponent, selector: "app-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "selected", "nodes", "center", "zoom", "showNotice"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe } });
+    FilesFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChange: "nodeChange", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0__namespace, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span *ngIf=\"nodeProperty\" class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\"\n    >\n      <he-node-icon [type]=\"nodeProperty.schemaType\"></he-node-icon>\n    </span>\n  </div>\n\n  <ng-container *ngIf=\"editable && isOpen && nodeProperty\">\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: {$implicit: nodeProperty}\"></ng-container>\n  </ng-container>\n\n  <div class=\"card-content\">\n    <ng-container *ngIf=\"isOpen\">\n      <div class=\"pb-3 mb-2\" *ngIf=\"errorsEditable\">\n        <ng-container *ngTemplateOutlet=\"nodeErrorForm; context: {$implicit: nodeProperty}\"></ng-container>\n      </div>\n\n      <div class=\"mb-4\" *ngIf=\"nodeProperty?.error\">\n        <ng-container *ngTemplateOutlet=\"propertyError; context: {property: nodeProperty, edit: true}\"></ng-container>\n      </div>\n    </ng-container>\n\n    <div class=\"columns is-multiline\">\n      <ng-container *ngFor=\"let property of properties; trackBy: trackByProperty\">\n        <ng-container *ngTemplateOutlet=\"showProperty; context: {$implicit: property}\"></ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngIf=\"isOpen\">\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: {$implicit: nodeProperty}\"></ng-container>\n    </ng-container>\n  </div>\n\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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "selected", "nodes", "center", "zoom", "showNotice"] }, { type: i11__namespace.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term"] }, { type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disablePopover", "popoverClass", "openDelay", "closeDelay", "ngbPopover", "popoverTitle"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { type: i6__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { type: i11__namespace.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { type: i1__namespace$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1__namespace$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "pluralize": PluralizePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilesFormComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'he-files-form',
                         templateUrl: './files-form.component.html',
-                        styleUrls: ['./files-form.component.scss']
+                        styleUrls: ['./files-form.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: HeSearchService }, { type: HeUsersService }]; }, propDecorators: { schemas: [{
                     type: i0.Input
@@ -8692,16 +8726,16 @@
             }] });
 
     var parseLog = function (data) { return ({
-        indicator: data['key/term'],
+        indicator: data['key/term'] || data.term || data.indicator,
         emission: data.node,
-        coefficient: data.coefficient,
+        coefficient: +data.coefficient,
         value: +data.value * +data.coefficient
     }); };
     var filterTermTypes = [
         schema.TermTermType.emission,
         schema.TermTermType.characterisedIndicator
     ];
-    var toCsv = function (logs, emissions) { return __spreadArray([
+    var toCsv = function (logs) { return __spreadArray([
         [
             'Model',
             'Impact',
@@ -8712,14 +8746,15 @@
     ], __read(logs
         .sort(function (a, b) { return a.indicator.localeCompare(b.indicator); })
         .flatMap(function (_d) {
-        var indicator = _d.indicator, emission = _d.emission, value = _d.value, coefficient = _d.coefficient;
+        var indicator = _d.indicator, emission = _d.emission, value = _d.value, inputs = _d.inputs;
         return __spreadArray([
             [indicator, emission, value, '', '']
-        ], __read((emissions.filter(function (v) { var _a; return v.term['@id'] === emission && ((_a = v.inputs) === null || _a === void 0 ? void 0 : _a.length); }).map(function (v) { return [indicator, emission, '', v.inputs.map(function (i) { return i['@id']; }).join(';'), v.value * coefficient]; }))));
+        ], __read((inputs.map(function (v) { return [indicator, emission, '', v.name, v.value]; }))));
     })
         .map(function (v) { return v.join(','); }))).join('\n'); };
     var ImpactAssessmentsIndicatorBreakdownChartComponent = /** @class */ (function () {
-        function ImpactAssessmentsIndicatorBreakdownChartComponent(domSanitizer, searchService, nodeService) {
+        function ImpactAssessmentsIndicatorBreakdownChartComponent(ngZone, domSanitizer, searchService, nodeService) {
+            this.ngZone = ngZone;
             this.domSanitizer = domSanitizer;
             this.searchService = searchService;
             this.nodeService = nodeService;
@@ -8749,12 +8784,17 @@
                                     var data = _d.data;
                                     return parseMessage(data.message);
                                 }), operators.filter(function (message) { return 'node' in message; }), operators.map(parseLog), operators.filter(function (log) { return !!log.indicator && !!log.emission && !isNaN(log.value) && log.value > 0; }), operators.groupBy(function (log) { return [log.indicator, log.emission].join('/'); }), operators.mergeMap(function (group) { return group.pipe(operators.toArray()); }), operators.map(function (values) {
+                                    var log = values[0];
                                     var total = values.reduce(function (prev, curr) { return prev + curr.value; }, 0);
-                                    return Object.assign(Object.assign({}, values[0]), { value: total });
+                                    var inputs = (_this.impactAssessment.emissionsResourceUse || [])
+                                        .filter(function (v) { var _a; return v.term['@id'] === log.emission && ((_a = v.inputs) === null || _a === void 0 ? void 0 : _a.length); })
+                                        .map(function (v) { return ({ name: v.inputs.map(function (i) { return i['@id']; }).join(';'), value: v.value * log.coefficient }); });
+                                    var inputsValue = inputs.reduce(function (prev, curr) { return prev + curr.value; }, 0);
+                                    return Object.assign(Object.assign({}, log), { value: total, inputs: inputs, inputsValue: inputsValue });
                                 }), operators.toArray()).toPromise()];
                         case 1:
                             _d.logs = (_e.sent());
-                            this.csvContent = this.domSanitizer.bypassSecurityTrustResourceUrl("data:text/html;charset=utf-8," + encodeURIComponent(toCsv(this.logs, this.impactAssessment.emissionsResourceUse)));
+                            this.csvContent = this.domSanitizer.bypassSecurityTrustResourceUrl("data:text/html;charset=utf-8," + encodeURIComponent(toCsv(this.logs)));
                             return [4 /*yield*/, this.searchService.search({
                                     fields: ['@type', '@id', 'name'],
                                     limit: 1000,
@@ -8786,7 +8826,7 @@
             enumerable: false,
             configurable: true
         });
-        ImpactAssessmentsIndicatorBreakdownChartComponent.prototype.updateChart = function () {
+        ImpactAssessmentsIndicatorBreakdownChartComponent.prototype.initChart = function () {
             var _this = this;
             var _a, _b, _c;
             var logs = this.logs
@@ -8796,11 +8836,29 @@
             })
                 .sort(function (a, b) { return b.value - a.value; });
             this.noData = logs.length === 0;
+            var total = logs.reduce(function (prev, curr) { return prev + curr.value; }, 0);
             var labels = logs.map(function (_d) {
                 var emission = _d.emission;
                 var _a;
                 return ((_a = _this.emissions.find(function (v) { return v['@id'] === emission; })) === null || _a === void 0 ? void 0 : _a.name) || emission;
             });
+            // display the breakdown by input
+            // const inputs = logs.flatMap(v => v.inputs.map(i => i.name));
+            // const datasets = [
+            //   ...inputs.map((input, index) => ({
+            //     label: input,
+            //     data: logs.map(log => log.inputs.find(({ name }) => name === input)?.value || 0),
+            //     backgroundColor: itemColor(index),
+            //     borderColor: itemColor(index)
+            //   })),
+            //   // add dataset for rest not linked to inputs
+            //   {
+            //     label: this.selectedTerm?.name ?? '',
+            //     data: logs.map(log => log.value - log.inputsValue),
+            //     backgroundColor: itemColor(-1),
+            //     borderColor: itemColor(-1)
+            //   }
+            // ];
             var datasets = [{
                     label: (_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
                     data: logs.map(function (_d) {
@@ -8810,7 +8868,6 @@
                     backgroundColor: logs.map(listColor),
                     borderColor: logs.map(listColor)
                 }];
-            var total = logs.reduce(function (prev, curr) { return prev + curr.value; }, 0);
             if (this.chart) {
                 this.chart.destroy();
             }
@@ -8827,7 +8884,7 @@
                             color: 'black',
                             formatter: function (value) {
                                 var ratio = utils.toPrecision(value * 100 / total, 2);
-                                return utils.toPrecision(value, 3) + " (" + ratio + "%)";
+                                return value > 0 ? utils.toPrecision(value, 3) + " (" + ratio + "%)" : '';
                             },
                             align: 'end'
                         }
@@ -8844,7 +8901,7 @@
                             label: function (tooltipItem) {
                                 var value = +(tooltipItem.value || '0');
                                 var ratio = utils.toPrecision(value * 100 / total, 2);
-                                return utils.toPrecision(value, 3) + " (" + ratio + "%)";
+                                return value > 0 ? utils.toPrecision(value, 3) + " (" + ratio + "%)" : '';
                             }
                         }
                     },
@@ -8859,9 +8916,13 @@
                 }
             });
         };
+        ImpactAssessmentsIndicatorBreakdownChartComponent.prototype.updateChart = function () {
+            var _this = this;
+            this.ngZone.runOutsideAngular(function () { return _this.initChart(); });
+        };
         return ImpactAssessmentsIndicatorBreakdownChartComponent;
     }());
-    ImpactAssessmentsIndicatorBreakdownChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: HeSearchService }, { token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImpactAssessmentsIndicatorBreakdownChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [{ token: i0__namespace.NgZone }, { token: i1__namespace$1.DomSanitizer }, { token: HeSearchService }, { token: HeNodeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
     ImpactAssessmentsIndicatorBreakdownChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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>\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  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">No breakdown available for {{selectedTerm?.name}}.</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"], components: [{ type: i1__namespace.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
                 type: i0.Component,
@@ -8870,7 +8931,7 @@
                         templateUrl: './impact-assessments-indicator-breakdown-chart.component.html',
                         styleUrls: ['./impact-assessments-indicator-breakdown-chart.component.scss']
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: HeSearchService }, { type: HeNodeService }]; }, propDecorators: { chartRef: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i1__namespace$1.DomSanitizer }, { type: HeSearchService }, { type: HeNodeService }]; }, propDecorators: { chartRef: [{
                     type: i0.ViewChild,
                     args: ['chart']
                 }], impactAssessment: [{
@@ -8895,7 +8956,8 @@
         };
     };
     var ImpactAssessmentsIndicatorsChartComponent = /** @class */ (function () {
-        function ImpactAssessmentsIndicatorsChartComponent() {
+        function ImpactAssessmentsIndicatorsChartComponent(ngZone) {
+            this.ngZone = ngZone;
             this.impactAssessments = [];
             this.selected = [];
             this.key = 'impacts';
@@ -8936,7 +8998,7 @@
             this.selectedTerm = this.terms.includes(this.selectedTerm) ? this.selectedTerm : this.terms[0];
             return this.selectedTerm ? this.updateChart() : null;
         };
-        ImpactAssessmentsIndicatorsChartComponent.prototype.updateChart = function () {
+        ImpactAssessmentsIndicatorsChartComponent.prototype.initChart = function () {
             var _this = this;
             var _a, _b, _c;
             var labels = [(_b = (_a = this.selectedTerm) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''];
@@ -8973,9 +9035,13 @@
                 }
             });
         };
+        ImpactAssessmentsIndicatorsChartComponent.prototype.updateChart = function () {
+            var _this = this;
+            this.ngZone.runOutsideAngular(function () { return _this.initChart(); });
+        };
         return ImpactAssessmentsIndicatorsChartComponent;
     }());
-    ImpactAssessmentsIndicatorsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ImpactAssessmentsIndicatorsChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorsChartComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
     ImpactAssessmentsIndicatorsChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", selected: "selected", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field is-horizontal\">\n    <div class=\"field-label is-normal\">\n      <label class=\"label\" for=\"selectedTerm\">\n        <span>Select a column</span>\n      </label>\n    </div>\n    <div class=\"field-body\">\n      <div class=\"control\">\n        <div class=\"select is-small\">\n          <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n            <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{term.name}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], directives: [{ type: i1__namespace$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
                 type: i0.Component,
@@ -8984,7 +9050,7 @@
                         templateUrl: './impact-assessments-indicators-chart.component.html',
                         styleUrls: ['./impact-assessments-indicators-chart.component.scss']
                     }]
-            }], propDecorators: { chartRef: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { chartRef: [{
                     type: i0.ViewChild,
                     args: ['chart']
                 }], impactAssessments: [{
@@ -9086,6 +9152,13 @@
         View["breakdown"] = "breakdown";
         View["logs"] = "logs";
     })(View || (View = {}));
+    var isMethodModelAllowed = function (filterMethod) { return function (node) {
+        var _a, _b, _c, _d;
+        return filterMethod
+            ? ((_a = node.methodModel) === null || _a === void 0 ? void 0 : _a['@id']) === filterMethod['@id']
+            : (typeof glossary.getDefaultModeId((_b = node.term) === null || _b === void 0 ? void 0 : _b['@id']) === 'undefined' ||
+                ((_c = node.methodModel) === null || _c === void 0 ? void 0 : _c['@id']) === glossary.getDefaultModeId((_d = node.term) === null || _d === void 0 ? void 0 : _d['@id']));
+    }; };
     var ImpactAssessmentsProductsComponent = /** @class */ (function () {
         function ImpactAssessmentsProductsComponent(nodeService) {
             this.nodeService = nodeService;
@@ -9147,30 +9220,30 @@
         };
         ImpactAssessmentsProductsComponent.prototype.updateImpacts = function () {
             var _this = this;
-            var indicatorPerImpactAssessment = groupNodesByTerm(this.impactAssessments, this.key, this.originalValues, this.selectedMethodModel);
+            var indicatorPerImpactAssessment = groupNodesByTerm(this.impactAssessments, this.key, this.originalValues, isMethodModelAllowed(this.selectedMethodModel));
             this.indicators = orderBy(grouppedKeys(indicatorPerImpactAssessment), ['value.methodTierOrder', 'key'], ['asc', 'asc'])
-                .filter(function (_b) {
-                var value = _b.value;
+                .filter(function (_e) {
+                var value = _e.value;
                 return _this.termAllowed(value === null || value === void 0 ? void 0 : value.term);
             });
         };
         ImpactAssessmentsProductsComponent.prototype.loadDataState = function (dataState) {
             return __awaiter(this, void 0, void 0, function () {
-                var _b, _c, _d;
+                var _e, _f, _g;
                 var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
-                            _b = this.dataStateValues;
-                            _c = dataState;
-                            _d = this.dataStateValues[dataState];
-                            if (_d) return [3 /*break*/, 2];
+                            _e = this.dataStateValues;
+                            _f = dataState;
+                            _g = this.dataStateValues[dataState];
+                            if (_g) return [3 /*break*/, 2];
                             return [4 /*yield*/, Promise.all(this.impactAssessments.map(function (node) { return _this.nodeService.get(Object.assign(Object.assign({}, node), { dataState: dataState })); }))];
                         case 1:
-                            _d = (_e.sent());
-                            _e.label = 2;
+                            _g = (_h.sent());
+                            _h.label = 2;
                         case 2:
-                            _b[_c] = _d;
+                            _e[_f] = _g;
                             return [2 /*return*/];
                     }
                 });
@@ -9178,11 +9251,11 @@
         };
         ImpactAssessmentsProductsComponent.prototype.updateDataState = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0: return [4 /*yield*/, this.loadDataState(this.dataState)];
                         case 1:
-                            _b.sent();
+                            _e.sent();
                             this.impactAssessments = this.dataStateValues[this.dataState].slice();
                             return [2 /*return*/, this.update()];
                     }
@@ -9195,8 +9268,8 @@
         ImpactAssessmentsProductsComponent.prototype.impactName = function (impact) {
             return impact.name || (impact.cycle ? this.cycleLabel(impact.cycle) : impact['@id']) || impact.id;
         };
-        ImpactAssessmentsProductsComponent.prototype.cycleLabel = function (_b) {
-            var id = _b["@id"], name = _b.name;
+        ImpactAssessmentsProductsComponent.prototype.cycleLabel = function (_e) {
+            var id = _e["@id"], name = _e.name;
             var _a;
             return name || ((_a = (this.cycles || []).find(function (v) { return v['@id'] === id; })) === null || _a === void 0 ? void 0 : _a.name);
         };
@@ -9213,15 +9286,15 @@
         // Recalculation logs
         ImpactAssessmentsProductsComponent.prototype.showRecalculationLogs = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             this.loading = true;
                             // make sure original data is also loaded
                             return [4 /*yield*/, this.loadDataState(api.DataState.original)];
                         case 1:
                             // make sure original data is also loaded
-                            _b.sent();
+                            _e.sent();
                             this.loading = false;
                             this.selectedView = View.logs;
                             return [2 /*return*/];