@hestia-earth/ui-components 0.23.13 → 0.23.15

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

@@ -1,30 +1,35 @@
 import * as i0 from '@angular/core';
 import { Injectable, NgModule, Pipe, EventEmitter as EventEmitter$1, Component as Component$1, Input, Output, HostBinding, ChangeDetectionStrategy, Directive, InjectionToken, Inject, ViewChild, HostListener, signal, computed, ContentChild, forwardRef, ContentChildren, inject, ChangeDetectorRef, ElementRef } from '@angular/core';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i2$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule, FormControl } from '@angular/forms';
 import * as i3$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTypeaheadModule, NgbTooltipModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i1$3 from '@angular/google-maps';
+import * as i1$4 from '@angular/google-maps';
 import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
 import * as i3 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faClone, faCircle, faIdBadge } from '@fortawesome/free-regular-svg-icons';
 import { faAngleDoubleLeft, faAngleDoubleRight, faAngleDown, faAngleLeft, faAngleRight, faBookOpen, faBuilding, faCalculator, faChartBar, faCheck, faCheckCircle, faCircle as faCircle$1, faClipboard, faClipboardList, faClone as faClone$1, faCog, faCaretDown, faCaretRight, faComments, faDownload, faDotCircle, faDrawPolygon, faEdit, faEllipsisV, faExclamationTriangle, faExternalLinkAlt, faFilter, faInfoCircle, faLink, faList, faListAlt, faLongArrowAltDown, faLongArrowAltUp, faLongArrowAltLeft, faLongArrowAltRight, faMap, faMapMarked, faMapMarkedAlt, faMinus, faPlus, faPlusCircle, faQuestionCircle, faSearch, faSeedling, faSortAmountUpAlt, faSpellCheck, faSpinner, faTable, faTimes, faTimesCircle, faUser, faCopy, faSquareArrowUpRight, faArrowUpRightFromSquare, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import * as i1 from 'angular-svg-icon';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import * as i2 from 'angular-svg-icon-preloader';
+import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
 import get from 'lodash.get';
 import { SchemaType, isExpandable, TermTermType, EmissionMethodTier, NodeType, productTermTermType, nestedSearchableKeys, SCHEMA_VERSION, sortKeysByType, isTypeNode, inputTermTermType, measurementTermTermType, practiceTermTermType, emissionTermTermType, indicatorTermTermType, CycleFunctionalUnit, SiteSiteType, isTypeValid, typeToSchemaType, UploadLimit } from '@hestia-earth/schema';
+import * as i4$1 from 'rxjs';
 import { ReplaySubject, Subject, fromEvent, timer, of, zip, from, merge } from 'rxjs';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/platform-browser';
 import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { tap, take, skipUntil, map, catchError, mergeAll, filter, toArray, mergeMap, shareReplay, debounceTime, distinctUntilChanged, switchMap, first, reduce, distinct, groupBy, startWith } from 'rxjs/operators';
 import { isUndefined, keyToLabel, toPrecision, isNumber, toComma, toDashCase, isBoolean, ConvertUnits, converters, convertValue, isEmpty, isEqual as isEqual$2, unique, diffInDays } from '@hestia-earth/utils';
 import { filenameWithoutExt, nodeTypeToParam, DataState, SupportedExtensions, fileToExt, maxFileSizeMb } from '@hestia-earth/api';
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
 import { getDefaultModelId, loadResourceKey } from '@hestia-earth/glossary';
-import * as i1$2 from '@angular/common/http';
+import * as i1$3 from '@angular/common/http';
 import { DeltaDisplayType, delta, customDeltaFuncs } from '@hestia-earth/utils/dist/delta';
 import removeMd from 'remove-markdown';
 import orderBy from 'lodash.orderby';
@@ -54,7 +59,7 @@ import 'd3-transition';
 import { hierarchy, tree } from 'd3-hierarchy';
 import { easeElasticIn, easeElasticOut } from 'd3-ease';
 import uniqBy from 'lodash.uniqby';
-import * as i2$1 from '@angular/cdk/overlay';
+import * as i2$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { ComponentStore } from '@ngrx/component-store';
 import castArray from 'lodash.castarray';
@@ -100,6 +105,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i3.FaIconLibrary }]; } });
 
+class HeSvgIconsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSvgIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.8", ngImport: i0, type: HeSvgIconsModule, imports: [CommonModule, i1.AngularSvgIconModule, i2.AngularSvgIconPreloaderModule], exports: [AngularSvgIconModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSvgIconsModule, imports: [CommonModule,
+            AngularSvgIconModule.forRoot(),
+            AngularSvgIconPreloaderModule.forRoot({
+                configUrl: '/assets/svg-icons/icons.json'
+            }), AngularSvgIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSvgIconsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        AngularSvgIconModule.forRoot(),
+                        AngularSvgIconPreloaderModule.forRoot({
+                            configUrl: '/assets/svg-icons/icons.json'
+                        })
+                    ],
+                    exports: [AngularSvgIconModule]
+                }]
+        }] });
+
 const gitHome = 'https://gitlab.com/hestia-earth';
 const gitRawBaseUrl = 'https://gl.githack.com/hestia-earth';
 const gitBranch = () => (['dev', 'staging'].some(env => baseUrl().includes(env)) ? 'develop' : 'master');
@@ -247,7 +275,7 @@ class IssueConfirmComponent {
         return this.repository && this.template ? reportIssueUrl(this.repository, this.template) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: IssueConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: IssueConfirmComponent, selector: "he-issue-confirm", inputs: { title: "title", repository: "repository", template: "template", isCommunity: "isCommunity" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">{{ title }}</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(false)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select [(ngModel)]=\"repository\" name=\"repository\" required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  <option *ngFor=\"let repo of repositories\" [value]=\"repo\">\n                    <ng-container [ngSwitch]=\"repo\">\n                      <ng-container *ngSwitchCase=\"Repository.glossary\">Glossary of terms / lookup issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.models\">Calculation issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.orchestrator\">Orchestration issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.aggregation\">Aggregated Data issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.community\">UI/UX or API issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.poorenemeck\">\n                        Conversion from P&N Spreadsheet\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.frontend\">Other issues</ng-container>\n                    </ng-container>\n                  </option>\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"repository\" class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"template\">Issue</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select [(ngModel)]=\"template\" name=\"template\" required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  <option *ngFor=\"let t of Template | keys\" [value]=\"t.value\">\n                    <ng-container [ngSwitch]=\"t.value\">\n                      <ng-container *ngSwitchCase=\"Template.bug\">I found a bug</ng-container>\n                      <ng-container *ngSwitchCase=\"Template.feature\">I would like a new feature</ng-container>\n                    </ng-container>\n                  </option>\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <p *ngIf=\"issueUrl\">\n        <span>Please report the issue on Gitlab using</span>\n        <a class=\"pl-1\" [href]=\"issueUrl\" target=\"_blank\">this link</a>\n        .\n      </p>\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: IssueConfirmComponent, selector: "he-issue-confirm", inputs: { title: "title", repository: "repository", template: "template", isCommunity: "isCommunity" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">{{ title }}</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(false)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <p class=\"mb-2\">Please select the type of issue from the list below to start:</p>\n\n      <div class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"repository\">Category</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select [(ngModel)]=\"repository\" name=\"repository\" required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  <option *ngFor=\"let repo of repositories\" [value]=\"repo\">\n                    <ng-container [ngSwitch]=\"repo\">\n                      <ng-container *ngSwitchCase=\"Repository.glossary\">Glossary of terms / lookup issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.models\">Calculation issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.orchestrator\">Orchestration issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.aggregation\">Aggregated Data issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.community\">UI/UX or API issues</ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.poorenemeck\">\n                        Conversion from P&N Spreadsheet\n                      </ng-container>\n                      <ng-container *ngSwitchCase=\"Repository.frontend\">Other issues</ng-container>\n                    </ng-container>\n                  </option>\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"repository\" class=\"field is-horizontal my-3\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label\" for=\"template\">Issue</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-multiple is-fullwidth\">\n                <select [(ngModel)]=\"template\" name=\"template\" required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  <option *ngFor=\"let t of Template | keys\" [value]=\"t.value\">\n                    <ng-container [ngSwitch]=\"t.value\">\n                      <ng-container *ngSwitchCase=\"Template.bug\">I found a bug</ng-container>\n                      <ng-container *ngSwitchCase=\"Template.feature\">I would like a new feature</ng-container>\n                    </ng-container>\n                  </option>\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <p *ngIf=\"issueUrl\">\n        <span>Please report the issue on Gitlab using</span>\n        <a class=\"pl-1\" [href]=\"issueUrl\" target=\"_blank\">this link</a>\n        .\n      </p>\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: IssueConfirmComponent, decorators: [{
             type: Component$1,
@@ -309,7 +337,7 @@ class NavigationMenuComponent {
         this.service.collapse(this.collapsed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NavigationMenuComponent, deps: [{ token: NavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: { sticky: "sticky", collapsible: "collapsible" }, host: { properties: { "class": "this.classes", "class.is-collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<aside class=\"menu\" [class.sticky]=\"sticky\" [style.max-height]=\"maxHeight\">\n  <button class=\"button collapse is-small is-white\" (click)=\"toggle()\" *ngIf=\"collapsible\">\n    <fa-icon icon=\"angle-double-left\" [class.is-hidden]=\"collapsed\"></fa-icon>\n    <fa-icon icon=\"angle-double-right\" [class.is-hidden]=\"!collapsed\"></fa-icon>\n    <span class=\"ml-2\" i18n=\"@@collapse\" [class.is-hidden]=\"collapsed\">Collapse</span>\n  </button>\n  <ng-content></ng-content>\n</aside>\n", styles: [":host{display:block}:host.is-collapsed ::ng-deep span.no-collapse{display:block;text-align:center}.menu{font-size:.9rem;overflow-x:hidden;overflow-y:auto}.collapse{width:100%;justify-content:left}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: { sticky: "sticky", collapsible: "collapsible" }, host: { properties: { "class": "this.classes", "class.is-collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<aside class=\"menu\" [class.sticky]=\"sticky\" [style.max-height]=\"maxHeight\">\n  <button class=\"button collapse is-small is-white\" (click)=\"toggle()\" *ngIf=\"collapsible\">\n    <fa-icon icon=\"angle-double-left\" [class.is-hidden]=\"collapsed\"></fa-icon>\n    <fa-icon icon=\"angle-double-right\" [class.is-hidden]=\"!collapsed\"></fa-icon>\n    <span class=\"ml-2\" i18n=\"@@collapse\" [class.is-hidden]=\"collapsed\">Collapse</span>\n  </button>\n  <ng-content></ng-content>\n</aside>\n", styles: [":host{display:block}:host.is-collapsed ::ng-deep span.no-collapse{display:block;text-align:center}.menu{font-size:.9rem;overflow-x:hidden;overflow-y:auto}.collapse{width:100%;justify-content:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NavigationMenuComponent, decorators: [{
             type: Component$1,
@@ -345,13 +373,13 @@ class SocialTagsComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SocialTagsComponent, deps: [{ token: i1$1.Meta }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SocialTagsComponent, deps: [{ token: i1$2.Meta }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SocialTagsComponent, selector: "he-social-tags", inputs: { config: "config" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<span></span>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SocialTagsComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-social-tags', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span></span>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.Meta }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Meta }]; }, propDecorators: { config: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,
@@ -413,7 +441,7 @@ class ToastComponent {
         this.toasts.splice(this.toasts.findIndex(val => val.id === toast.id), 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ToastComponent, deps: [{ token: HeToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ToastComponent, selector: "he-toast", ngImport: i0, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  <div class=\"notification is-{{ toast.color }}\" role=\"alert\" *ngFor=\"let toast of toasts\">\n    <button class=\"delete\" aria-label=\"delete\" (click)=\"dismiss(toast)\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n    <strong [ngSwitch]=\"toast.color\">\n      <ng-container *ngSwitchCase=\"'danger'\">\n        <ng-container [ngSwitch]=\"toast.message\">\n          <span *ngSwitchCase=\"'Unauthorized'\">You are not allowed to perform this action.</span>\n          <span *ngSwitchCase=\"'form-invalid'\">Please fix all the errors on this page.</span>\n          <span *ngSwitchCase=\"'users-email-already-taken'\">Email already taken.</span>\n          <span *ngSwitchCase=\"'users-auth-already-taken'\">Account already connected.</span>\n          <span *ngSwitchDefault>\n            <span *ngIf=\"toast.showRawMessage\">{{ toast.message }}</span>\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <span *ngIf=\"toast.showRawMessage\">{{ toast.message }}</span>\n        <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n      </ng-container>\n    </strong>\n  </div>\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ToastComponent, selector: "he-toast", ngImport: i0, template: "<div class=\"mb-3 columns is-centered is-vcentered\">\n  <div class=\"notification is-{{ toast.color }}\" role=\"alert\" *ngFor=\"let toast of toasts\">\n    <button class=\"delete\" aria-label=\"delete\" (click)=\"dismiss(toast)\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n    <strong [ngSwitch]=\"toast.color\">\n      <ng-container *ngSwitchCase=\"'danger'\">\n        <ng-container [ngSwitch]=\"toast.message\">\n          <span *ngSwitchCase=\"'Unauthorized'\">You are not allowed to perform this action.</span>\n          <span *ngSwitchCase=\"'form-invalid'\">Please fix all the errors on this page.</span>\n          <span *ngSwitchCase=\"'users-email-already-taken'\">Email already taken.</span>\n          <span *ngSwitchCase=\"'users-auth-already-taken'\">Account already connected.</span>\n          <span *ngSwitchDefault>\n            <span *ngIf=\"toast.showRawMessage\">{{ toast.message }}</span>\n            <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n          </span>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <span *ngIf=\"toast.showRawMessage\">{{ toast.message }}</span>\n        <span [class.is-hidden]=\"toast.showRawMessage\">An unknown error occurred. Please try again later.</span>\n      </ng-container>\n    </strong>\n  </div>\n</div>\n", styles: [":host{bottom:0;position:fixed;width:100%;z-index:1000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component$1,
@@ -1180,7 +1208,7 @@ class HeCommonLightModule {
             NoExtPipe,
             PluralizePipe,
             KeyToLabelPipe,
-            PrecisionPipe], imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule], exports: [HeFontawesomeModule, IssueConfirmComponent,
+            PrecisionPipe], imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule, HeSvgIconsModule], exports: [HeFontawesomeModule, HeSvgIconsModule, IssueConfirmComponent,
             NavigationMenuComponent,
             SocialTagsComponent,
             ToastComponent,
@@ -1196,14 +1224,14 @@ class HeCommonLightModule {
             PluralizePipe,
             KeyToLabelPipe,
             PrecisionPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeCommonLightModule, imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule, HeFontawesomeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeCommonLightModule, imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule, HeSvgIconsModule, HeFontawesomeModule, HeSvgIconsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeCommonLightModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: components$b,
-                    exports: [HeFontawesomeModule, ...components$b],
-                    imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule]
+                    exports: [HeFontawesomeModule, HeSvgIconsModule, ...components$b],
+                    imports: [CommonModule, FormsModule, RouterModule, HeFontawesomeModule, HeSvgIconsModule]
                 }]
         }] });
 
@@ -1426,7 +1454,7 @@ class HeNodeService {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeNodeService, deps: [{ token: i1$2.HttpClient }, { token: HeAuthService }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeNodeService, deps: [{ token: i1$3.HttpClient }, { token: HeAuthService }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeNodeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeNodeService, decorators: [{
@@ -1434,7 +1462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: HeAuthService }, { type: HeCommonService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: HeAuthService }, { type: HeCommonService }]; } });
 
 const gitUrl$1 = () => `${gitHome}/hestia-aggregation-engine/-/blob/${gitBranch()}`;
 const rawUrl = () => `${gitRawBaseUrl}/hestia-aggregation-engine/-/raw/${gitBranch()}`;
@@ -1479,7 +1507,7 @@ class HeAggregationEngineService {
     model(model) {
         return this.model$(model).pipe(take(1)).toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeAggregationEngineService, deps: [{ token: i1$2.HttpClient }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeAggregationEngineService, deps: [{ token: i1$3.HttpClient }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeAggregationEngineService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeAggregationEngineService, decorators: [{
@@ -1487,7 +1515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: HeNodeService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: HeNodeService }]; } });
 
 const HE_CALCULATIONS_BASE_URL = new InjectionToken('HE_CALCULATIONS_BASE_URL');
 const HE_ORCHESTRATOR_BASE_URL = new InjectionToken('HE_ORCHESTRATOR_BASE_URL');
@@ -1496,7 +1524,7 @@ const engineGitUrl = () => `${engineGitBaseUrl()}/-/blob/${gitBranch()}`;
 const engineRawUrl = () => `${gitRawBaseUrl}/hestia-engine-models/-/raw/${gitBranch()}`;
 const findModels = (models, termId) => models.filter(({ term }) => term === termId);
 const findMatchingModel = (models, model) => Object.keys(model).length > 0
-    ? models.find(m => Object.entries(model).every(([key, value]) => value === m[key]))
+    ? models.flat().find(m => Object.entries(model).every(([key, value]) => value === m[key]))
     : null;
 const modelParams = (node, includeTerm = true) => filterParams({
     model: 'methodModel' in node ? node?.methodModel['@id'] : undefined,
@@ -1538,6 +1566,9 @@ const mapModelLink = (ecoinvent = false) => ({ path, docPath, ...link }) => ({
     docPath: `${engineGitUrl()}/${docPath}`,
     apiDocsPath: pathToApiDocsPath(link.model, link.term || link.modelKey)
 });
+const findOrchestratorModel = ({ models }, model) => Object.keys(model).length > 0
+    ? models.flat().find(m => Object.entries(model).every(([key, value]) => value === m[key]))
+    : null;
 class HeEngineService {
     constructor(_calculationsBaseUrl, _orchestratorBaseUrl, http) {
         this._calculationsBaseUrl = _calculationsBaseUrl;
@@ -1633,7 +1664,7 @@ class HeEngineService {
         })
             .toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeEngineService, deps: [{ token: HE_CALCULATIONS_BASE_URL }, { token: HE_ORCHESTRATOR_BASE_URL }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeEngineService, deps: [{ token: HE_CALCULATIONS_BASE_URL }, { token: HE_ORCHESTRATOR_BASE_URL }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeEngineService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeEngineService, decorators: [{
@@ -1647,7 +1678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [HE_ORCHESTRATOR_BASE_URL]
-                }] }, { type: i1$2.HttpClient }]; } });
+                }] }, { type: i1$3.HttpClient }]; } });
 
 class BlankNodeStateComponent {
     constructor(aggregationEngineService, engineService) {
@@ -1690,7 +1721,7 @@ class BlankNodeStateComponent {
         return this.engineService.nodeModel$(this.node, this.key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeStateComponent, deps: [{ token: HeAggregationEngineService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: { dataState: "dataState", nodeType: "nodeType", dataKey: "dataKey", key: "key", node: "node", state: "state", linkClass: "linkClass" }, ngImport: i0, template: "<ng-container *ngIf=\"show\">\n  <ng-container *bindOnce=\"node\">\n    <span *ngFor=\"let star of stars\">*</span>\n    <span *ngIf=\"stars.length === 0 || 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</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\n    [ngClass]=\"linkClass\"\n    [href]=\"model.apiDocsPath || model.docPath || model.path\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\">\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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: { dataState: "dataState", nodeType: "nodeType", dataKey: "dataKey", key: "key", node: "node", state: "state", linkClass: "linkClass" }, ngImport: i0, template: "<ng-container *ngIf=\"show\">\n  <ng-container *bindOnce=\"node\">\n    <span *ngFor=\"let star of stars\">*</span>\n    <span *ngIf=\"stars.length === 0 || 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</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\n    [ngClass]=\"linkClass\"\n    [href]=\"model.apiDocsPath || model.docPath || model.path\"\n    target=\"_blank\"\n    (click)=\"$event.stopPropagation()\">\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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeStateComponent, decorators: [{
             type: Component$1,
@@ -1720,7 +1751,7 @@ class BlankNodeStateNoticeComponent {
         return this.dataState !== DataState.original;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeStateNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: { dataState: "dataState", showAggregated: "showAggregated", showDeleted: "showDeleted" }, ngImport: i0, template: "<p class=\"is-size-7 is-italic\" *ngIf=\"show\">\n  <span class=\"pl-1 notice-data-unchaged\">\u2020 Data uploaded by the user</span>\n  <span class=\"pl-1 notice-data-added\">* Data added by Hestia</span>\n  <span class=\"pl-1 notice-data-updated\">** Data updated by Hestia</span>\n  <span *ngIf=\"showAggregated\" class=\"pl-1 notice-data-aggregated\">*** Data aggregated by Hestia</span>\n  <span *ngIf=\"showDeleted\" class=\"pl-1 notice-data-deleted\">**** Data deleted by Hestia</span>\n</p>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: { dataState: "dataState", showAggregated: "showAggregated", showDeleted: "showDeleted" }, ngImport: i0, template: "<p class=\"is-size-7 is-italic\" *ngIf=\"show\">\n  <span class=\"pl-1 notice-data-unchaged\">\u2020 Data uploaded by the user</span>\n  <span class=\"pl-1 notice-data-added\">* Data added by Hestia</span>\n  <span class=\"pl-1 notice-data-updated\">** Data updated by Hestia</span>\n  <span *ngIf=\"showAggregated\" class=\"pl-1 notice-data-aggregated\">*** Data aggregated by Hestia</span>\n  <span *ngIf=\"showDeleted\" class=\"pl-1 notice-data-deleted\">**** Data deleted by Hestia</span>\n</p>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeStateNoticeComponent, decorators: [{
             type: Component$1,
@@ -1762,7 +1793,7 @@ class BlankNodeValueDeltaComponent {
         return this.displayType === DeltaDisplayType.percent ? evaluateSuccess(this.delta) : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeValueDeltaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: { value: "value", originalValue: "originalValue", displayType: "displayType" }, ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: { value: "value", originalValue: "originalValue", displayType: "displayType" }, ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BlankNodeValueDeltaComponent, decorators: [{
             type: Component$1,
@@ -2034,7 +2065,7 @@ class LinkKeyValueComponent {
         return isExpandable(value) && 'term' in value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: LinkKeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: { node: "node", nodeType: "nodeType", dataKey: "dataKey", key: "key", defaultValue: "defaultValue", dataState: "dataState" }, host: { properties: { "class.is-inline-block": "this.isInlineBlock" } }, ngImport: i0, template: "<ng-container *ngIf=\"!isUndefined(value); else showDefault\">\n  <ng-container *bindOnce=\"node\">\n    <a class=\"is-dark\" [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\">\n      <b>{{ key }}</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n\n    <ng-container *ngIf=\"isArray; else singleValue\">\n      <div class=\"array-container is-pl-2\">\n        <ng-container *ngFor=\"let v of value\">\n          <ng-template #nonBlankNodeValue>\n            <p>\n              <ng-container *ngTemplateOutlet=\"valueContent; context: { value: v }\"></ng-container>\n            </p>\n          </ng-template>\n\n          <ng-container *ngIf=\"isBlankNode(v); else nonBlankNodeValue\">\n            <div>\n              <a class=\"is-dark\" [href]=\"valueLink(v.term)\">{{ v.term.name || v.term['@id'] }}</a>\n              <span>:</span>\n              <span class=\"is-pl-2\" *ngIf=\"!isUndefined(v.value)\">\n                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: v.value }\"></ng-container>\n              </span>\n\n              <ng-container *ngIf=\"!isUndefined(v.min) || !isUndefined(v.max)\">\n                <small class=\"is-pl-1\">({{ minMaxValue(v.min, v.max) }})</small>\n              </ng-container>\n\n              <he-blank-node-state\n                class=\"pl-1\"\n                [node]=\"v\"\n                [nodeType]=\"nodeType\"\n                [dataState]=\"dataState\"\n                [dataKey]=\"dataKey\"\n                key=\"value\"\n                linkClass=\"is-dark\"></he-blank-node-state>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #valueContent let-v=\"value\">\n  <span class=\"is-inline-block is-nowrap\" [innerHtml]=\"toString(v)\"></span>\n</ng-template>\n\n<ng-template #singleValue>\n  <ng-container *ngTemplateOutlet=\"valueContent; context: { value }\"></ng-container>\n\n  <he-blank-node-state\n    class=\"pl-1\"\n    [node]=\"node\"\n    [nodeType]=\"nodeType\"\n    [dataState]=\"dataState\"\n    [dataKey]=\"dataKey\"\n    [key]=\"key\"\n    linkClass=\"is-dark\"></he-blank-node-state>\n</ng-template>\n\n<ng-template #showDefault>\n  <span *ngIf=\"!!defaultValue\">{{ defaultValue }}</span>\n</ng-template>\n", styles: [":host{display:block}:host a.has-text-white:hover,:host a.has-text-white.is-hovered{text-decoration:underline}.array-container{max-height:100px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: { node: "node", nodeType: "nodeType", dataKey: "dataKey", key: "key", defaultValue: "defaultValue", dataState: "dataState" }, host: { properties: { "class.is-inline-block": "this.isInlineBlock" } }, ngImport: i0, template: "<ng-container *ngIf=\"!isUndefined(value); else showDefault\">\n  <ng-container *bindOnce=\"node\">\n    <a class=\"is-dark\" [href]=\"baseUrl + '/schema/' + type + '#' + key\" target=\"_blank\">\n      <b>{{ key }}</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n\n    <ng-container *ngIf=\"isArray; else singleValue\">\n      <div class=\"array-container is-pl-2\">\n        <ng-container *ngFor=\"let v of value\">\n          <ng-template #nonBlankNodeValue>\n            <p>\n              <ng-container *ngTemplateOutlet=\"valueContent; context: { value: v }\"></ng-container>\n            </p>\n          </ng-template>\n\n          <ng-container *ngIf=\"isBlankNode(v); else nonBlankNodeValue\">\n            <div>\n              <a class=\"is-dark\" [href]=\"valueLink(v.term)\">{{ v.term.name || v.term['@id'] }}</a>\n              <span>:</span>\n              <span class=\"is-pl-2\" *ngIf=\"!isUndefined(v.value)\">\n                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: v.value }\"></ng-container>\n              </span>\n\n              <ng-container *ngIf=\"!isUndefined(v.min) || !isUndefined(v.max)\">\n                <small class=\"is-pl-1\">({{ minMaxValue(v.min, v.max) }})</small>\n              </ng-container>\n\n              <he-blank-node-state\n                class=\"pl-1\"\n                [node]=\"v\"\n                [nodeType]=\"nodeType\"\n                [dataState]=\"dataState\"\n                [dataKey]=\"dataKey\"\n                key=\"value\"\n                linkClass=\"is-dark\"></he-blank-node-state>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #valueContent let-v=\"value\">\n  <span class=\"is-inline-block is-nowrap\" [innerHtml]=\"toString(v)\"></span>\n</ng-template>\n\n<ng-template #singleValue>\n  <ng-container *ngTemplateOutlet=\"valueContent; context: { value }\"></ng-container>\n\n  <he-blank-node-state\n    class=\"pl-1\"\n    [node]=\"node\"\n    [nodeType]=\"nodeType\"\n    [dataState]=\"dataState\"\n    [dataKey]=\"dataKey\"\n    [key]=\"key\"\n    linkClass=\"is-dark\"></he-blank-node-state>\n</ng-template>\n\n<ng-template #showDefault>\n  <span *ngIf=\"!!defaultValue\">{{ defaultValue }}</span>\n</ng-template>\n", styles: [":host{display:block}:host a.has-text-white:hover,:host a.has-text-white.is-hovered{text-decoration:underline}.array-container{max-height:100px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: LinkKeyValueComponent, decorators: [{
             type: Component$1,
@@ -2056,6 +2087,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
                 args: ['class.is-inline-block']
             }] } });
 
+const loadMapUrl = 'https://maps.googleapis.com/maps/api/js';
+const buildMapsUrl = (params) => Object.entries(params)
+    .filter(([_key, values]) => values.length)
+    .map(([key, values]) => `${key}=${values.join(',')}`)
+    .join('&');
+const HE_MAP_LOADED = new InjectionToken('Google Maps API Loaded');
+/**
+ * Usage:
+ * ```
+ * // import HttpClientJsonpModule
+ * imports: [HttpClientJsonpModule]
+ *
+ * // Inject in module
+ * providers: [{ provide: HE_MAP_LOADED, useFactory: loadMapApi(apiKey), deps: [HttpClient]} ]
+ *
+ * // Inject in component
+ * constructor(@Inject(HE_MAP_LOADED) public mapLoaded$: Observable<boolean>) { }
+ * ```
+ * @param apiKey
+ * @param libraries
+ * @returns
+ */
+const loadMapApi = (apiKey, libraries = ['visualization', 'drawing']) => (httpClient) => of(`${loadMapUrl}?${buildMapsUrl({ key: [apiKey], libraries })}`).pipe(mergeMap(url => httpClient.jsonp(url, 'callback')), shareReplay({ bufferSize: 1, refCount: true }), map(() => true), catchError(e => {
+    console.error(e);
+    return of(false);
+}));
 const locationQuery = (bounds, searchField = 'location') => {
     const topRight = bounds.getNorthEast();
     const bottomLeft = bounds.getSouthWest();
@@ -2240,7 +2297,7 @@ class MapsDrawingConfirmComponent {
         this.feature = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MapsDrawingConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: { value: "value", modes: "modes", center: "center", zoom: "zoom" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map height=\"100%\" width=\"100%\" [zoom]=\"zoom\" [center]=\"center\" [options]=\"options\"></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"], dependencies: [{ kind: "component", type: i1$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: { value: "value", modes: "modes", center: "center", zoom: "zoom" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Draw on Map</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(value)\"></button>\n    </header>\n    <section class=\"modal-card-body p-0\">\n      <google-map height=\"100%\" width=\"100%\" [zoom]=\"zoom\" [center]=\"center\" [options]=\"options\"></google-map>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"closed.next(value)\">\n        <span>Close</span>\n      </button>\n      <button class=\"button is-danger\" (click)=\"clear()\">\n        <fa-icon class=\"mr-2\" icon=\"times\"></fa-icon>\n        <span>Clear</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: ["google-map{display:block;height:100%;max-height:calc(100vh - 146px);min-height:500px}\n"], dependencies: [{ kind: "component", type: i1$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MapsDrawingConfirmComponent, decorators: [{
             type: Component$1,
@@ -2324,7 +2381,7 @@ class MobileShellComponent {
         button.onClick?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MobileShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: MobileShellComponent, selector: "he-mobile-shell", inputs: { menuButtons: "menuButtons", defaultActiveButtonId: "defaultActiveButtonId" }, outputs: { menuShown: "menuShown" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"shell-content\">\n  <div [class.menu-expanded]=\"expanded()\" class=\"shell__content--body | h-100\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<aside class=\"shell-footer | is-flex is-justify-content-space-between\">\n  <a (click)=\"onMenuButtonClick(button)\" *ngFor=\"let button of buttons()\" class=\"button menu-button is-secondary\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        iconTemplate ?? defaultIconTemplate;\n        context: { $implicit: button, isActive: button.isActive }\n      \"></ng-container>\n    <span *ngIf=\"button.isActive && button.label\" class=\"menu-button-label\">{{ button.label }}</span>\n  </a>\n</aside>\n\n<div [class.expanded]=\"expanded()\" class=\"shell-menu | is-absolute w-100 h-100\">\n  <ng-template [ngTemplateOutlet]=\"menuRef()\"></ng-template>\n</div>\n\n<ng-template #defaultIconTemplate let-button>\n  <fa-icon [icon]=\"button.icon\"></fa-icon>\n</ng-template>\n", styles: [":host{position:relative;display:grid;grid-template-rows:1fr auto;width:100%;height:100%;overflow:hidden;--menu-height: 2.875em}.shell-footer{background:#193957;z-index:10}.shell-menu{bottom:0;left:0;background:#fefaef;transform:translateY(100%);transition:transform .1s ease-out;padding-bottom:var(--menu-height)}.shell-menu.expanded{transform:translateY(0)}.menu-button-label{font-size:.5rem;line-height:normal;letter-spacing:-.01rem}.shell-content{overflow:auto}.menu-button{box-shadow:none;display:flex;flex-direction:column;align-items:center;height:3.5em;width:2em}.menu-button:hover{background-color:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: MobileShellComponent, selector: "he-mobile-shell", inputs: { menuButtons: "menuButtons", defaultActiveButtonId: "defaultActiveButtonId" }, outputs: { menuShown: "menuShown" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"shell-content\">\n  <div [class.menu-expanded]=\"expanded()\" class=\"shell__content--body | h-100\">\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<aside class=\"shell-footer | is-flex is-justify-content-space-between\">\n  <a (click)=\"onMenuButtonClick(button)\" *ngFor=\"let button of buttons()\" class=\"button menu-button is-secondary\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        iconTemplate ?? defaultIconTemplate;\n        context: { $implicit: button, isActive: button.isActive }\n      \"></ng-container>\n    <span *ngIf=\"button.isActive && button.label\" class=\"menu-button-label\">{{ button.label }}</span>\n  </a>\n</aside>\n\n<div [class.expanded]=\"expanded()\" class=\"shell-menu | is-absolute w-100 h-100\">\n  <ng-template [ngTemplateOutlet]=\"menuRef()\"></ng-template>\n</div>\n\n<ng-template #defaultIconTemplate let-button>\n  <fa-icon [icon]=\"button.icon\"></fa-icon>\n</ng-template>\n", styles: [":host{position:relative;display:grid;grid-template-rows:1fr auto;width:100%;height:100%;overflow:hidden;--menu-height: 2.875em}.shell-footer{background:#193957;z-index:10}.shell-menu{bottom:0;left:0;background:#fefaef;transform:translateY(100%);transition:transform .1s ease-out;padding-bottom:var(--menu-height)}.shell-menu.expanded{transform:translateY(0)}.menu-button-label{font-size:.5rem;line-height:normal;letter-spacing:-.01rem}.shell-content{overflow:auto}.menu-button{box-shadow:none;display:flex;flex-direction:column;align-items:center;height:3.5em;width:2em}.menu-button:hover{background-color:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: MobileShellComponent, decorators: [{
             type: Component$1,
@@ -2352,7 +2409,7 @@ class PopoverComponent {
         this.active = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block is-relative popover is-popover-{{ position }}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{ message: message, data: data }\"></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: PopoverComponent, selector: "he-popover", inputs: { message: "message", content: "content", data: "data", position: "position" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"is-inline-block is-relative popover is-popover-{{ position }}\" [class.is-popover-active]=\"active\">\n  <ng-content></ng-content>\n\n  <div class=\"popover-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"content || ct\"\n      [ngTemplateOutletContext]=\"{ message: message, data: data }\"></ng-template>\n\n    <footer>\n      <ng-content select=\"[actions]\"></ng-content>\n      <button class=\"button is-small is-info\" (click)=\"$event.stopPropagation(); active = false\">\n        <span i18n=\"@@close\">Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #ct>\n  <p class=\"mb-2 is-pre-wrap\" [innerHtml]=\"message\"></p>\n</ng-template>\n", styles: [":host{cursor:pointer;display:block}.popover .popover-content{z-index:99999;position:absolute;display:none;font-size:.8rem;padding:.4rem .8rem;color:#fff;background-color:#193957;border-radius:6px;box-shadow:8px 8px 12px #0000001a;width:max-content;max-width:24rem}.popover .popover-content:before{position:absolute;content:\"\";border-style:solid;pointer-events:none;height:0;width:0;top:100%;left:50%;border-color:transparent;border-bottom-color:#193957;border-left-color:#193957;border-width:.4rem;margin-left:-.4rem;margin-top:-.4rem;transform-origin:center}.popover .popover-content{inset:auto auto 100% 50%!important;transform:translate(-50%,-.7rem)!important}.popover .popover-content:before{inset:100% auto auto 50%!important;transform:rotate(-45deg)}.popover.is-popover-right .popover-content{inset:auto auto 50% 100%!important;transform:translate(.7rem,50%)!important}.popover.is-popover-right .popover-content:before{inset:50% auto auto 0!important;transform:rotate(45deg)}.popover.is-popover-bottom .popover-content{inset:100% auto auto 50%!important;transform:translate(-50%,.7rem)!important}.popover.is-popover-bottom .popover-content:before{inset:0 auto auto 50%!important;transform:rotate(135deg)}.popover.is-popover-left .popover-content{inset:auto 100% 50% auto!important;transform:translate(-.7rem,50%)!important}.popover.is-popover-left .popover-content:before{inset:50% auto auto 100%!important;transform:rotate(-135deg)}.popover.is-popover-active .popover-content,.popover.is-popover-hover:hover .popover-content,.popover .popover-trigger:focus~.popover-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component$1,
@@ -2464,7 +2521,7 @@ class SchemaVersionLinkComponent {
         return [baseUrl(), 'schema', this.node.schemaVersion, this.node['@type']].filter(Boolean).join('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SchemaVersionLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass", text: "text" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass", text: "text" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SchemaVersionLinkComponent, decorators: [{
             type: Component$1,
@@ -2521,7 +2578,7 @@ class SearchExtendComponent {
                 useExisting: forwardRef(() => SearchExtendComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" *ngIf=\"extended\">\n    <input\n      #searchInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      class=\"input search-input {{ class }}\"\n      name=\"search\"\n      [disabled]=\"disabled\"\n      [attr.placeholder]=\"placeholder\" />\n\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value || disabled\" (click)=\"clear()\">\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class }}\" type=\"submit\">\n      <fa-icon icon=\"search\"></fa-icon>\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" *ngIf=\"extended\">\n    <input\n      #searchInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      class=\"input search-input {{ class }}\"\n      name=\"search\"\n      [disabled]=\"disabled\"\n      [attr.placeholder]=\"placeholder\" />\n\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value || disabled\" (click)=\"clear()\">\n      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class }}\" type=\"submit\">\n      <fa-icon icon=\"search\"></fa-icon>\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SearchExtendComponent, decorators: [{
             type: Component$1,
@@ -2622,7 +2679,7 @@ class ShellComponent {
         button.onClick?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ShellComponent, selector: "he-shell", inputs: { shelfButtons: "shelfButtons", menuOverlap: "menuOverlap", closeMenuOnOutsideClick: "closeMenuOnOutsideClick", defaultActiveButtonId: "defaultActiveButtonId" }, outputs: { menuShown: "menuShown" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"shell | h-100\">\n  <aside>\n    <div class=\"shell__menu | is-relative h-100 is-flex is-flex-direction-column is-justify-content-space-between\">\n      <div class=\"shell__menu--section | is-flex is-flex-direction-column\">\n        <ng-container\n          *ngFor=\"let button of topMenuButtons(); trackBy: trackByFn\"\n          [ngTemplateOutlet]=\"buttonTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: button }\"></ng-container>\n      </div>\n\n      <div class=\"shell__menu--section | is-flex is-flex-direction-column\">\n        <ng-container\n          *ngFor=\"let button of bottomMenuButtons(); trackBy: trackByFn\"\n          [ngTemplateOutlet]=\"buttonTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: button }\"></ng-container>\n      </div>\n    </div>\n    <div class=\"shell__menuContent | h-100 is-absolute\" [class.expanded]=\"expanded()\">\n      <div class=\"h-100\" [class.is-hidden]=\"!expanded()\">\n        <ng-template [ngTemplateOutlet]=\"menuRef()\"></ng-template>\n      </div>\n    </div>\n  </aside>\n\n  <div class=\"shell__content | h-100 w-100 is-flex is-justify-content-flex-end\">\n    <div\n      class=\"shell__content--body | w-100\"\n      [class.menu-expanded]=\"!menuOverlap && expanded()\"\n      (click)=\"closeMenuOnOutsideClick ? hideMenu() : null\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonTemplate let-button>\n  <button\n    (click)=\"onMenuButtonClick(button)\"\n    class=\"menu-button button is-secondary\"\n    [ngClass]=\"button.isActive ? button.activeClassName : ''\"\n    [class.is-active]=\"button.isActive\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        iconTemplate ?? defaultIconTemplate;\n        context: { $implicit: button, isActive: button !== clickedButton }\n      \"></ng-container>\n  </button>\n</ng-template>\n\n<ng-template #defaultIconTemplate let-button>\n  <fa-icon [icon]=\"button.icon\"></fa-icon>\n</ng-template>\n", styles: ["::ng-deep :root{--menu-width: 200px;--menu-transition-time: .15s}.shell{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"menu content\";overflow:hidden}.shell>aside{position:relative;grid-area:menu}.shell>aside .shell__menu{background:#193957;padding:1.5em 0;z-index:10;min-width:2.875em}.shell>aside .shell__menuContent{background-color:#fefaef;width:var(--menu-width);top:0;right:1px;transform:translate(0);transition:transform var(--menu-transition-time) ease-out}.shell>aside .shell__menuContent.expanded{transform:translate(100%)}.shell__content{grid-area:content;overflow:hidden}.shell__content--body{transition:width var(--menu-transition-time) ease-out}.shell__content .menu-expanded{width:calc(100% - var(--menu-width))}.menu-button{border-radius:0;padding:1.25em .6em;box-shadow:none!important;border-width:0}.menu-button.is-active{background-color:#fff;color:#0a0a0a}.menu-button:hover:not(.is-active){background-color:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ShellComponent, selector: "he-shell", inputs: { shelfButtons: "shelfButtons", menuOverlap: "menuOverlap", closeMenuOnOutsideClick: "closeMenuOnOutsideClick", defaultActiveButtonId: "defaultActiveButtonId" }, outputs: { menuShown: "menuShown" }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"shell | h-100\">\n  <aside>\n    <div class=\"shell__menu | is-relative h-100 is-flex is-flex-direction-column is-justify-content-space-between\">\n      <div class=\"shell__menu--section | is-flex is-flex-direction-column\">\n        <ng-container\n          *ngFor=\"let button of topMenuButtons(); trackBy: trackByFn\"\n          [ngTemplateOutlet]=\"buttonTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: button }\"></ng-container>\n      </div>\n\n      <div class=\"shell__menu--section | is-flex is-flex-direction-column\">\n        <ng-container\n          *ngFor=\"let button of bottomMenuButtons(); trackBy: trackByFn\"\n          [ngTemplateOutlet]=\"buttonTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: button }\"></ng-container>\n      </div>\n    </div>\n    <div class=\"shell__menuContent | h-100 is-absolute\" [class.expanded]=\"expanded()\">\n      <div class=\"h-100\" [class.is-hidden]=\"!expanded()\">\n        <ng-template [ngTemplateOutlet]=\"menuRef()\"></ng-template>\n      </div>\n    </div>\n  </aside>\n\n  <div class=\"shell__content | h-100 w-100 is-flex is-justify-content-flex-end\">\n    <div\n      class=\"shell__content--body | w-100\"\n      [class.menu-expanded]=\"!menuOverlap && expanded()\"\n      (click)=\"closeMenuOnOutsideClick ? hideMenu() : null\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #buttonTemplate let-button>\n  <button\n    (click)=\"onMenuButtonClick(button)\"\n    class=\"menu-button button is-secondary\"\n    [ngClass]=\"button.isActive ? button.activeClassName : ''\"\n    [class.is-active]=\"button.isActive\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        iconTemplate ?? defaultIconTemplate;\n        context: { $implicit: button, isActive: button !== clickedButton }\n      \"></ng-container>\n  </button>\n</ng-template>\n\n<ng-template #defaultIconTemplate let-button>\n  <fa-icon [icon]=\"button.icon\"></fa-icon>\n</ng-template>\n", styles: ["::ng-deep :root{--menu-width: 200px;--menu-transition-time: .15s}.shell{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"menu content\";overflow:hidden}.shell>aside{position:relative;grid-area:menu}.shell>aside .shell__menu{background:#193957;padding:1.5em 0;z-index:10;min-width:2.875em}.shell>aside .shell__menuContent{background-color:#fefaef;width:var(--menu-width);top:0;right:1px;transform:translate(0);transition:transform var(--menu-transition-time) ease-out}.shell>aside .shell__menuContent.expanded{transform:translate(100%)}.shell__content{grid-area:content;overflow:hidden}.shell__content--body{transition:width var(--menu-transition-time) ease-out}.shell__content .menu-expanded{width:calc(100% - var(--menu-width))}.menu-button{border-radius:0;padding:1.25em .6em;box-shadow:none!important;border-width:0}.menu-button.is-active{background-color:#fff;color:#0a0a0a}.menu-button:hover:not(.is-active){background-color:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ShellComponent, decorators: [{
             type: Component$1,
@@ -2717,7 +2774,7 @@ class SortSelectComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SortSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SortSelectComponent, selector: "he-sort-select", inputs: { sortOptions: "sortOptions", alignment: "alignment", sortBy: "sortBy", sortOrder: "sortOrder" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div\n  (clickOutside)=\"showSortBy = false\"\n  [class.is-active]=\"showSortBy\"\n  [ngSwitch]=\"sortBySignal()\"\n  [ngClass]=\"'is-' + alignment\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy = !showSortBy\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy\"\n      [disableTooltip]=\"showSortBy\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      ngbTooltip=\"Sort options\"\n      placement=\"bottom\">\n      <fa-icon aria-hidden=\"true\" icon=\"sort-amount-up-alt\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy = false\" class=\"dropdown-content\">\n      <a\n        (click)=\"sort(option)\"\n        *ngFor=\"let option of sortOptions\"\n        [class.is-selected]=\"sortBySignal() === option.id\"\n        class=\"dropdown-item\">\n        <fa-icon\n          [icon]=\"arrowIcon\"\n          [style.visibility]=\"sortBySignal() === option.id ? 'visible' : 'hidden'\"\n          class=\"pr-2\"></fa-icon>\n        <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"pl-2 is-inline-block is-capitalized\">\n          {{ option.label }}\n        </span>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SortSelectComponent, selector: "he-sort-select", inputs: { sortOptions: "sortOptions", alignment: "alignment", sortBy: "sortBy", sortOrder: "sortOrder" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div\n  (clickOutside)=\"showSortBy = false\"\n  [class.is-active]=\"showSortBy\"\n  [ngSwitch]=\"sortBySignal()\"\n  [ngClass]=\"'is-' + alignment\"\n  class=\"dropdown\">\n  <div (click)=\"showSortBy = !showSortBy\" class=\"dropdown-trigger\">\n    <button\n      [class.is-active]=\"showSortBy\"\n      [disableTooltip]=\"showSortBy\"\n      aria-controls=\"sort-menu\"\n      aria-haspopup=\"true\"\n      class=\"button is-ghost\"\n      container=\"body\"\n      ngbTooltip=\"Sort options\"\n      placement=\"bottom\">\n      <fa-icon aria-hidden=\"true\" icon=\"sort-amount-up-alt\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"dropdown-menu\" id=\"sort-menu\" role=\"menu\">\n    <div (click)=\"showSortBy = false\" class=\"dropdown-content\">\n      <a\n        (click)=\"sort(option)\"\n        *ngFor=\"let option of sortOptions\"\n        [class.is-selected]=\"sortBySignal() === option.id\"\n        class=\"dropdown-item\">\n        <fa-icon\n          [icon]=\"arrowIcon\"\n          [style.visibility]=\"sortBySignal() === option.id ? 'visible' : 'hidden'\"\n          class=\"pr-2\"></fa-icon>\n        <span [style.border-color]=\"option.color ?? 'transparent'\" class=\"pl-2 is-inline-block is-capitalized\">\n          {{ option.label }}\n        </span>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: [".dropdown-item>span{border-left:2px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SortSelectComponent, decorators: [{
             type: Component$1,
@@ -4370,7 +4427,7 @@ class UnitConverterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: UnitConverterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: UnitConverterComponent, selector: "he-unit-converter", inputs: { term: "term", value: "value", fromUnits: "fromUnits", toUnits: "toUnits" }, ngImport: i0, 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\" (input)=\"updateValue()\" />\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"fromUnits\" name=\"fromUnits\" id=\"fromUnits\" (change)=\"updateUnits()\">\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\" (change)=\"updateUnits()\">\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\n          clipboardClass=\"button is-white px-2\"\n          [value]=\"result\"\n          [disabled]=\"!result\"\n          [hideText]=\"true\"></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\n          type=\"string\"\n          class=\"input is-small\"\n          [(ngModel)]=\"arg.value\"\n          [id]=\"arg.key\"\n          (input)=\"updateValue()\"\n          placeholder=\"Required for conversion\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".select{min-width:85px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: UnitConverterComponent, selector: "he-unit-converter", inputs: { term: "term", value: "value", fromUnits: "fromUnits", toUnits: "toUnits" }, ngImport: i0, 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\" (input)=\"updateValue()\" />\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth\">\n          <select [(ngModel)]=\"fromUnits\" name=\"fromUnits\" id=\"fromUnits\" (change)=\"updateUnits()\">\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\" (change)=\"updateUnits()\">\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\n          clipboardClass=\"button is-white px-2\"\n          [value]=\"result\"\n          [disabled]=\"!result\"\n          [hideText]=\"true\"></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\n          type=\"string\"\n          class=\"input is-small\"\n          [(ngModel)]=\"arg.value\"\n          [id]=\"arg.key\"\n          (input)=\"updateValue()\"\n          placeholder=\"Required for conversion\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".select{min-width:85px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: UnitConverterComponent, decorators: [{
             type: Component$1,
@@ -4555,7 +4612,7 @@ class HeMendeleyService {
     get(id) {
         return this.http.get(`${this.path}/${id}`).toPromise().catch(handleAPIError);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeMendeleyService, deps: [{ token: i1$2.HttpClient }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeMendeleyService, deps: [{ token: i1$3.HttpClient }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeMendeleyService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeMendeleyService, decorators: [{
@@ -4563,7 +4620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: HeCommonService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: HeCommonService }]; } });
 
 const searchableTypes = [NodeType.Cycle, NodeType.Source];
 const matchType = (type) => Object.freeze({
@@ -4667,6 +4724,7 @@ const productsQuery = Object.freeze({
     }
 });
 const matchAggregatedQuery = matchQuery('aggregated', true);
+const matchAggregatedValidatedQuery = matchQuery('aggregatedDataValidated', true);
 const isNestedKey = (key) => nestedSearchableKeys.includes(key.split('.')[0]);
 const matchNestedKey = (key, query) => isNestedKey(key)
     ? {
@@ -4766,7 +4824,7 @@ class HeSearchService {
             }
         }))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSearchService, deps: [{ token: i1$2.HttpClient }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSearchService, deps: [{ token: i1$3.HttpClient }, { token: HeCommonService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSearchService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSearchService, decorators: [{
@@ -4774,7 +4832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: HeCommonService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: HeCommonService }]; } });
 
 class BibliographiesSearchConfirmComponent {
     constructor(formBuilder, ref, mendeleyService, searchService) {
@@ -4846,13 +4904,13 @@ class BibliographiesSearchConfirmComponent {
     cancel() {
         this.closed.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BibliographiesSearchConfirmComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: HeMendeleyService }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading\" (click)=\"resetSearch()\">\n              <fa-icon icon=\"times\"></fa-icon>\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-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\n              class=\"is-block p-1 search-result\"\n              (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\">\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\">\n                <i>{{ result.name }}</i>\n              </span>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\">\n                -\n                <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.scopus || result.scopus\">\n                -\n                <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    mendeleyLink;\n                    context: { $implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID }\n                  \"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BibliographiesSearchConfirmComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: HeMendeleyService }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: { search: "search", searchSources: "searchSources", searchBibliographies: "searchBibliographies", searchBy: "searchBy" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading\" (click)=\"resetSearch()\">\n              <fa-icon icon=\"times\"></fa-icon>\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-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\n              class=\"is-block p-1 search-result\"\n              (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\">\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\">\n                <i>{{ result.name }}</i>\n              </span>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\">\n                -\n                <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.scopus || result.scopus\">\n                -\n                <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    mendeleyLink;\n                    context: { $implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID }\n                  \"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: BibliographiesSearchConfirmComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading\" (click)=\"resetSearch()\">\n              <fa-icon icon=\"times\"></fa-icon>\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"sm\"></fa-icon>\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-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\n              class=\"is-block p-1 search-result\"\n              (click)=\"selectResult(result)\"\n              [class.is-active]=\"selectedResult === result\">\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.title : result.title\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\">-</span>\n\n              <span class=\"px-1\">\n                <i>{{ result.name }}</i>\n              </span>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.documentDOI || result.documentDOI\">\n                -\n                <b>documentDOI:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography ? result.bibliography.documentDOI : result.documentDOI\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span class=\"px-1\" *ngIf=\"result.bibliography?.scopus || result.scopus\">\n                -\n                <b>scopus:</b>\n              </span>\n              <ngb-highlight\n                [result]=\"result.bibliography?.scopus || result.scopus\"\n                [term]=\"searchControl?.value\"></ngb-highlight>\n\n              <span>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    mendeleyLink;\n                    context: { $implicit: result.bibliography ? result.bibliography.mendeleyID : result.mendeleyID }\n                  \"></ng-container>\n              </span>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  <a *ngIf=\"id\" [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: HeMendeleyService }, { type: HeSearchService }]; }, propDecorators: { search: [{
+        }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: HeMendeleyService }, { type: HeSearchService }]; }, propDecorators: { search: [{
                 type: Input
             }], searchSources: [{
                 type: Input
@@ -5208,7 +5266,7 @@ class HeSchemaService {
             return headers;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSchemaService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSchemaService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSchemaService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeSchemaService, decorators: [{
@@ -5216,7 +5274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }]; } });
 
 class NodeLinkComponent {
     constructor() {
@@ -5236,7 +5294,7 @@ class NodeLinkComponent {
         return this.showExternalLink || isExternal() ? '_blank' : '_self';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass" }, ngImport: i0, template: "<a\n  *ngIf=\"showLink; else content\"\n  [ngClass]=\"linkClass\"\n  [href]=\"url\"\n  [target]=\"target\"\n  (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{ id }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLinkComponent, selector: "he-node-link", inputs: { node: "node", showExternalLink: "showExternalLink", linkClass: "linkClass" }, ngImport: i0, template: "<a\n  *ngIf=\"showLink; else content\"\n  [ngClass]=\"linkClass\"\n  [href]=\"url\"\n  [target]=\"target\"\n  (click)=\"$event.stopPropagation()\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  <fa-icon class=\"no-print ml-2\" icon=\"external-link-alt\" size=\"sm\" *ngIf=\"showExternalLink\"></fa-icon>\n</a>\n\n<ng-template #content>\n  <span #placeholder><ng-content></ng-content></span>\n  <span *ngIf=\"placeholder.children.length === 0\">{{ id }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLinkComponent, decorators: [{
             type: Component$1,
@@ -5334,7 +5392,7 @@ class NodeCsvSelectHeadersComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeCsvSelectHeadersComponent, deps: [{ token: HeSchemaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\">\n  <i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i>\n</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\" [(ngModel)]=\"allSelected\" (change)=\"toggleAll(); refresh()\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div\n      class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\">\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\" aria-haspopup=\"true\" aria-controls=\"select-menu\">\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\" [(ngModel)]=\"showNonIncluded\" (change)=\"refresh()\" />\n              <span class=\"ml-2\">\n                Include\n                <code>internal</code>\n                fields\n              </span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\" *ngFor=\"let field of termFields\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\" />\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\n            type=\"checkbox\"\n            class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\" />\n          <span class=\"ml-2\">{{ group.key }}</span>\n        </label>\n      </div>\n      <span\n        class=\"card-header-icon has-text-secondary\"\n        aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\"\n        pointer>\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\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\" />\n                <span class=\"ml-2\">{{ header.header }}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: { csv: "csv", keys: "keys", includeDefaultCSV: "includeDefaultCSV" }, outputs: { headersChanged: "headersChanged" }, ngImport: i0, template: "<p class=\"mb-2\">Please select which columns you would like to include:</p>\n\n<p class=\"my-2 is-size-7\">\n  <i>You can drag and drop the headers to sort them as they would appear in the CSV file.</i>\n</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\" [(ngModel)]=\"allSelected\" (change)=\"toggleAll(); refresh()\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow has-text-right\">\n    <div\n      class=\"dropdown is-right has-text-left\"\n      [class.is-active]=\"showSelectTermFields\"\n      (clickOutside)=\"showSelectTermFields = false\">\n      <div class=\"dropdown-trigger\" (click)=\"showSelectTermFields = !showSelectTermFields\">\n        <button class=\"button is-small\" aria-haspopup=\"true\" aria-controls=\"select-menu\">\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\" [(ngModel)]=\"showNonIncluded\" (change)=\"refresh()\" />\n              <span class=\"ml-2\">\n                Include\n                <code>internal</code>\n                fields\n              </span>\n            </label>\n          </a>\n          <div class=\"dropdown-item\">\n            <p>Toggle Term Fields</p>\n          </div>\n          <a class=\"dropdown-item\" *ngFor=\"let field of termFields\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [(ngModel)]=\"termFieldSelected[field]\"\n                (change)=\"toggleTermField(field)\" />\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\n            type=\"checkbox\"\n            class=\"selector\"\n            [indeterminate]=\"group.value.partialSelected\"\n            [(ngModel)]=\"group.value.selected\"\n            (change)=\"updateGroup(group.key); refresh()\" />\n          <span class=\"ml-2\">{{ group.key }}</span>\n        </label>\n      </div>\n      <span\n        class=\"card-header-icon has-text-secondary\"\n        aria-label=\"open / close\"\n        (click)=\"group.value.open = !group.value.open\"\n        pointer>\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\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [(ngModel)]=\"header.selected\"\n                  (change)=\"updateGroupHeader(group.key); refresh()\" />\n                <span class=\"ml-2\">{{ header.header }}</span>\n              </label>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </div>\n  </div>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.drag-container,.table-container{max-height:45vh;overflow-y:auto}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeCsvSelectHeadersComponent, decorators: [{
             type: Component$1,
@@ -5382,13 +5440,13 @@ class NodeCsvExportConfirmComponent {
     get downloadFilename() {
         return fileToExt(this.filename, this.extension);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeCsvExportConfirmComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>\n            Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n            selecting the exported file.\n          </span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{ includedNodes.length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <he-data-table maxHeight=\"400\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-striped mb-0\" *bindOnce=\"includedNodes\">\n            <thead>\n              <tr>\n                <th class=\"width-auto has-border-right\">\n                  <span>Type</span>\n                </th>\n                <th>\n                  <span>Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td class=\"width-auto has-border-right\">\n                  {{ node.node['@type'] }}\n                </td>\n                <td>\n                  <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                    <span>{{ node.node.name }}</span>\n                  </he-node-link>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </he-data-table>\n      </ng-container>\n\n      <he-node-csv-select-headers\n        [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\"\n        [keys]=\"headerKeys\"\n        [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\">\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeCsvExportConfirmComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: { nodes: "nodes", filename: "filename", headerKeys: "headerKeys", extension: "extension", isUpload: "isUpload" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>\n            Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n            selecting the exported file.\n          </span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{ includedNodes.length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <he-data-table maxHeight=\"400\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-striped mb-0\" *bindOnce=\"includedNodes\">\n            <thead>\n              <tr>\n                <th class=\"width-auto has-border-right\">\n                  <span>Type</span>\n                </th>\n                <th>\n                  <span>Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td class=\"width-auto has-border-right\">\n                  {{ node.node['@type'] }}\n                </td>\n                <td>\n                  <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                    <span>{{ node.node.name }}</span>\n                  </he-node-link>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </he-data-table>\n      </ng-container>\n\n      <he-node-csv-select-headers\n        [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\"\n        [keys]=\"headerKeys\"\n        [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\">\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvSelectHeadersComponent, selector: "he-node-csv-select-headers", inputs: ["csv", "keys", "includeDefaultCSV"], outputs: ["headersChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeCsvExportConfirmComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-node-csv-export-confirm', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Export as CSV</p>\n      <button class=\"delete\" aria-label=\"close\" (click)=\"closed.next(true)\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <div class=\"notification is-info\" role=\"alert\" *ngIf=\"isUpload\">\n        <span>After Download, you can edit and</span>\n        <a class=\"px-1\" routerLink=\"../\">upload the CSV file</a>\n        <span>to submit your content on the Hestia platform, and your draft will remain unchanged.</span>\n\n        <p>\n          <span>\n            Alternatively, you can import the CSV file right back by clicking on the \"Import from CSV\" button and\n            selecting the exported file.\n          </span>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"!isUpload && includedNodes.length > 1\">\n        <p class=\"mb-2\">\n          <b>{{ includedNodes.length }}</b>\n          <span class=\"px-1\">Nodes will be included in your download.</span>\n          <a (click)=\"showIncludeNodes = !showIncludeNodes\">\n            <ng-container *ngIf=\"!showIncludeNodes\">Show list</ng-container>\n            <ng-container *ngIf=\"showIncludeNodes\">Hide list</ng-container>\n          </a>\n        </p>\n\n        <he-data-table maxHeight=\"400\" *ngIf=\"showIncludeNodes\">\n          <table class=\"table is-fullwidth is-striped mb-0\" *bindOnce=\"includedNodes\">\n            <thead>\n              <tr>\n                <th class=\"width-auto has-border-right\">\n                  <span>Type</span>\n                </th>\n                <th>\n                  <span>Name</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let node of includedNodes\">\n                <td class=\"width-auto has-border-right\">\n                  {{ node.node['@type'] }}\n                </td>\n                <td>\n                  <he-node-link [node]=\"node.node\" [showExternalLink]=\"true\">\n                    <span>{{ node.node.name }}</span>\n                  </he-node-link>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </he-data-table>\n      </ng-container>\n\n      <he-node-csv-select-headers\n        [class.is-hidden]=\"isUpload\"\n        [csv]=\"csvData\"\n        [keys]=\"headerKeys\"\n        [includeDefaultCSV]=\"isUpload\"\n        (headersChanged)=\"headersUpdated($event)\"></he-node-csv-select-headers>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <a\n        class=\"button is-primary\"\n        target=\"_blank\"\n        [attr.disabled]=\"csvContent ? null : true\"\n        [href]=\"csvContent\"\n        [attr.download]=\"csvContent ? downloadFilename : null\"\n        (click)=\"closed.next(true)\">\n        <fa-icon class=\"mr-2\" icon=\"download\"></fa-icon>\n        <span>Download CSV</span>\n      </a>\n      <button class=\"button is-ghost\" (click)=\"closed.next(true)\">\n        <span>Cancel</span>\n      </button>\n    </footer>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { nodes: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { nodes: [{
                 type: Input
             }], filename: [{
                 type: Input
@@ -5447,7 +5505,7 @@ class NodeDiffsComponent {
         this.diffHtml = diffs || '<p>No difference.</p>';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeDiffsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeDiffsComponent, selector: "he-node-diffs", inputs: { data: "data", id: "id", type: "type", displayType: "displayType" }, outputs: { diffsLoaded: "diffsLoaded" }, ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeDiffsComponent, selector: "he-node-diffs", inputs: { data: "data", id: "id", type: "type", displayType: "displayType" }, outputs: { diffsLoaded: "diffsLoaded" }, ngImport: i0, 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: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeDiffsComponent, decorators: [{
             type: Component$1,
@@ -5481,7 +5539,7 @@ class NodeIconComponent {
         return this.type ? nodeTypeToIcon[this.type] : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeIconComponent, selector: "he-node-icon", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"icon\">\n  <fa-icon [icon]=\"icon\" [size]=\"size\"></fa-icon>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeIconComponent, selector: "he-node-icon", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"icon\">\n  <fa-icon [icon]=\"icon\" [size]=\"size\"></fa-icon>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeIconComponent, decorators: [{
             type: Component$1,
@@ -5525,13 +5583,13 @@ class NodeLogsFileComponent {
             .filter(({ code }) => (!this.modelFilter || code.toLocaleLowerCase().includes(`model=${this.modelFilter.toLowerCase()}`)) &&
             (!this.termFilter || code.toLocaleLowerCase().includes(`term=${this.termFilter.toLowerCase()}`)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLogsFileComponent, deps: [{ token: i1$1.DomSanitizer }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\"\n            id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\" />\n        </div>\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"termFilter\"\n            id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select (change)=\"applyFilters()\" [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\">\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\n          class=\"button is-small\"\n          (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard\n          clipboardClass=\"button is-secondary is-small\"\n          [value]=\"nodeLog | async\"\n          [hideText]=\"true\"\n          [icon]=\"['far', 'clone']\"\n          size=\"lg\"\n          rotate=\"180\"></he-clipboard>\n      </div>\n      <div class=\"control\">\n        <a\n          class=\"button is-info is-small\"\n          target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node?.['@id'], 'csv')\">\n          <fa-icon icon=\"download\"></fa-icon>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre\n    class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLogsFileComponent, deps: [{ token: i1$2.DomSanitizer }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLogsFileComponent, selector: "he-node-logs-file", inputs: { node: "node", dataState: "dataState" }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\"\n            id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\" />\n        </div>\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"termFilter\"\n            id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select (change)=\"applyFilters()\" [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\">\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\n          class=\"button is-small\"\n          (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard\n          clipboardClass=\"button is-secondary is-small\"\n          [value]=\"nodeLog | async\"\n          [hideText]=\"true\"\n          [icon]=\"['far', 'clone']\"\n          size=\"lg\"\n          rotate=\"180\"></he-clipboard>\n      </div>\n      <div class=\"control\">\n        <a\n          class=\"button is-info is-small\"\n          target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node?.['@id'], 'csv')\">\n          <fa-icon icon=\"download\"></fa-icon>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre\n    class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: KeysPipe, name: "keys" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLogsFileComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-node-logs-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      <ng-container *ngIf=\"showFilters\">\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\"\n            id=\"modelFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Method / Model\" />\n        </div>\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"termFilter\"\n            id=\"termFilter\"\n            (input)=\"applyFilters()\"\n            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select (change)=\"applyFilters()\" [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\">\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\n          class=\"button is-small\"\n          (click)=\"showFilters = !showFilters\"\n          [ngbTooltip]=\"showFilters ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <fa-icon icon=\"filter\"></fa-icon>\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard\n          clipboardClass=\"button is-secondary is-small\"\n          [value]=\"nodeLog | async\"\n          [hideText]=\"true\"\n          [icon]=\"['far', 'clone']\"\n          size=\"lg\"\n          rotate=\"180\"></he-clipboard>\n      </div>\n      <div class=\"control\">\n        <a\n          class=\"button is-info is-small\"\n          target=\"_blank\"\n          [href]=\"csvContent\"\n          [download]=\"fileToExt(node?.['@id'], 'csv')\">\n          <fa-icon icon=\"download\"></fa-icon>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre\n    class=\"pl-3 pt-3 ml-3\"><code class=\"is-block {{line.class}}\" *ngFor=\"let line of nodeLogLines\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code></pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: HeNodeService }]; }, propDecorators: { node: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: HeNodeService }]; }, propDecorators: { node: [{
                 type: Input
             }], dataState: [{
                 type: Input
@@ -6191,12 +6249,19 @@ const isSystemBoundary = (termId) => ({ isRecalculated, isRequired }) => {
     return !inSystemBoundary ? [isRecalculated, isRequired].some(Boolean) : `${inSystemBoundary}` === 'true';
 };
 const isGenericTerm = (termId) => [termId.startsWith('excreta')].every(Boolean);
-const extraTermIdsFromConfig = (config, key) => config.models
-    .flat()
-    .filter(m => m.key === key)
-    .map(m => m.value)
-    .filter(Boolean)
-    .filter(v => !isGenericTerm(v));
+const extraTermIdsFromConfig = (config, key, logs) => unique([
+    ...config.models
+        .flat()
+        .filter(m => m.key === key)
+        .map(m => m.value)
+        .filter(Boolean)
+        .filter(v => !isGenericTerm(v)),
+    // match logs with a configuration
+    ...Object.entries(logs)
+        .filter(([_id, value]) => typeof value === 'object' &&
+        Object.entries(value).some(([model, v]) => findOrchestratorModel(config, { key, model, value: v.model_key })))
+        .map(([key]) => key)
+]);
 const matchTermTypeFromKey = {
     products: productTermTermType.term,
     inputs: inputTermTermType.term,
@@ -6276,7 +6341,7 @@ class NodeLogsModelsComponent {
         const engineModels = await this.engineService.models();
         this.isBlankNodes
             ? await this.processBlankNodes(logs, engineModels, config)
-            : await this.processNonBlankNodes(logs, engineModels, config);
+            : this.processNonBlankNodes(logs, engineModels, config);
         this.filterResults();
         this.loading = false;
     }
@@ -6295,7 +6360,7 @@ class NodeLogsModelsComponent {
         return results;
     }
     async processBlankNodes(logs, engineModels, config) {
-        const extraTermIds = extraTermIdsFromConfig(config, this.nodeKey);
+        const extraTermIds = extraTermIdsFromConfig(config, this.nodeKey, logs);
         const matchTermTypes = [...(matchTermTypeFromKey[this.nodeKey] || []), ...(this.filterTermTypes || [])];
         const extraTerms = await this.searchTerms({
             bool: {
@@ -6376,11 +6441,11 @@ class NodeLogsModelsComponent {
         return this.node?.functionalUnit;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLogsModelsComponent, deps: [{ token: HeNodeService }, { token: HeSearchService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", filterTermTypesLabel: "filterTermTypesLabel", logsKey: "logsKey", noDataMessage: "noDataMessage" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\" *ngIf=\"allTerms?.length\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"filterResults()\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term\" (click)=\"term = ''; filterResults()\">\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th *ngIf=\"isBlankNodes\">\n            <span class=\"is-pr-1\">Units</span>\n            <span>(per&nbsp;</span>\n            <span [ngSwitch]=\"functionalUnit\">\n              <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">hectare</ng-container>\n              <ng-container *ngSwitchDefault>kg product</ng-container>\n            </span>\n            <span>)</span>\n          </th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th *ngIf=\"isBlankNodes\">Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{ i + 1 }})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>{{ noDataMessage || 'No data' }}</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"blankNode.term?.name || blankNode.key\">\n              <a\n                class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\">\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block is-pre-wrap\" *ngIf=\"blankNode.term\" [node]=\"blankNode.term\">\n                <span [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n              <span *ngIf=\"blankNode.key\">{{ blankNode.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{ blankNode.originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  {{ blankNode.originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                </div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">\n                    {{ blankNode.recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\" class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta\n                  *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta\n                    *ngIf=\"\n                      blankNode.originalValueByMethodId[model.methodId] !== null &&\n                        blankNode.recalculatedValueByMethodId[model.methodId] !== null;\n                      else noValue\n                    \"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a\n                class=\"is-inline-block is-pre-wrap\"\n                *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\"\n                target=\"_blank\"\n                [title]=\"subValue.key\">\n                <span>{{ subValue.key }}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{ subValue.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{ subValue.key | keyToLabel }}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{ subValue.id | keyToLabel }}</span>\n                  <he-node-link\n                    *ngSwitchDefault\n                    class=\"is-block pl-4\"\n                    [node]=\"termById(subValue.id)\"\n                    [attr.title]=\"termById(subValue.id).name\">\n                    <span [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend = !showLegend\">\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{ logColor[status.value] }}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{ status.value }}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input\n            type=\"checkbox\"\n            class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\" />\n          <span class=\"ml-2\">\n            Show only {{ filteredType | pluralize }} included in the default Hestia system boundary\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount\">\n      <span>Not in Hestia system boundary</span>\n    </td>\n  </ng-template>\n\n  <ng-container *ngIf=\"isSystemBoundary(data); else noValue\">\n    <td class=\"blank-node-index-{{ i }}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n      <ng-container *ngIf=\"getModelsAt(data, i); let models; else: noValue\">\n        <ng-template #modelSerie>\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\"></ng-container>\n        </ng-template>\n        <div *ngIf=\"models | isArray; else modelSerie\">\n          <p *ngFor=\"let model of models\">\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\"></ng-container>\n          </p>\n        </div>\n      </ng-container>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    [autoClose]=\"'outside'\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">\n      [{{ model.logs?.methodTier || model.model?.methodTier }}]\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\"\n      [autoClose]=\"'outside'\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"left\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (\n      <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\"></ng-container>\n      )\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <div class=\"table-container\" *bindOnce=\"logs\">\n    <table class=\"table is-dark is-fullwidth\">\n      <tbody>\n        <ng-container *ngIf=\"logs?.requirements\">\n          <ng-container *ngFor=\"let key of requirementKeys(logs.requirements)\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: { key, value: logs.requirements[key] }\"></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"logs?.logs\">\n          <ng-container *ngFor=\"let key of logs.logs | keys\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: key\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n\n  <ng-container *bindOnce=\"logs\">\n    <div class=\"it-mt-2\" *ngIf=\"logs?.missingLookups?.length\">\n      <p>Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-dark is-fullwidth is-striped\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">\n                <span>Filename</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Column Title</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{ data.filename }}</td>\n              <td>{{ data.column }}</td>\n              <td>{{ data.termId }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{ value }}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else: defaultValue\">\n    <he-node-link\n      class=\"is-inline-block is-align-middle\"\n      linkClass=\"is-dark\"\n      [node]=\"linkedNode\"\n      [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <tr>\n    <td class=\"has-border-right copy-log\">\n      <span class=\"is-inline-block is-align-middle\">\n        <ng-template #defaultMessage>\n          <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchDefault>{{ key | keyToLabel }}</ng-container>\n\n            <ng-container *ngSwitchCase=\"'property_id'\">Property Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'product_id'\">Product Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'input_id'\">Input Term @id</ng-container>\n\n            <ng-container *ngSwitchCase=\"'node_type_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">Node</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'siteType_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">siteType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_id_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_termType_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_id_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_termType_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <!-- Deprecated -->\n            <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n            <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n            <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n            <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">\n              <span>Cycle contains</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">\n              <span>All</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs have a lookup value</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\">\n              <code class=\"is-mr-1\">aboveGroundCropResidueBurnt</code>\n              <span>is present as Product</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"parseLogCompleteness(key); let completeness; else: defaultMessage\">\n          <span>Data completeness for</span>\n          <code class=\"is-mx-1\">{{ completeness.key }}</code>\n          <span>must be</span>\n          <code class=\"is-mx-1\">{{ completeness.value }}</code>\n        </ng-container>\n      </span>\n      <he-clipboard\n        class=\"is-inline-block is-align-middle\"\n        clipboardClass=\"is-size-7 is-p-1\"\n        [icon]=\"['far', 'clone']\"\n        [value]=\"key\"\n        [hideText]=\"true\"></he-clipboard>\n    </td>\n    <td>\n      <ng-template #singleValue>\n        <ng-container *ngTemplateOutlet=\"logLineValue; context: { key, value }\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"logValueArray(value); let valueArray; else: singleValue\">\n        <table class=\"table is-dark is-bordered is-striped\">\n          <thead *ngIf=\"valueArray[0] | isObject\">\n            <tr>\n              <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{ v.key }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let v of valueArray\">\n              <ng-template #singleArrayValue>\n                <td>{{ v }}</td>\n              </ng-template>\n              <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n                <td *ngFor=\"let vv of v | keys\">{{ vv.value }}</td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{ model.status }}</span>\n    </div>\n\n    <ng-container *ngIf=\"model.status === LogStatus.notRequired && model.logs?.is_not_relevant === 'True'\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <li *ngIf=\"model.logs.logs?.siteType_allowed === 'False'\">\n          The\n          <code>siteType</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_id_allowed === 'False'\">\n          The primary product\n          <code>@id</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_termType_allowed === 'False'\">\n          The primary product\n          <code>termType</code>\n          is not relevant.\n        </li>\n      </ul>\n    </ng-container>\n\n    <ng-container\n      *ngIf=\"model.logs && model.status !== LogStatus.notRequired && model.status !== LogStatus.skipHierarchy\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <ng-template #showRunOrchestrator>\n          <li class=\"is-run-orchestrator\">\n            <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n            <ng-container *ngIf=\"!model.logs?.shouldRun\">\n              <p>Some of the requirements were not met to run the model.</p>\n              <p>You can click on the model name on the left to view the debugging logs.</p>\n            </ng-container>\n            <ng-container *ngIf=\"model.logs?.logs?.error\">\n              <p>The model failed to run for the following reason:</p>\n              <p>\n                <code>{{ model.logs.logs.error }}</code>\n              </p>\n            </ng-container>\n          </li>\n        </ng-template>\n\n        <li\n          class=\"is-no-run-orchestrator\"\n          *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n          <ng-container *ngIf=\"!model.logs.runRequired\">\n            <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n              This model should not run for {{ nodeType | pluralize: 0 }}\n            </span>\n          </ng-container>\n\n          <ng-template #runNoConfig>\n            <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n              The {{ data.type || 'blank node' }} with Term\n              <code>{{ data.termId }}</code>\n              is already present or already added by another model.\n            </span>\n          </ng-template>\n\n          <ng-container *ngIf=\"model.config; else runNoConfig\">\n            <p class=\"is-run-strategy-{{ model.config.runStrategy }}\" [ngSwitch]=\"model.config.runStrategy\">\n              <span *ngSwitchCase=\"'always'\"></span>\n              <span *ngSwitchCase=\"'add_key_if_missing'\">We only gap-fill this key if not present</span>\n              <span *ngSwitchCase=\"'add_blank_node_if_missing'\">We only gap-fill this Blank Node if not present.</span>\n            </p>\n\n            <p class=\"is-mt-1\">\n              <span\n                class=\"is-run-with-measured\"\n                *ngIf=\"\n                  model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\n                \">\n                The\n                <code>{{ model.config.value }}</code>\n                was reported as measured.\n              </span>\n            </p>\n          </ng-container>\n        </li>\n\n        <li *ngIf=\"model.logs?.replaceLowerTier !== undefined\">\n          <span>\n            The recalculated\n            <b>methodTier</b>\n            was\n          </span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"!model.logs.replaceLowerTier\">lower than</span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"model.logs.replaceLowerTier\">higher than or equal to</span>\n          <span class=\"is-pl-1\">\n            the original\n            <b>methodTier</b>\n            .\n          </span>\n        </li>\n\n        <li class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.replaceLowerTier\">\n          <span>The recalculated</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}</b>\n          <span class=\"is-pl-1\">was</span>\n          <span class=\"is-pl-1\">\n            <ng-container *ngIf=\"model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">less than</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">more than or equal to</span>\n              <b class=\"is-pl-1\">{{ model.config.mergeArgs.replaceThreshold[1] * 100 }}%</b>\n            </ng-container>\n            <ng-container *ngIf=\"!model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">not sufficiently</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">sufficiently</span>\n            </ng-container>\n          </span>\n          <span class=\"is-pl-1\">different from the original</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}.</b>\n        </li>\n      </ul>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep .table td he-node-link{width:150px}}::ng-deep .table td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep .table td .open-node+he-node-link{width:130px}}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:12px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}::ng-deep .copy-log he-clipboard{visibility:hidden}::ng-deep .copy-log:hover he-clipboard{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: { node: "node", nodeKey: "nodeKey", originalValues: "originalValues", recalculatedValues: "recalculatedValues", terms: "terms", filterTermTypes: "filterTermTypes", filterTermTypesLabel: "filterTermTypesLabel", logsKey: "logsKey", noDataMessage: "noDataMessage" }, ngImport: i0, template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\" *ngIf=\"allTerms?.length\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"filterResults()\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term\" (click)=\"term = ''; filterResults()\">\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th *ngIf=\"isBlankNodes\">\n            <span class=\"is-pr-1\">Units</span>\n            <span>(per&nbsp;</span>\n            <span [ngSwitch]=\"functionalUnit\">\n              <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">hectare</ng-container>\n              <ng-container *ngSwitchDefault>kg product</ng-container>\n            </span>\n            <span>)</span>\n          </th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th *ngIf=\"isBlankNodes\">Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{ i + 1 }})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>{{ noDataMessage || 'No data' }}</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"blankNode.term?.name || blankNode.key\">\n              <a\n                class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\">\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block is-pre-wrap\" *ngIf=\"blankNode.term\" [node]=\"blankNode.term\">\n                <span [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n              <span *ngIf=\"blankNode.key\">{{ blankNode.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{ blankNode.originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  {{ blankNode.originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                </div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">\n                    {{ blankNode.recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\" class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta\n                  *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta\n                    *ngIf=\"\n                      blankNode.originalValueByMethodId[model.methodId] !== null &&\n                        blankNode.recalculatedValueByMethodId[model.methodId] !== null;\n                      else noValue\n                    \"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a\n                class=\"is-inline-block is-pre-wrap\"\n                *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\"\n                target=\"_blank\"\n                [title]=\"subValue.key\">\n                <span>{{ subValue.key }}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{ subValue.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{ subValue.key | keyToLabel }}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{ subValue.id | keyToLabel }}</span>\n                  <he-node-link\n                    *ngSwitchDefault\n                    class=\"is-block pl-4\"\n                    [node]=\"termById(subValue.id)\"\n                    [attr.title]=\"termById(subValue.id).name\">\n                    <span [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend = !showLegend\">\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{ logColor[status.value] }}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{ status.value }}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input\n            type=\"checkbox\"\n            class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\" />\n          <span class=\"ml-2\">\n            Show only {{ filteredType | pluralize }} included in the default Hestia system boundary\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount\">\n      <span>Not in Hestia system boundary</span>\n    </td>\n  </ng-template>\n\n  <ng-container *ngIf=\"isSystemBoundary(data); else noValue\">\n    <td class=\"blank-node-index-{{ i }}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n      <ng-container *ngIf=\"getModelsAt(data, i); let models; else: noValue\">\n        <ng-template #modelSerie>\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\"></ng-container>\n        </ng-template>\n        <div *ngIf=\"models | isArray; else modelSerie\">\n          <p *ngFor=\"let model of models\">\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\"></ng-container>\n          </p>\n        </div>\n      </ng-container>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    [autoClose]=\"'outside'\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">\n      [{{ model.logs?.methodTier || model.model?.methodTier }}]\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\"\n      [autoClose]=\"'outside'\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"left\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (\n      <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\"></ng-container>\n      )\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <div class=\"table-container\" *bindOnce=\"logs\">\n    <table class=\"table is-dark is-fullwidth\">\n      <tbody>\n        <ng-container *ngIf=\"logs?.requirements\">\n          <ng-container *ngFor=\"let key of requirementKeys(logs.requirements)\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: { key, value: logs.requirements[key] }\"></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"logs?.logs\">\n          <ng-container *ngFor=\"let key of logs.logs | keys\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: key\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n\n  <ng-container *bindOnce=\"logs\">\n    <div class=\"it-mt-2\" *ngIf=\"logs?.missingLookups?.length\">\n      <p>Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-dark is-fullwidth is-striped\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">\n                <span>Filename</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Column Title</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{ data.filename }}</td>\n              <td>{{ data.column }}</td>\n              <td>{{ data.termId }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{ value }}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else: defaultValue\">\n    <he-node-link\n      class=\"is-inline-block is-align-middle\"\n      linkClass=\"is-dark\"\n      [node]=\"linkedNode\"\n      [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <tr>\n    <td class=\"has-border-right copy-log\">\n      <span class=\"is-inline-block is-align-middle\">\n        <ng-template #defaultMessage>\n          <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchDefault>{{ key | keyToLabel }}</ng-container>\n\n            <ng-container *ngSwitchCase=\"'property_id'\">Property Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'product_id'\">Product Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'input_id'\">Input Term @id</ng-container>\n\n            <ng-container *ngSwitchCase=\"'node_type_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">Node</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'siteType_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">siteType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_id_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_termType_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_id_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_termType_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <!-- Deprecated -->\n            <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n            <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n            <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n            <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">\n              <span>Cycle contains</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">\n              <span>All</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs have a lookup value</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\">\n              <code class=\"is-mr-1\">aboveGroundCropResidueBurnt</code>\n              <span>is present as Product</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"parseLogCompleteness(key); let completeness; else: defaultMessage\">\n          <span>Data completeness for</span>\n          <code class=\"is-mx-1\">{{ completeness.key }}</code>\n          <span>must be</span>\n          <code class=\"is-mx-1\">{{ completeness.value }}</code>\n        </ng-container>\n      </span>\n      <he-clipboard\n        class=\"is-inline-block is-align-middle\"\n        clipboardClass=\"is-size-7 is-p-1\"\n        [icon]=\"['far', 'clone']\"\n        [value]=\"key\"\n        [hideText]=\"true\"></he-clipboard>\n    </td>\n    <td>\n      <ng-template #singleValue>\n        <ng-container *ngTemplateOutlet=\"logLineValue; context: { key, value }\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"logValueArray(value); let valueArray; else: singleValue\">\n        <table class=\"table is-dark is-bordered is-striped\">\n          <thead *ngIf=\"valueArray[0] | isObject\">\n            <tr>\n              <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{ v.key }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let v of valueArray\">\n              <ng-template #singleArrayValue>\n                <td>{{ v }}</td>\n              </ng-template>\n              <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n                <td *ngFor=\"let vv of v | keys\">{{ vv.value }}</td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{ model.status }}</span>\n    </div>\n\n    <ng-container *ngIf=\"model.status === LogStatus.notRequired && model.logs?.is_not_relevant === 'True'\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <li *ngIf=\"model.logs.logs?.siteType_allowed === 'False'\">\n          The\n          <code class=\"is-mx-1\">site.siteType</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_id_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Product</code>\n          <code class=\"is-mr-1\">term.@id</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_termType_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Product</code>\n          <code class=\"is-mr-1\">term.termType</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.input_id_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Input</code>\n          <code class=\"is-mr-1\">term.@id</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.input_termType_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Input</code>\n          <code class=\"is-mr-1\">term.termType</code>\n          is relevant.\n        </li>\n      </ul>\n    </ng-container>\n\n    <ng-container\n      *ngIf=\"model.logs && model.status !== LogStatus.notRequired && model.status !== LogStatus.skipHierarchy\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <ng-template #showRunOrchestrator>\n          <li class=\"is-run-orchestrator\">\n            <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n            <ng-container *ngIf=\"!model.logs?.shouldRun\">\n              <p>Some of the requirements were not met to run the model.</p>\n              <p>You can click on the model name on the left to view the debugging logs.</p>\n            </ng-container>\n            <ng-container *ngIf=\"model.logs?.logs?.error\">\n              <p>The model failed to run for the following reason:</p>\n              <p>\n                <code>{{ model.logs.logs.error }}</code>\n              </p>\n            </ng-container>\n          </li>\n        </ng-template>\n\n        <li\n          class=\"is-no-run-orchestrator\"\n          *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n          <ng-container *ngIf=\"!model.logs.runRequired\">\n            <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n              This model should not run for {{ nodeType | pluralize: 0 }}\n            </span>\n          </ng-container>\n\n          <ng-template #runNoConfig>\n            <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n              The {{ data.type || 'blank node' }} with Term\n              <code class=\"is-mx-1\">{{ data.termId }}</code>\n              is already present or already added by another model.\n            </span>\n          </ng-template>\n\n          <ng-container *ngIf=\"model.config; else runNoConfig\">\n            <p class=\"is-run-strategy-{{ model.config.runStrategy }}\" [ngSwitch]=\"model.config.runStrategy\">\n              <span *ngSwitchCase=\"'always'\"></span>\n              <span *ngSwitchCase=\"'add_key_if_missing'\">We only gap-fill this key if not present</span>\n              <span *ngSwitchCase=\"'add_blank_node_if_missing'\">We only gap-fill this Blank Node if not present.</span>\n            </p>\n\n            <p class=\"is-mt-1\">\n              <span\n                class=\"is-run-with-measured\"\n                *ngIf=\"\n                  model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\n                \">\n                The\n                <code class=\"is-mx-1\">{{ model.config.value }}</code>\n                was reported as measured.\n              </span>\n            </p>\n          </ng-container>\n        </li>\n\n        <li *ngIf=\"model.logs?.replaceLowerTier !== undefined\">\n          <span>\n            The recalculated\n            <b>methodTier</b>\n            was\n          </span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"!model.logs.replaceLowerTier\">lower than</span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"model.logs.replaceLowerTier\">higher than or equal to</span>\n          <span class=\"is-pl-1\">\n            the original\n            <b>methodTier</b>\n            .\n          </span>\n        </li>\n\n        <li class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.replaceLowerTier\">\n          <span>The recalculated</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}</b>\n          <span class=\"is-pl-1\">was</span>\n          <span class=\"is-pl-1\">\n            <ng-container *ngIf=\"model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">less than</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">more than or equal to</span>\n              <b class=\"is-pl-1\">{{ model.config.mergeArgs.replaceThreshold[1] * 100 }}%</b>\n            </ng-container>\n            <ng-container *ngIf=\"!model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">not sufficiently</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">sufficiently</span>\n            </ng-container>\n          </span>\n          <span class=\"is-pl-1\">different from the original</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}.</b>\n        </li>\n      </ul>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep .table td he-node-link{width:150px}}::ng-deep .table td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep .table td .open-node+he-node-link{width:130px}}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:12px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}::ng-deep .copy-log he-clipboard{visibility:hidden}::ng-deep .copy-log:hover he-clipboard{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["value", "disabled", "hideText", "icon", "size", "rotate", "clipboardClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: IsObjectPipe, name: "isObject" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\" *ngIf=\"allTerms?.length\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"filterResults()\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term\" (click)=\"term = ''; filterResults()\">\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th *ngIf=\"isBlankNodes\">\n            <span class=\"is-pr-1\">Units</span>\n            <span>(per&nbsp;</span>\n            <span [ngSwitch]=\"functionalUnit\">\n              <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">hectare</ng-container>\n              <ng-container *ngSwitchDefault>kg product</ng-container>\n            </span>\n            <span>)</span>\n          </th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th *ngIf=\"isBlankNodes\">Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{ i + 1 }})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>{{ noDataMessage || 'No data' }}</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"blankNode.term?.name || blankNode.key\">\n              <a\n                class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\">\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block is-pre-wrap\" *ngIf=\"blankNode.term\" [node]=\"blankNode.term\">\n                <span [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n              <span *ngIf=\"blankNode.key\">{{ blankNode.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{ blankNode.originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  {{ blankNode.originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                </div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">\n                    {{ blankNode.recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\" class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta\n                  *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta\n                    *ngIf=\"\n                      blankNode.originalValueByMethodId[model.methodId] !== null &&\n                        blankNode.recalculatedValueByMethodId[model.methodId] !== null;\n                      else noValue\n                    \"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a\n                class=\"is-inline-block is-pre-wrap\"\n                *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\"\n                target=\"_blank\"\n                [title]=\"subValue.key\">\n                <span>{{ subValue.key }}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{ subValue.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{ subValue.key | keyToLabel }}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{ subValue.id | keyToLabel }}</span>\n                  <he-node-link\n                    *ngSwitchDefault\n                    class=\"is-block pl-4\"\n                    [node]=\"termById(subValue.id)\"\n                    [attr.title]=\"termById(subValue.id).name\">\n                    <span [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend = !showLegend\">\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{ logColor[status.value] }}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{ status.value }}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input\n            type=\"checkbox\"\n            class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\" />\n          <span class=\"ml-2\">\n            Show only {{ filteredType | pluralize }} included in the default Hestia system boundary\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount\">\n      <span>Not in Hestia system boundary</span>\n    </td>\n  </ng-template>\n\n  <ng-container *ngIf=\"isSystemBoundary(data); else noValue\">\n    <td class=\"blank-node-index-{{ i }}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n      <ng-container *ngIf=\"getModelsAt(data, i); let models; else: noValue\">\n        <ng-template #modelSerie>\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\"></ng-container>\n        </ng-template>\n        <div *ngIf=\"models | isArray; else modelSerie\">\n          <p *ngFor=\"let model of models\">\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\"></ng-container>\n          </p>\n        </div>\n      </ng-container>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    [autoClose]=\"'outside'\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">\n      [{{ model.logs?.methodTier || model.model?.methodTier }}]\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\"\n      [autoClose]=\"'outside'\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"left\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (\n      <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\"></ng-container>\n      )\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <div class=\"table-container\" *bindOnce=\"logs\">\n    <table class=\"table is-dark is-fullwidth\">\n      <tbody>\n        <ng-container *ngIf=\"logs?.requirements\">\n          <ng-container *ngFor=\"let key of requirementKeys(logs.requirements)\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: { key, value: logs.requirements[key] }\"></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"logs?.logs\">\n          <ng-container *ngFor=\"let key of logs.logs | keys\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: key\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n\n  <ng-container *bindOnce=\"logs\">\n    <div class=\"it-mt-2\" *ngIf=\"logs?.missingLookups?.length\">\n      <p>Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-dark is-fullwidth is-striped\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">\n                <span>Filename</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Column Title</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{ data.filename }}</td>\n              <td>{{ data.column }}</td>\n              <td>{{ data.termId }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{ value }}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else: defaultValue\">\n    <he-node-link\n      class=\"is-inline-block is-align-middle\"\n      linkClass=\"is-dark\"\n      [node]=\"linkedNode\"\n      [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <tr>\n    <td class=\"has-border-right copy-log\">\n      <span class=\"is-inline-block is-align-middle\">\n        <ng-template #defaultMessage>\n          <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchDefault>{{ key | keyToLabel }}</ng-container>\n\n            <ng-container *ngSwitchCase=\"'property_id'\">Property Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'product_id'\">Product Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'input_id'\">Input Term @id</ng-container>\n\n            <ng-container *ngSwitchCase=\"'node_type_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">Node</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'siteType_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">siteType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_id_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_termType_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_id_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_termType_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <!-- Deprecated -->\n            <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n            <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n            <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n            <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">\n              <span>Cycle contains</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">\n              <span>All</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs have a lookup value</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\">\n              <code class=\"is-mr-1\">aboveGroundCropResidueBurnt</code>\n              <span>is present as Product</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"parseLogCompleteness(key); let completeness; else: defaultMessage\">\n          <span>Data completeness for</span>\n          <code class=\"is-mx-1\">{{ completeness.key }}</code>\n          <span>must be</span>\n          <code class=\"is-mx-1\">{{ completeness.value }}</code>\n        </ng-container>\n      </span>\n      <he-clipboard\n        class=\"is-inline-block is-align-middle\"\n        clipboardClass=\"is-size-7 is-p-1\"\n        [icon]=\"['far', 'clone']\"\n        [value]=\"key\"\n        [hideText]=\"true\"></he-clipboard>\n    </td>\n    <td>\n      <ng-template #singleValue>\n        <ng-container *ngTemplateOutlet=\"logLineValue; context: { key, value }\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"logValueArray(value); let valueArray; else: singleValue\">\n        <table class=\"table is-dark is-bordered is-striped\">\n          <thead *ngIf=\"valueArray[0] | isObject\">\n            <tr>\n              <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{ v.key }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let v of valueArray\">\n              <ng-template #singleArrayValue>\n                <td>{{ v }}</td>\n              </ng-template>\n              <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n                <td *ngFor=\"let vv of v | keys\">{{ vv.value }}</td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{ model.status }}</span>\n    </div>\n\n    <ng-container *ngIf=\"model.status === LogStatus.notRequired && model.logs?.is_not_relevant === 'True'\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <li *ngIf=\"model.logs.logs?.siteType_allowed === 'False'\">\n          The\n          <code>siteType</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_id_allowed === 'False'\">\n          The primary product\n          <code>@id</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_termType_allowed === 'False'\">\n          The primary product\n          <code>termType</code>\n          is not relevant.\n        </li>\n      </ul>\n    </ng-container>\n\n    <ng-container\n      *ngIf=\"model.logs && model.status !== LogStatus.notRequired && model.status !== LogStatus.skipHierarchy\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <ng-template #showRunOrchestrator>\n          <li class=\"is-run-orchestrator\">\n            <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n            <ng-container *ngIf=\"!model.logs?.shouldRun\">\n              <p>Some of the requirements were not met to run the model.</p>\n              <p>You can click on the model name on the left to view the debugging logs.</p>\n            </ng-container>\n            <ng-container *ngIf=\"model.logs?.logs?.error\">\n              <p>The model failed to run for the following reason:</p>\n              <p>\n                <code>{{ model.logs.logs.error }}</code>\n              </p>\n            </ng-container>\n          </li>\n        </ng-template>\n\n        <li\n          class=\"is-no-run-orchestrator\"\n          *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n          <ng-container *ngIf=\"!model.logs.runRequired\">\n            <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n              This model should not run for {{ nodeType | pluralize: 0 }}\n            </span>\n          </ng-container>\n\n          <ng-template #runNoConfig>\n            <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n              The {{ data.type || 'blank node' }} with Term\n              <code>{{ data.termId }}</code>\n              is already present or already added by another model.\n            </span>\n          </ng-template>\n\n          <ng-container *ngIf=\"model.config; else runNoConfig\">\n            <p class=\"is-run-strategy-{{ model.config.runStrategy }}\" [ngSwitch]=\"model.config.runStrategy\">\n              <span *ngSwitchCase=\"'always'\"></span>\n              <span *ngSwitchCase=\"'add_key_if_missing'\">We only gap-fill this key if not present</span>\n              <span *ngSwitchCase=\"'add_blank_node_if_missing'\">We only gap-fill this Blank Node if not present.</span>\n            </p>\n\n            <p class=\"is-mt-1\">\n              <span\n                class=\"is-run-with-measured\"\n                *ngIf=\"\n                  model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\n                \">\n                The\n                <code>{{ model.config.value }}</code>\n                was reported as measured.\n              </span>\n            </p>\n          </ng-container>\n        </li>\n\n        <li *ngIf=\"model.logs?.replaceLowerTier !== undefined\">\n          <span>\n            The recalculated\n            <b>methodTier</b>\n            was\n          </span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"!model.logs.replaceLowerTier\">lower than</span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"model.logs.replaceLowerTier\">higher than or equal to</span>\n          <span class=\"is-pl-1\">\n            the original\n            <b>methodTier</b>\n            .\n          </span>\n        </li>\n\n        <li class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.replaceLowerTier\">\n          <span>The recalculated</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}</b>\n          <span class=\"is-pl-1\">was</span>\n          <span class=\"is-pl-1\">\n            <ng-container *ngIf=\"model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">less than</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">more than or equal to</span>\n              <b class=\"is-pl-1\">{{ model.config.mergeArgs.replaceThreshold[1] * 100 }}%</b>\n            </ng-container>\n            <ng-container *ngIf=\"!model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">not sufficiently</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">sufficiently</span>\n            </ng-container>\n          </span>\n          <span class=\"is-pl-1\">different from the original</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}.</b>\n        </li>\n      </ul>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep .table td he-node-link{width:150px}}::ng-deep .table td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep .table td .open-node+he-node-link{width:130px}}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:12px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}::ng-deep .copy-log he-clipboard{visibility:hidden}::ng-deep .copy-log:hover he-clipboard{visibility:visible}\n"] }]
+            args: [{ selector: 'he-node-logs-models', template: "<div class=\"px-3 pb-3\">\n  <div class=\"has-text-right mb-2\" *ngIf=\"!isExternal\">\n    <a class=\"is-size-7\" *ngIf=\"logsUrl\" [href]=\"logsUrl\" target=\"_blank\">\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n      <span class=\"pl-2\">Open Full Logs</span>\n    </a>\n  </div>\n\n  <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n    <table class=\"table is-fullwidth is-narrow is-striped\">\n      <thead>\n        <tr>\n          <th class=\"width-auto has-border-right\">\n            <div class=\"field\" *ngIf=\"allTerms?.length\">\n              <div class=\"control is-expanded has-icons-right\">\n                <input\n                  class=\"input search-input is-small\"\n                  [(ngModel)]=\"term\"\n                  name=\"term\"\n                  placeholder=\"Select entry by name\"\n                  [ngbTypeahead]=\"suggestTerm\"\n                  [focusFirst]=\"true\"\n                  (focus)=\"typeaheadFocus($event)\"\n                  (selectItem)=\"filterResults()\" />\n                <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term\" (click)=\"term = ''; filterResults()\">\n                  <fa-icon icon=\"times\"></fa-icon>\n                </a>\n              </div>\n            </div>\n          </th>\n          <th *ngIf=\"isBlankNodes\">\n            <span class=\"is-pr-1\">Units</span>\n            <span>(per&nbsp;</span>\n            <span [ngSwitch]=\"functionalUnit\">\n              <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">hectare</ng-container>\n              <ng-container *ngSwitchDefault>kg product</ng-container>\n            </span>\n            <span>)</span>\n          </th>\n          <th>Original</th>\n          <th>Recalculated</th>\n          <th *ngIf=\"isBlankNodes\">Difference</th>\n          <th *ngFor=\"let c of methodModelsCount | times; let i = index\">({{ i + 1 }})</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngIf=\"loading\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <div class=\"has-text-center py-3\">\n              <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"!loading && blankNodes.length === 0\">\n          <td class=\"has-text-centered\" colspan=\"6\">\n            <span>{{ noDataMessage || 'No data' }}</span>\n          </td>\n        </tr>\n        <ng-container *ngFor=\"let blankNode of blankNodes; trackBy: trackByBlankNode\">\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\" [attr.title]=\"blankNode.term?.name || blankNode.key\">\n              <a\n                class=\"is-inline-block is-align-top pr-2 open-node\"\n                (click)=\"blankNode.isOpen = !blankNode.isOpen\"\n                *ngIf=\"blankNode.canOpen\">\n                <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!blankNode.isOpen\"></fa-icon>\n                <fa-icon icon=\"angle-right\" [class.is-hidden]=\"blankNode.isOpen\"></fa-icon>\n              </a>\n              <he-node-link class=\"is-inline-block is-pre-wrap\" *ngIf=\"blankNode.term\" [node]=\"blankNode.term\">\n                <span [innerHtml]=\"blankNode.term.name | compound\"></span>\n              </he-node-link>\n              <span *ngIf=\"blankNode.key\">{{ blankNode.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <ng-template #defaultOriginalValue>\n                <span>{{ blankNode.originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultOriginalValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  {{ blankNode.originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                </div>\n              </ng-container>\n            </td>\n            <td>\n              <ng-container *ngIf=\"!blankNode.isOriginal || blankNode.isRecalculated; else notRecalculated\">\n                <ng-template #defaultRecalculatedValue>\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                </ng-template>\n                <ng-container *ngIf=\"blankNode.allParallel; else defaultRecalculatedValue\">\n                  <div *ngFor=\"let model of blankNode.configModels[0]\">\n                    {{ blankNode.recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\" class=\"is-nowrap\">\n              <ng-template #defaultDeltaValue>\n                <he-blank-node-value-delta\n                  *ngIf=\"blankNode.original.length && blankNode.isRecalculated; else noValue\"\n                  [value]=\"blankNode.recalculatedValue\"\n                  [originalValue]=\"blankNode.originalValue\"></he-blank-node-value-delta>\n              </ng-template>\n              <ng-container *ngIf=\"blankNode.allParallel; else defaultDeltaValue\">\n                <div *ngFor=\"let model of blankNode.configModels[0]\">\n                  <he-blank-node-value-delta\n                    *ngIf=\"\n                      blankNode.originalValueByMethodId[model.methodId] !== null &&\n                        blankNode.recalculatedValueByMethodId[model.methodId] !== null;\n                      else noValue\n                    \"\n                    [value]=\"blankNode.recalculatedValueByMethodId[model.methodId]\"\n                    [originalValue]=\"blankNode.originalValueByMethodId[model.methodId]\"></he-blank-node-value-delta>\n                </div>\n              </ng-container>\n            </td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.keys\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.has-sub-rows]=\"blankNode.subValues?.length\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right is-nowrap\">\n              <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n\n              <a\n                class=\"is-inline-block is-pre-wrap\"\n                *ngIf=\"blankNode.type\"\n                [href]=\"baseUrl + '/schema/' + blankNode.type + '#' + subValue.key\"\n                target=\"_blank\"\n                [title]=\"subValue.key\">\n                <span>{{ subValue.key }}</span>\n              </a>\n              <span class=\"is-inline-block is-align-top\" *ngIf=\"!blankNode.type\">{{ subValue.key }}</span>\n            </td>\n            <td *ngIf=\"isBlankNodes\"></td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated || subValue.key === 'impactAssessment'; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n\n          <tr\n            *ngFor=\"let subValue of blankNode.subValues\"\n            [class.is-hidden]=\"!blankNode.isOpen\"\n            [class.is-sub-row]=\"blankNode.canOpen\">\n            <td class=\"width-auto has-border-right\">\n              <span class=\"is-inline-block is-align-top pl-3\">{{ subValue.key | keyToLabel }}</span>\n\n              <ng-container *ngIf=\"subValue.id\">\n                <span class=\"is-inline-block\" class=\"is-inline-block is-align-top pr-1\">:</span>\n\n                <ng-container [ngSwitch]=\"subValue.key\">\n                  <span class=\"is-inline-block\" *ngSwitchCase=\"'backgroundData'\">{{ subValue.id | keyToLabel }}</span>\n                  <he-node-link\n                    *ngSwitchDefault\n                    class=\"is-block pl-4\"\n                    [node]=\"termById(subValue.id)\"\n                    [attr.title]=\"termById(subValue.id).name\">\n                    <span [innerHtml]=\"termById(subValue.id).name | compound\"></span>\n                  </he-node-link>\n                </ng-container>\n              </ng-container>\n            </td>\n            <td *ngIf=\"isBlankNodes\">\n              <span class=\"is-nowrap\" *ngIf=\"subValue.showUnits\" [innerHtml]=\"blankNode.term?.units | compound\"></span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.originalValue !== null; else noValue\">\n                {{ subValue.originalValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td>\n              <span *ngIf=\"subValue.isRecalculated; else notRecalculated\">\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </td>\n            <td *ngIf=\"isBlankNodes\">-</td>\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </he-data-table>\n\n  <div class=\"is-size-7 is-italic\">\n    <div class=\"columns is-variable is-1 my-0\">\n      <div class=\"column is-narrow\">\n        <p>\n          <a class=\"is-inline-block pr-2\" (click)=\"showLegend = !showLegend\">\n            <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!showLegend\"></fa-icon>\n            <fa-icon icon=\"angle-right\" [class.is-hidden]=\"showLegend\"></fa-icon>\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        <ul class=\"content pl-2\" [class.is-hidden]=\"!showLegend\">\n          <ng-container *ngFor=\"let status of LogStatus | keys\">\n            <li *ngIf=\"logIcon[status.value]\" class=\"has-text-{{ logColor[status.value] }}\">\n              <fa-icon [icon]=\"logIcon[status.value]\"></fa-icon>\n              <span class=\"pl-1\">{{ status.value }}</span>\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"column has-text-right\" *ngIf=\"filteredType\">\n        <label class=\"is-inline-block checkbox\">\n          <input\n            type=\"checkbox\"\n            class=\"selector\"\n            [(ngModel)]=\"onlyRequired\"\n            (change)=\"filterResults()\"\n            [disabled]=\"!!term\" />\n          <span class=\"ml-2\">\n            Show only {{ filteredType | pluralize }} included in the default Hestia system boundary\n          </span>\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #blankNodeModels let-data=\"data\">\n  <ng-template #notInSystemBoundary>\n    <td [attr.colspan]=\"methodModelsCount\">\n      <span>Not in Hestia system boundary</span>\n    </td>\n  </ng-template>\n\n  <ng-container *ngIf=\"isSystemBoundary(data); else noValue\">\n    <td class=\"blank-node-index-{{ i }}\" *ngFor=\"let c of methodModelsCount | times; let i = index\">\n      <ng-container *ngIf=\"getModelsAt(data, i); let models; else: noValue\">\n        <ng-template #modelSerie>\n          <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\"></ng-container>\n        </ng-template>\n        <div *ngIf=\"models | isArray; else modelSerie\">\n          <p *ngFor=\"let model of models\">\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\"></ng-container>\n          </p>\n        </div>\n      </ng-container>\n    </td>\n  </ng-container>\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n  <span\n    class=\"is-nowrap\"\n    [class.trigger-popover]=\"model.showLogs\"\n    [ngbPopover]=\"logDetails\"\n    [autoClose]=\"'outside'\"\n    popoverClass=\"is-narrow\"\n    triggers=\"manual\"\n    #p=\"ngbPopover\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n    <span class=\"pl-1\" *ngIf=\"model.logs?.methodTier || model.model?.methodTier\">\n      [{{ model.logs?.methodTier || model.model?.methodTier }}]\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }} trigger-popover\"\n      [ngbPopover]=\"logStatusDetails\"\n      [autoClose]=\"'outside'\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"left\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <fa-icon [icon]=\"logIcon[model.status]\"></fa-icon>\n    </span>\n\n    <span class=\"pl-1\" *ngIf=\"model.model\">\n      (\n      <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\"></ng-container>\n      )\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #noValue>-</ng-template>\n\n<ng-template #notRecalculated>not recalculated</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <div class=\"table-container\" *bindOnce=\"logs\">\n    <table class=\"table is-dark is-fullwidth\">\n      <tbody>\n        <ng-container *ngIf=\"logs?.requirements\">\n          <ng-container *ngFor=\"let key of requirementKeys(logs.requirements)\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: { key, value: logs.requirements[key] }\"></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"logs?.logs\">\n          <ng-container *ngFor=\"let key of logs.logs | keys\">\n            <ng-container *ngTemplateOutlet=\"logLine; context: key\"></ng-container>\n          </ng-container>\n        </ng-container>\n      </tbody>\n    </table>\n  </div>\n\n  <ng-container *bindOnce=\"logs\">\n    <div class=\"it-mt-2\" *ngIf=\"logs?.missingLookups?.length\">\n      <p>Optional data missing:</p>\n\n      <div class=\"table-container data-table-container\">\n        <table class=\"table is-dark is-fullwidth is-striped\">\n          <thead>\n            <tr>\n              <th class=\"has-text-white\">\n                <span>Filename</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Column Title</span>\n              </th>\n              <th class=\"has-text-white\">\n                <span>Row (term.id)</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"has-text-white\">\n            <tr *ngFor=\"let data of logs.missingLookups\">\n              <td>{{ data.filename }}</td>\n              <td>{{ data.column }}</td>\n              <td>{{ data.termId }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLineValue let-key=\"key\" let-value=\"value\">\n  <ng-template #defaultValue>\n    <span class=\"is-inline-block is-align-middle\">{{ value }}</span>\n  </ng-template>\n  <ng-container *ngIf=\"requirementLinkedNode(key, value); let linkedNode; else: defaultValue\">\n    <he-node-link\n      class=\"is-inline-block is-align-middle\"\n      linkClass=\"is-dark\"\n      [node]=\"linkedNode\"\n      [showExternalLink]=\"true\"></he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #logLine let-key=\"key\" let-value=\"value\">\n  <tr>\n    <td class=\"has-border-right copy-log\">\n      <span class=\"is-inline-block is-align-middle\">\n        <ng-template #defaultMessage>\n          <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchDefault>{{ key | keyToLabel }}</ng-container>\n\n            <ng-container *ngSwitchCase=\"'property_id'\">Property Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'product_id'\">Product Term @id</ng-container>\n            <ng-container *ngSwitchCase=\"'input_id'\">Input Term @id</ng-container>\n\n            <ng-container *ngSwitchCase=\"'node_type_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">Node</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'siteType_allowed'\">\n              <span>Is the current</span>\n              <code class=\"is-mx-1\">siteType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_id_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'product_termType_allowed'\">\n              <span>Are any of the Product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_id_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'input_termType_allowed'\">\n              <span>Are any of the Input</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <!-- Deprecated -->\n            <ng-container *ngSwitchCase=\"'primary_product_id_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">@id</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'primary_product_termType_allowed'\">\n              <span>Is the current primary product</span>\n              <code class=\"is-mx-1\">termType</code>\n              <span>allowed to run this model</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'contains_geospatial_data'\">\n              Has geospatial data necessary to run this model\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'current_size'\">Current polygon area</ng-container>\n            <ng-container *ngSwitchCase=\"'max_area_size'\">Maximum polygon area to run this model</ng-container>\n            <ng-container *ngSwitchCase=\"'below_max_area_size'\">Polygon below the maximum area</ng-container>\n            <ng-container *ngSwitchCase=\"'region_factor'\">Factor from region lookup</ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_pesticides_inputs'\">\n              <span>Cycle contains</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'all_pesticideAI_have_lookup_value'\">\n              <span>All</span>\n              <code class=\"is-mx-1\">pesticideAI</code>\n              <span>Inputs have a lookup value</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'has_crop_residue_burnt'\">\n              <code class=\"is-mr-1\">aboveGroundCropResidueBurnt</code>\n              <span>is present as Product</span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'liquid_slurry_sludge_P'\">Liquid, Slurry, and Sludge P</ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"parseLogCompleteness(key); let completeness; else: defaultMessage\">\n          <span>Data completeness for</span>\n          <code class=\"is-mx-1\">{{ completeness.key }}</code>\n          <span>must be</span>\n          <code class=\"is-mx-1\">{{ completeness.value }}</code>\n        </ng-container>\n      </span>\n      <he-clipboard\n        class=\"is-inline-block is-align-middle\"\n        clipboardClass=\"is-size-7 is-p-1\"\n        [icon]=\"['far', 'clone']\"\n        [value]=\"key\"\n        [hideText]=\"true\"></he-clipboard>\n    </td>\n    <td>\n      <ng-template #singleValue>\n        <ng-container *ngTemplateOutlet=\"logLineValue; context: { key, value }\"></ng-container>\n      </ng-template>\n      <div *ngIf=\"logValueArray(value); let valueArray; else: singleValue\">\n        <table class=\"table is-dark is-bordered is-striped\">\n          <thead *ngIf=\"valueArray[0] | isObject\">\n            <tr>\n              <th class=\"has-text-white\" *ngFor=\"let v of valueArray[0] | keys\">{{ v.key }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let v of valueArray\">\n              <ng-template #singleArrayValue>\n                <td>{{ v }}</td>\n              </ng-template>\n              <ng-container *ngIf=\"v | isObject; else singleArrayValue\">\n                <td *ngFor=\"let vv of v | keys\">{{ vv.value }}</td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <ng-container *bindOnce=\"model\">\n    <div class=\"is-mb-2\">\n      <span>Status:</span>\n      <span class=\"is-pl-1\">{{ model.status }}</span>\n    </div>\n\n    <ng-container *ngIf=\"model.status === LogStatus.notRequired && model.logs?.is_not_relevant === 'True'\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <li *ngIf=\"model.logs.logs?.siteType_allowed === 'False'\">\n          The\n          <code class=\"is-mx-1\">site.siteType</code>\n          is not relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_id_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Product</code>\n          <code class=\"is-mr-1\">term.@id</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.product_termType_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Product</code>\n          <code class=\"is-mr-1\">term.termType</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.input_id_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Input</code>\n          <code class=\"is-mr-1\">term.@id</code>\n          is relevant.\n        </li>\n        <li *ngIf=\"model.logs.logs?.input_termType_allowed === 'False'\">\n          None of the\n          <code class=\"is-mx-1\">Input</code>\n          <code class=\"is-mr-1\">term.termType</code>\n          is relevant.\n        </li>\n      </ul>\n    </ng-container>\n\n    <ng-container\n      *ngIf=\"model.logs && model.status !== LogStatus.notRequired && model.status !== LogStatus.skipHierarchy\">\n      <ul class=\"is-pl-3 is-list-style-disc\">\n        <ng-template #showRunOrchestrator>\n          <li class=\"is-run-orchestrator\">\n            <p *ngIf=\"model.logs?.shouldRun\">All the requirements were met to run the model.</p>\n            <ng-container *ngIf=\"!model.logs?.shouldRun\">\n              <p>Some of the requirements were not met to run the model.</p>\n              <p>You can click on the model name on the left to view the debugging logs.</p>\n            </ng-container>\n            <ng-container *ngIf=\"model.logs?.logs?.error\">\n              <p>The model failed to run for the following reason:</p>\n              <p>\n                <code>{{ model.logs.logs.error }}</code>\n              </p>\n            </ng-container>\n          </li>\n        </ng-template>\n\n        <li\n          class=\"is-no-run-orchestrator\"\n          *ngIf=\"model.logs?.shouldRunOrchestrator === false; else showRunOrchestrator\">\n          <ng-container *ngIf=\"!model.logs.runRequired\">\n            <span class=\"is-run-node-type-not-allowed\" *ngIf=\"model.logs.logs?.node_type_allowed === 'False'\">\n              This model should not run for {{ nodeType | pluralize: 0 }}\n            </span>\n          </ng-container>\n\n          <ng-template #runNoConfig>\n            <span class=\"is-run-not-empty\" *ngIf=\"model.logs.logs?.is_empty === 'False'\">\n              The {{ data.type || 'blank node' }} with Term\n              <code class=\"is-mx-1\">{{ data.termId }}</code>\n              is already present or already added by another model.\n            </span>\n          </ng-template>\n\n          <ng-container *ngIf=\"model.config; else runNoConfig\">\n            <p class=\"is-run-strategy-{{ model.config.runStrategy }}\" [ngSwitch]=\"model.config.runStrategy\">\n              <span *ngSwitchCase=\"'always'\"></span>\n              <span *ngSwitchCase=\"'add_key_if_missing'\">We only gap-fill this key if not present</span>\n              <span *ngSwitchCase=\"'add_blank_node_if_missing'\">We only gap-fill this Blank Node if not present.</span>\n            </p>\n\n            <p class=\"is-mt-1\">\n              <span\n                class=\"is-run-with-measured\"\n                *ngIf=\"\n                  model.config.runArgs?.runNonMeasured && hasMethodTier(data.original, EmissionMethodTier.measured)\n                \">\n                The\n                <code class=\"is-mx-1\">{{ model.config.value }}</code>\n                was reported as measured.\n              </span>\n            </p>\n          </ng-container>\n        </li>\n\n        <li *ngIf=\"model.logs?.replaceLowerTier !== undefined\">\n          <span>\n            The recalculated\n            <b>methodTier</b>\n            was\n          </span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"!model.logs.replaceLowerTier\">lower than</span>\n          <span class=\"is-pl-1 is-underlined\" *ngIf=\"model.logs.replaceLowerTier\">higher than or equal to</span>\n          <span class=\"is-pl-1\">\n            the original\n            <b>methodTier</b>\n            .\n          </span>\n        </li>\n\n        <li class=\"is-merge-replaceLowerTier\" *ngIf=\"model.logs.replaceLowerTier\">\n          <span>The recalculated</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}</b>\n          <span class=\"is-pl-1\">was</span>\n          <span class=\"is-pl-1\">\n            <ng-container *ngIf=\"model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">less than</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">more than or equal to</span>\n              <b class=\"is-pl-1\">{{ model.config.mergeArgs.replaceThreshold[1] * 100 }}%</b>\n            </ng-container>\n            <ng-container *ngIf=\"!model.config?.mergeArgs\">\n              <span class=\"is-underlined\" *ngIf=\"!model.logs.replaceThreshold\">not sufficiently</span>\n              <span class=\"is-underlined\" *ngIf=\"model.logs.replaceThreshold\">sufficiently</span>\n            </ng-container>\n          </span>\n          <span class=\"is-pl-1\">different from the original</span>\n          <b class=\"is-pl-1\">{{ model.config?.mergeArgs?.replaceThreshold?.[0] || 'value' }}.</b>\n        </li>\n      </ul>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #docsLink let-model>\n  <a [href]=\"model.apiDocsPath || model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span>Docs</span>\n    <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td he-node-link{width:190px}@media screen and (max-width: 768px){::ng-deep .table td he-node-link{width:150px}}::ng-deep .table td .open-node+he-node-link{width:170px}@media screen and (max-width: 768px){::ng-deep .table td .open-node+he-node-link{width:130px}}::ng-deep .table td.has-border-right{box-shadow:1px 0 #6c8093}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#6c809333;height:100%;width:1px;top:0;left:12px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}::ng-deep .copy-log he-clipboard{visibility:hidden}::ng-deep .copy-log:hover he-clipboard{visibility:visible}\n"] }]
         }], ctorParameters: function () { return [{ type: HeNodeService }, { type: HeSearchService }, { type: HeEngineService }]; }, propDecorators: { node: [{
                 type: Input
             }], nodeKey: [{
@@ -6418,7 +6483,7 @@ class NodeMissingLookupFactorsComponent {
         this.ref.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeMissingLookupFactorsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable is-striped mb-0\">\n    <thead>\n      <tr>\n        <th>\n          <span>Filename</span>\n        </th>\n        <th>\n          <span>Column Title</span>\n        </th>\n        <th>\n          <span>Row (term.id)</span>\n        </th>\n        <th>\n          <span>Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{ log.filename }}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{ log.column }}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{ log.termId }}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{ log.model }}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{ log.key }}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{ log.term }}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeMissingLookupFactorsComponent, selector: "he-node-missing-lookup-factors", inputs: { node: "node" }, ngImport: i0, template: "<div *ngIf=\"!loading; else loader\" class=\"table-container data-table-container\">\n  <table class=\"table is-fullwidth is-hoverable is-striped mb-0\">\n    <thead>\n      <tr>\n        <th>\n          <span>Filename</span>\n        </th>\n        <th>\n          <span>Column Title</span>\n        </th>\n        <th>\n          <span>Row (term.id)</span>\n        </th>\n        <th>\n          <span>Model</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngIf=\"!logs.length\">\n        <td colspan=\"3\">\n          <span>No missing lookup factors.</span>\n        </td>\n      </tr>\n      <tr *ngFor=\"let log of logs\">\n        <td>{{ log.filename }}</td>\n        <td>\n          <span *ngIf=\"log.column; else na\">{{ log.column }}</span>\n        </td>\n        <td>\n          <span *ngIf=\"log.termId; else na\">{{ log.termId }}</span>\n        </td>\n        <td>\n          <ng-container *ngIf=\"log.model; else na\">\n            <span>{{ log.model }}</span>\n            <span class=\"pl-1\" *ngIf=\"log.key\">/ {{ log.key }}</span>\n            <span class=\"pl-1\" *ngIf=\"log.term && log.term !== log.termId\">/ {{ log.term }}</span>\n          </ng-container>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #loader>\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #na>\n  <span>-</span>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeMissingLookupFactorsComponent, decorators: [{
             type: Component$1,
@@ -6487,7 +6552,7 @@ class NodeValueDetailsComponent {
         return ['impactAssessment', 'transformation'].includes(key) ? 'N/A (from Cycle)' : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeValueDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: { data: "data", nodeType: "nodeType", dataKey: "dataKey", dataState: "dataState" }, ngImport: i0, template: "<ng-container *bindOnce=\"data\">\n  <ng-container *ngIf=\"showInline; else asTable\">\n    <ng-container *ngFor=\"let key of keys\">\n      <he-link-key-value\n        [node]=\"data!.nodes[0]\"\n        [nodeType]=\"nodeType\"\n        [dataState]=\"dataState\"\n        [dataKey]=\"dataKey\"\n        [key]=\"key\"></he-link-key-value>\n    </ng-container>\n    <ng-container *ngFor=\"let key of additionalKeys\">\n      <he-link-key-value\n        [node]=\"data!.nodes[0]\"\n        [nodeType]=\"nodeType\"\n        [dataState]=\"dataState\"\n        [dataKey]=\"dataKey\"\n        [key]=\"key\"></he-link-key-value>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #asTable>\n  <he-link-key-value\n    [node]=\"data!.nodes[0]\"\n    [nodeType]=\"nodeType\"\n    [dataState]=\"dataState\"\n    [dataKey]=\"dataKey\"\n    key=\"term\"></he-link-key-value>\n\n  <div class=\"table-container mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        <th *ngFor=\"let key of tableKeys\">\n          <a class=\"is-dark\" [href]=\"baseUrl + '/schema/' + type + '#' + key.split('.')[0]\" target=\"_blank\">\n            <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n          </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\n              [node]=\"node\"\n              [nodeType]=\"nodeType\"\n              [dataState]=\"dataState\"\n              [dataKey]=\"dataKey\"\n              [key]=\"key\"\n              [defaultValue]=\"defaultValue(key)\"></he-link-key-value>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataKey", "key", "defaultValue", "dataState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: { data: "data", nodeType: "nodeType", dataKey: "dataKey", dataState: "dataState" }, ngImport: i0, template: "<ng-container *bindOnce=\"data\">\n  <ng-container *ngIf=\"showInline; else asTable\">\n    <ng-container *ngFor=\"let key of keys\">\n      <he-link-key-value\n        [node]=\"data!.nodes[0]\"\n        [nodeType]=\"nodeType\"\n        [dataState]=\"dataState\"\n        [dataKey]=\"dataKey\"\n        [key]=\"key\"></he-link-key-value>\n    </ng-container>\n    <ng-container *ngFor=\"let key of additionalKeys\">\n      <he-link-key-value\n        [node]=\"data!.nodes[0]\"\n        [nodeType]=\"nodeType\"\n        [dataState]=\"dataState\"\n        [dataKey]=\"dataKey\"\n        [key]=\"key\"></he-link-key-value>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #asTable>\n  <he-link-key-value\n    [node]=\"data!.nodes[0]\"\n    [nodeType]=\"nodeType\"\n    [dataState]=\"dataState\"\n    [dataKey]=\"dataKey\"\n    key=\"term\"></he-link-key-value>\n\n  <div class=\"table-container mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        <th *ngFor=\"let key of tableKeys\">\n          <a class=\"is-dark\" [href]=\"baseUrl + '/schema/' + type + '#' + key.split('.')[0]\" target=\"_blank\">\n            <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n          </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\n              [node]=\"node\"\n              [nodeType]=\"nodeType\"\n              [dataState]=\"dataState\"\n              [dataKey]=\"dataKey\"\n              [key]=\"key\"\n              [defaultValue]=\"defaultValue(key)\"></he-link-key-value>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataKey", "key", "defaultValue", "dataState"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeValueDetailsComponent, decorators: [{
             type: Component$1,
@@ -6567,7 +6632,7 @@ class NodeRecommendationsComponent {
         this.recommendations = recommendations;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeRecommendationsComponent, deps: [{ token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: { node: "node", nodeField: "nodeField", buttonClass: "buttonClass" }, outputs: { selectRecommendation: "selectRecommendation" }, usesOnChanges: true, ngImport: i0, 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\n    class=\"button mr-2 mb-2 {{ buttonClass }}\"\n    *ngFor=\"let id of recommendations; trackBy: trackByValue; let i = index\"\n    (click)=\"add(id, i)\">\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: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: { node: "node", nodeField: "nodeField", buttonClass: "buttonClass" }, outputs: { selectRecommendation: "selectRecommendation" }, usesOnChanges: true, ngImport: i0, 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\n    class=\"button mr-2 mb-2 {{ buttonClass }}\"\n    *ngFor=\"let id of recommendations; trackBy: trackByValue; let i = index\"\n    (click)=\"add(id, i)\">\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: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: NodeRecommendationsComponent, decorators: [{
             type: Component$1,
@@ -6631,7 +6696,7 @@ class TermsUnitsDescriptionComponent {
         return this.term?.unitsDescription;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsUnitsDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: { term: "term", iconTemplate: "iconTemplate" }, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <span class=\"has-text-secondary\" [ngbTooltip]=\"content\" placement=\"bottom\" container=\"body\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate || defaultIconTemplate\"></ng-container>\n  </span>\n</ng-container>\n\n<ng-template #defaultIconTemplate>\n  <fa-icon icon=\"question-circle\" size=\"sm\"></fa-icon>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: { term: "term", iconTemplate: "iconTemplate" }, ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <span class=\"has-text-secondary\" [ngbTooltip]=\"content\" placement=\"bottom\" container=\"body\">\n    <ng-container *ngTemplateOutlet=\"iconTemplate || defaultIconTemplate\"></ng-container>\n  </span>\n</ng-container>\n\n<ng-template #defaultIconTemplate>\n  <fa-icon icon=\"question-circle\" size=\"sm\"></fa-icon>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsUnitsDescriptionComponent, decorators: [{
             type: Component$1,
@@ -6653,7 +6718,7 @@ class TermsPropertyContentComponent {
         return keys.includes(key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsPropertyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsPropertyContentComponent, selector: "he-terms-property-content", inputs: { property: "property", showTermName: "showTermName" }, ngImport: i0, template: "<ng-container *bindOnce=\"property\">\n  <ng-container *ngIf=\"property.term\">\n    <a class=\"pr-2\" *ngIf=\"showTermName\" [routerLink]=\"['/', 'term', property.term['@id']]\" target=\"_blank\">\n      <b>{{ property.term.name }}:</b>\n    </a>\n\n    <span *ngIf=\"property.key?.name\" class=\"pr-1\">\n      <span>{{ property.key.name }}</span>\n      <ng-container *ngIf=\"hasKey('value')\">\n        ,\n        <span class=\"has-text-underline\">value</span>\n        :\n      </ng-container>\n    </span>\n\n    <ng-container *ngIf=\"hasKey('value')\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          property.value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n          context: { $implicit: property.value }\n        \"></ng-container>\n\n      <ng-container *ngIf=\"hasKey('sd')\">\n        <span class=\"px-2\">\u00B1</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.sd }\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"hasKey('min') && hasKey('max')\">\n        <span class=\"is-pl-2\">(</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.min }\"></ng-container>\n        <span class=\"is-px-2\">-</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.max }\"></ng-container>\n        <span>)</span>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"property.term.units\">\n      <span class=\"is-ml-1\" [innerHtml]=\"property.term.units | compound\"></span>\n      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"property.term\"></he-terms-units-description>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #defaultValue let-value>\n  <ng-container [ngSwitch]=\"isEmpty(value)\">\n    <span *ngSwitchCase=\"true\">{{ 'N/A' }}</span>\n    <ng-container *ngSwitchCase=\"false\">\n      <ng-container [ngSwitch]=\"isNumber(value)\">\n        <span *ngSwitchCase=\"true\">{{ value | precision: 3 }}</span>\n        <span *ngSwitchCase=\"false\">{{ value }}</span>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #externalLink let-value>\n  <a [href]=\"value\" target=\"_blank\">\n    <span>{{ value }}</span>\n    <fa-icon class=\"is-ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsPropertyContentComponent, selector: "he-terms-property-content", inputs: { property: "property", showTermName: "showTermName" }, ngImport: i0, template: "<ng-container *bindOnce=\"property\">\n  <ng-container *ngIf=\"property.term\">\n    <a class=\"pr-2\" *ngIf=\"showTermName\" [routerLink]=\"['/', 'term', property.term['@id']]\" target=\"_blank\">\n      <b>{{ property.term.name }}:</b>\n    </a>\n\n    <span *ngIf=\"property.key?.name\" class=\"pr-1\">\n      <span>{{ property.key.name }}</span>\n      <ng-container *ngIf=\"hasKey('value')\">\n        ,\n        <span class=\"has-text-underline\">value</span>\n        :\n      </ng-container>\n    </span>\n\n    <ng-container *ngIf=\"hasKey('value')\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          property.value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n          context: { $implicit: property.value }\n        \"></ng-container>\n\n      <ng-container *ngIf=\"hasKey('sd')\">\n        <span class=\"px-2\">\u00B1</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.sd }\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"hasKey('min') && hasKey('max')\">\n        <span class=\"is-pl-2\">(</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.min }\"></ng-container>\n        <span class=\"is-px-2\">-</span>\n        <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property.max }\"></ng-container>\n        <span>)</span>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"property.term.units\">\n      <span class=\"is-ml-1\" [innerHtml]=\"property.term.units | compound\"></span>\n      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"property.term\"></he-terms-units-description>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #defaultValue let-value>\n  <ng-container [ngSwitch]=\"isEmpty(value)\">\n    <span *ngSwitchCase=\"true\">{{ 'N/A' }}</span>\n    <ng-container *ngSwitchCase=\"false\">\n      <ng-container [ngSwitch]=\"isNumber(value)\">\n        <span *ngSwitchCase=\"true\">{{ value | precision: 3 }}</span>\n        <span *ngSwitchCase=\"false\">{{ value }}</span>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #externalLink let-value>\n  <a [href]=\"value\" target=\"_blank\">\n    <span>{{ value }}</span>\n    <fa-icon class=\"is-ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n  </a>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsPropertyContentComponent, decorators: [{
             type: Component$1,
@@ -6696,7 +6761,7 @@ class TermsSubClassOfContentComponent {
         this.open = !this.open;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsSubClassOfContentComponent, deps: [{ token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsSubClassOfContentComponent, selector: "he-terms-sub-class-of-content", inputs: { term: "term" }, usesOnChanges: true, ngImport: i0, template: "<div>\n  <a (click)=\"toggle()\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" *ngIf=\"loading\"></fa-icon>\n    <fa-icon [icon]=\"open ? 'minus' : 'plus'\" [class.is-hidden]=\"loading\"></fa-icon>\n    <he-node-link class=\"pl-2\" [node]=\"term\" [showExternalLink]=\"true\"></he-node-link>\n  </a>\n</div>\n\n<ul class=\"ml-2\" *ngIf=\"!results || results.results?.length\" [class.is-hidden]=\"!open\">\n  <li *ngFor=\"let result of results?.results || []\">\n    <he-terms-sub-class-of-content [term]=\"result\"></he-terms-sub-class-of-content>\n  </li>\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsSubClassOfContentComponent, selector: "he-terms-sub-class-of-content", inputs: ["term"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: TermsSubClassOfContentComponent, selector: "he-terms-sub-class-of-content", inputs: { term: "term" }, usesOnChanges: true, ngImport: i0, template: "<div>\n  <a (click)=\"toggle()\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" *ngIf=\"loading\"></fa-icon>\n    <fa-icon [icon]=\"open ? 'minus' : 'plus'\" [class.is-hidden]=\"loading\"></fa-icon>\n    <he-node-link class=\"pl-2\" [node]=\"term\" [showExternalLink]=\"true\"></he-node-link>\n  </a>\n</div>\n\n<ul class=\"ml-2\" *ngIf=\"!results || results.results?.length\" [class.is-hidden]=\"!open\">\n  <li *ngFor=\"let result of results?.results || []\">\n    <he-terms-sub-class-of-content [term]=\"result\"></he-terms-sub-class-of-content>\n  </li>\n</ul>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsSubClassOfContentComponent, selector: "he-terms-sub-class-of-content", inputs: ["term"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: TermsSubClassOfContentComponent, decorators: [{
             type: Component$1,
@@ -6763,7 +6828,7 @@ class CyclesActivityLogsComponent {
         return logsKey(this.cycle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesActivityLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: { cycle: "cycle", original: "original", recalculated: "recalculated" }, ngImport: i0, template: "<div class=\"tabs mb-1\">\n  <ul>\n    <li *ngFor=\"let tab of Tab | keys\" [class.is-active]=\"selectedTab === tab.value\">\n      <a (click)=\"selectedTab = tab.value\">{{ tab.value }}</a>\n    </li>\n  </ul>\n</div>\n\n<he-node-logs-models\n  *ngIf=\"selectedTab === Tab.inputs\"\n  [node]=\"node\"\n  nodeKey=\"inputs\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"original?.inputs\"\n  [recalculatedValues]=\"recalculated?.inputs\"></he-node-logs-models>\n\n<he-node-logs-models\n  *ngIf=\"selectedTab === Tab.products\"\n  [node]=\"node\"\n  nodeKey=\"products\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"original?.products\"\n  [recalculatedValues]=\"recalculated?.products\"></he-node-logs-models>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: { cycle: "cycle", original: "original", recalculated: "recalculated" }, ngImport: i0, template: "<div class=\"tabs mb-1\">\n  <ul>\n    <li *ngFor=\"let tab of Tab | keys\" [class.is-active]=\"selectedTab === tab.value\">\n      <a (click)=\"selectedTab = tab.value\">{{ tab.value }}</a>\n    </li>\n  </ul>\n</div>\n\n<he-node-logs-models\n  *ngIf=\"selectedTab === Tab.inputs\"\n  [node]=\"node\"\n  nodeKey=\"inputs\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"original?.inputs\"\n  [recalculatedValues]=\"recalculated?.inputs\"></he-node-logs-models>\n\n<he-node-logs-models\n  *ngIf=\"selectedTab === Tab.products\"\n  [node]=\"node\"\n  nodeKey=\"products\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"original?.products\"\n  [recalculatedValues]=\"recalculated?.products\"></he-node-logs-models>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "pipe", type: KeysPipe, name: "keys" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesActivityLogsComponent, decorators: [{
             type: Component$1,
@@ -6781,7 +6846,7 @@ class CyclesFunctionalUnitMeasureComponent {
         this.CycleFunctionalUnit = CycleFunctionalUnit;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesFunctionalUnitMeasureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: { cycle: "cycle" }, ngImport: i0, template: "<span class=\"is-nowrap has-text-ellipsis\" [ngSwitch]=\"cycle?.functionalUnit\" [attr.title]=\"cycle?.functionalUnit\">\n  <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">1 hectare</ng-container>\n  <ng-container *ngSwitchDefault>relative</ng-container>\n</span>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: { cycle: "cycle" }, ngImport: i0, template: "<span class=\"is-nowrap has-text-ellipsis\" [ngSwitch]=\"cycle?.functionalUnit\" [attr.title]=\"cycle?.functionalUnit\">\n  <ng-container *ngSwitchCase=\"CycleFunctionalUnit['1 ha']\">1 hectare</ng-container>\n  <ng-container *ngSwitchDefault>relative</ng-container>\n</span>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesFunctionalUnitMeasureComponent, decorators: [{
             type: Component$1,
@@ -6960,7 +7025,7 @@ class CyclesActivityComponent {
         return this.updateSelectedIndex(+value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter inputs & products by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\" [class.has-border-right]=\"products.length\">\n              Inputs\n            </th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th\n              *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\">\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\" [attr.title]=\"product.value.term.name\">\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th\n              *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\">\n              <span [innerHtml]=\"input.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"input.value.term\"></he-terms-units-description>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\" [attr.title]=\"product.value.term.units\">\n              <span [innerHtml]=\"product.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"product.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td\n                class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\">\n                <span\n                  *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\">\n                  <span pointer>\n                    {{\n                      propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let product of products; let pl = last\">\n                <span\n                  *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\" [cycles]=\"cycles\"></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"inputs-products.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesActivityComponent, selector: "he-cycles-activity", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState", enableCompare: "enableCompare" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && (inputs.length || products.length)\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter inputs & products by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"inputs.length || products.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th></th>\n            <th *ngIf=\"inputs.length\" [attr.colspan]=\"inputs.length\" [class.has-border-right]=\"products.length\">\n              Inputs\n            </th>\n            <th *ngIf=\"products.length\" [attr.colspan]=\"products.length\">Products</th>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th\n              *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.name\"\n              [class.has-border-right]=\"products.length && pl\">\n              <he-node-link [node]=\"input.value.term\">\n                <span [innerHtml]=\"input.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\" [attr.title]=\"product.value.term.name\">\n              <he-node-link [node]=\"product.value.term\">\n                <span [innerHtml]=\"product.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th\n              *ngFor=\"let input of inputs; let pl = last\"\n              [attr.title]=\"input.value.term.units\"\n              [class.has-border-right]=\"products.length && pl\">\n              <span [innerHtml]=\"input.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"input.value.term\"></he-terms-units-description>\n            </th>\n            <th *ngFor=\"let product of products; let pl = last\" [attr.title]=\"product.value.term.units\">\n              <span [innerHtml]=\"product.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"product.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycle\"></he-cycles-functional-unit-measure>\n              </td>\n              <td\n                class=\"is-nowrap\"\n                *ngFor=\"let input of inputs; let pl = last\"\n                [class.has-border-right]=\"products.length && pl\">\n                <span\n                  *ngIf=\"input.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"togglePopover(p, { data: input.value.values[cycle['@id']], cycle: cycle, key: 'inputs' })\">\n                  <span pointer>\n                    {{\n                      propertyValue(input.value.values[cycle['@id']].value, input.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"input.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let product of products; let pl = last\">\n                <span\n                  *ngIf=\"product.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: product.value.values[cycle['@id']], cycle: cycle, key: 'products' })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(product.value.values[cycle['@id']].value, product.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"product.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-result *ngIf=\"selectedView === View.chart\" [cycles]=\"cycles\"></he-cycles-result>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-activity-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [original]=\"originalValues[selectedIndex]\"\n    [recalculated]=\"cycles[selectedIndex]\"></he-cycles-activity-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"inputs-products.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesActivityLogsComponent, selector: "he-cycles-activity-logs", inputs: ["cycle", "original", "recalculated"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesActivityComponent, decorators: [{
             type: Component$1,
@@ -7018,7 +7083,7 @@ class CyclesAnimalsComponent {
         return this.isOriginal && this.cycles.some(cycle => !cycle.aggregated);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesAnimalsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesAnimalsComponent, selector: "he-cycles-animals", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"animals.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter animals by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\">\n  <ng-container *ngIf=\"animals.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let animal of animals\" [attr.title]=\"animal.value.term.name\">\n              <he-node-link [node]=\"animal.value.term\">\n                <span [innerHtml]=\"animal.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let animal of animals\" [attr.title]=\"animal.value.term.units\">\n              <span [innerHtml]=\"animal.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"animal.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let animal of animals\">\n                <span\n                  *ngIf=\"animal.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"togglePopover(p, { data: animal.value.values[cycle['@id']], cycle: cycle, key: 'animals' })\">\n                  <span pointer>\n                    {{\n                      propertyValue(animal.value.values[cycle['@id']].value, animal.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"animal.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"animals.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesAnimalsComponent, selector: "he-cycles-animals", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"animals.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter animals by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\">\n  <ng-container *ngIf=\"animals.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let animal of animals\" [attr.title]=\"animal.value.term.name\">\n              <he-node-link [node]=\"animal.value.term\">\n                <span [innerHtml]=\"animal.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let animal of animals\" [attr.title]=\"animal.value.term.units\">\n              <span [innerHtml]=\"animal.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"animal.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let animal of animals\">\n                <span\n                  *ngIf=\"animal.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"togglePopover(p, { data: animal.value.values[cycle['@id']], cycle: cycle, key: 'animals' })\">\n                  <span pointer>\n                    {{\n                      propertyValue(animal.value.values[cycle['@id']].value, animal.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"animal.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"animals.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesAnimalsComponent, decorators: [{
             type: Component$1,
@@ -7110,7 +7175,7 @@ class CyclesCompletenessComponent {
         return this.updateSelectedIndex(+value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"cycles.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let completeness of completenessKeys\" [attr.title]=\"completeness\">\n              <a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">\n                {{ keyToLabel(completeness) }}\n              </a>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n                <span>{{ getCompleteness(cycle)[completeness] ? 'Complete' : 'Incomplete' }}</span>\n                <he-blank-node-state\n                  class=\"ml-1\"\n                  [dataState]=\"dataState\"\n                  [node]=\"getCompleteness(cycle)\"\n                  [key]=\"completeness\"></he-blank-node-state>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-completeness-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.completeness\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.completeness\"></he-cycles-completeness-logs>\n</ng-container>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"completeness.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: CyclesCompletenessLogsComponent, selector: "he-cycles-completeness-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesCompletenessComponent, selector: "he-cycles-completeness", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"cycles.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let completeness of completenessKeys\" [attr.title]=\"completeness\">\n              <a [href]=\"baseUrl + '/schema/Completeness#' + completeness\" target=\"_blank\">\n                {{ keyToLabel(completeness) }}\n              </a>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let completeness of completenessKeys\">\n                <span>{{ getCompleteness(cycle)[completeness] ? 'Complete' : 'Incomplete' }}</span>\n                <he-blank-node-state\n                  class=\"ml-1\"\n                  [dataState]=\"dataState\"\n                  [node]=\"getCompleteness(cycle)\"\n                  [key]=\"completeness\"></he-blank-node-state>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showAggregated]=\"false\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-completeness-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.completeness\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.completeness\"></he-cycles-completeness-logs>\n</ng-container>\n\n<ng-template #emptyTable>\n  <div class=\"panel-block\">\n    <span>No completeness data</span>\n  </div>\n</ng-template>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"completeness.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: CyclesCompletenessLogsComponent, selector: "he-cycles-completeness-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
             type: Component$1,
@@ -7210,7 +7275,7 @@ class CyclesEmissionsChartComponent {
         this.ngZone.runOutsideAngular(() => this.initChart());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: { cycles: "cycles" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
@@ -7257,7 +7322,7 @@ class CyclesEmissionsLogsComponent {
         return logsKey(this.cycle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsLogsComponent, deps: [{ token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: { cycle: "cycle", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  nodeKey=\"emissions\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"emissions\"\n  [filterTermTypes]=\"[TermTermType.emission]\"></he-node-logs-models>\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: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: { cycle: "cycle", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  nodeKey=\"emissions\"\n  [logsKey]=\"logsKey\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"emissions\"\n  [filterTermTypes]=\"[TermTermType.emission]\"></he-node-logs-models>\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: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsLogsComponent, decorators: [{
             type: Component$1,
@@ -7356,7 +7421,7 @@ class CyclesEmissionsComponent {
         return this.updateSelectedIndex(+value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter emissions by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th [class.has-border-right]=\"!lastGroup\" [attr.colspan]=\"item.value.emissions.length\">\n                {{ item.key | keyToLabel }}\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\">\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis: 30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\">\n                <span [innerHtml]=\"emission.value.term.units | compound\"></span>\n                <he-terms-units-description\n                  class=\"is-inline-block is-ml-2\"\n                  [term]=\"emission.value.term\"></he-terms-units-description>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td\n                  class=\"is-nowrap\"\n                  *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\">\n                  <span\n                    *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\"\n                    [autoClose]=\"'outside'\"\n                    popoverClass=\"is-narrow\"\n                    triggers=\"manual\"\n                    #p=\"ngbPopover\"\n                    placement=\"left\"\n                    container=\"body\"\n                    (click)=\"\n                      togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\n                    \">\n                    <span pointer>\n                      {{\n                        propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id'])\n                          | precision: 3\n                          | default: '-'\n                      }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart\n  *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"emissions.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesEmissionsComponent, selector: "he-cycles-emissions", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && hasEmissions\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter emissions by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"cycles.length > 1 || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"cycles.length > 1\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasEmissions; else emptyTable\">\n    <he-data-table class=\"mb-1\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-bold\">\n            <th class=\"width-auto\"></th>\n            <th [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th [class.has-border-right]=\"!lastGroup\" [attr.colspan]=\"item.value.emissions.length\">\n                {{ item.key | keyToLabel }}\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\"></th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.name\">\n                <he-node-link [node]=\"emission.value.term\">\n                  <span [innerHtml]=\"emission.value.term.name | ellipsis: 30 | compound\"></span>\n                </he-node-link>\n              </th>\n            </ng-container>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n              <th\n                *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                [class.has-border-right]=\"lastEmission && !lastGroup\"\n                [attr.title]=\"emission.value.term.units\">\n                <span [innerHtml]=\"emission.value.term.units | compound\"></span>\n                <he-terms-units-description\n                  class=\"is-inline-block is-ml-2\"\n                  [term]=\"emission.value.term\"></he-terms-units-description>\n              </th>\n            </ng-container>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [class.is-hidden]=\"isTransformation\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <ng-container *ngFor=\"let item of emissions; let lastGroup = last\">\n                <td\n                  class=\"is-nowrap\"\n                  *ngFor=\"let emission of item.value.emissions; let lastEmission = last\"\n                  [class.has-border-right]=\"lastEmission && !lastGroup\">\n                  <span\n                    *ngIf=\"emission.value.values[cycle['@id']]; else emptyValue\"\n                    class=\"trigger-popover\"\n                    [ngbPopover]=\"details\"\n                    [autoClose]=\"'outside'\"\n                    popoverClass=\"is-narrow\"\n                    triggers=\"manual\"\n                    #p=\"ngbPopover\"\n                    placement=\"left\"\n                    container=\"body\"\n                    (click)=\"\n                      togglePopover(p, { data: emission.value.values[cycle['@id']], cycle: cycle, key: 'emissions' })\n                    \">\n                    <span pointer>\n                      {{\n                        propertyValue(emission.value.values[cycle['@id']].value, emission.value.term['@id'])\n                          | precision: 3\n                          | default: '-'\n                      }}\n                    </span>\n                    <he-blank-node-state\n                      class=\"ml-1\"\n                      [dataState]=\"dataState\"\n                      [node]=\"emission.value.values[cycle['@id']].node\"\n                      key=\"value\"></he-blank-node-state>\n                  </span>\n                </td>\n              </ng-container>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\" [showDeleted]=\"true\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-cycles-emissions-chart\n  *ngIf=\"selectedView === View.chart && cycles.length > 1\"\n  [cycles]=\"cycles\"></he-cycles-emissions-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-emissions-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.emissions\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.emissions\"></he-cycles-emissions-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"emissions.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsLogsComponent, selector: "he-cycles-emissions-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesEmissionsComponent, decorators: [{
             type: Component$1,
@@ -7441,7 +7506,7 @@ class CyclesPracticesTimelineComponent {
         return this.el.nativeElement.offsetWidth - 60;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesPracticesTimelineComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: { filterTermTypes: "filterTermTypes", dataState: "dataState", cycle: "cycle" }, ngImport: i0, template: "<ul class=\"content pl-4 ml-4 pb-4\">\n  <li\n    class=\"is-relative m-0\"\n    *ngFor=\"let practice of practices | sortBy: ['startDate', 'endDate'] : ['asc', 'asc']; trackBy: trackByPractice\">\n    <div class=\"is-relative\" [style.width]=\"lineWidth + 'px'\">\n      <span *ngIf=\"practice.startDate\">{{ practice.startDate | date: 'YYYY-MM-dd' }}</span>\n      <span *ngIf=\"!practice.startDate\">\n        <ng-container *ngIf=\"practice.term?.termType === TermTermType.operation\">No date</ng-container>\n      </span>\n      <span class=\"px-1\" [class.is-invisible]=\"!practice.startDate || !practice.endDate\">-</span>\n      <span [class.is-invisible]=\"!practice.endDate\">{{ practice.endDate || now | date: 'YYYY-MM-dd' }}</span>\n      <span class=\"pl-4\" [innerHtml]=\"practice.term.name | compound\"></span>\n      <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\" [node]=\"practice\" key=\"value\"></he-blank-node-state>\n    </div>\n  </li>\n</ul>\n", styles: ["ul{max-height:400px;overflow-y:auto}ul li{width:4px;padding-top:20px;background:hsl(229,53%,53%)}ul li:after{content:\"\";position:absolute;left:50%;bottom:2px;transform:translate(-50%);width:20px;height:20px;border-radius:50%;background:inherit}ul li>div{width:600px;margin-left:24px}ul li>div>span{display:inline-block}ul li>div>span:nth-child(1),ul li>div>span:nth-child(3){width:94px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: SortByPipe, name: "sortBy" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: { filterTermTypes: "filterTermTypes", dataState: "dataState", cycle: "cycle" }, ngImport: i0, template: "<ul class=\"content pl-4 ml-4 pb-4\">\n  <li\n    class=\"is-relative m-0\"\n    *ngFor=\"let practice of practices | sortBy: ['startDate', 'endDate'] : ['asc', 'asc']; trackBy: trackByPractice\">\n    <div class=\"is-relative\" [style.width]=\"lineWidth + 'px'\">\n      <span *ngIf=\"practice.startDate\">{{ practice.startDate | date: 'YYYY-MM-dd' }}</span>\n      <span *ngIf=\"!practice.startDate\">\n        <ng-container *ngIf=\"practice.term?.termType === TermTermType.operation\">No date</ng-container>\n      </span>\n      <span class=\"px-1\" [class.is-invisible]=\"!practice.startDate || !practice.endDate\">-</span>\n      <span [class.is-invisible]=\"!practice.endDate\">{{ practice.endDate || now | date: 'YYYY-MM-dd' }}</span>\n      <span class=\"pl-4\" [innerHtml]=\"practice.term.name | compound\"></span>\n      <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState\" [node]=\"practice\" key=\"value\"></he-blank-node-state>\n    </div>\n  </li>\n</ul>\n", styles: ["ul{max-height:400px;overflow-y:auto}ul li{width:4px;padding-top:20px;background:hsl(229,53%,53%)}ul li:after{content:\"\";position:absolute;left:50%;bottom:2px;transform:translate(-50%);width:20px;height:20px;border-radius:50%;background:inherit}ul li>div{width:600px;margin-left:24px}ul li>div>span{display:inline-block}ul li>div>span:nth-child(1),ul li>div>span:nth-child(3){width:94px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: SortByPipe, name: "sortBy" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesPracticesTimelineComponent, decorators: [{
             type: Component$1,
@@ -7530,7 +7595,7 @@ class CyclesPracticesComponent {
         return this.updateSelectedIndex(+value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesPracticesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter practices by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.timeline\"\n          (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\" [attr.title]=\"practice.value.term.name\">\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\" [attr.title]=\"practice.value.term.units\">\n              <span [innerHtml]=\"practice.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"practice.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span\n                  *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline\n    [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\"\n    [filterTermTypes]=\"timelineTermType\"></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"practices.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: CyclesPracticesComponent, selector: "he-cycles-practices", inputs: { originalValues: "originalValues", cycles: "cycles", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && practices.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter practices by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"showTimeline || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"showTimeline\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.timeline\"\n          (click)=\"selectedView = View.timeline\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list-alt\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Operations timeline</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"practices.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let practice of practices\" [attr.title]=\"practice.value.term.name\">\n              <he-node-link [node]=\"practice.value.term\">\n                <span [innerHtml]=\"practice.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th *ngFor=\"let practice of practices\" [attr.title]=\"practice.value.term.units\">\n              <span [innerHtml]=\"practice.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"practice.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let cycle of cycles; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                <he-node-link [node]=\"cycle.term || cycle\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\">\n                <he-cycles-functional-unit-measure [cycle]=\"cycles[0]\"></he-cycles-functional-unit-measure>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let practice of practices\">\n                <span\n                  *ngIf=\"practice.value.values[cycle['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: practice.value.values[cycle['@id']], cycle: cycle, key: 'practices' })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(practice.value.values[cycle['@id']].value, practice.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"practice.value.values[cycle['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<div class=\"px-3 pb-3\" *ngIf=\"selectedView === View.timeline\">\n  <he-cycles-practices-timeline\n    [dataState]=\"dataState\"\n    [cycle]=\"cycles[0]\"\n    [filterTermTypes]=\"timelineTermType\"></he-cycles-practices-timeline>\n\n  <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"cycles.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of cycles; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ defaultLabel(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-cycles-practices-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [cycle]=\"cycles[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.practices\"\n    [recalculatedValues]=\"cycles[selectedIndex]?.practices\"></he-cycles-practices-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"cycles\"\n  filename=\"practices.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"headerKeys\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "component", type: CyclesPracticesLogsComponent, selector: "he-cycles-practices-logs", inputs: ["cycle", "originalValues", "recalculatedValues"] }, { kind: "component", type: CyclesPracticesTimelineComponent, selector: "he-cycles-practices-timeline", inputs: ["filterTermTypes", "dataState", "cycle"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: CyclesPracticesComponent, decorators: [{
             type: Component$1,
@@ -7637,7 +7702,7 @@ class EngineModelsStageComponent {
         this.inProgress = computed(() => this.stage() && this.stage() !== this.maxStage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineModelsStageComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineModelsStageComponent, selector: "he-engine-models-stage", inputs: { node: "node" }, ngImport: i0, template: "<ng-container *ngIf=\"inProgress()\">\n  <span class=\"tag is-warning\">\n    <span>Calculation in progress (stage {{ stage() }} out of {{ maxStage() }})</span>\n  </span>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineModelsStageComponent, selector: "he-engine-models-stage", inputs: { node: "node" }, ngImport: i0, template: "<ng-container *ngIf=\"inProgress()\">\n  <span class=\"tag is-warning\">\n    <span>Calculation in progress (stage {{ stage() }} out of {{ maxStage() }})</span>\n  </span>\n</ng-container>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineModelsStageComponent, decorators: [{
             type: Component$1,
@@ -7693,7 +7758,7 @@ class EngineModelsVersionLinkComponent {
         return [engineGitBaseUrl(), '-', 'tree', `v${this.version}`].filter(Boolean).join('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineModelsVersionLinkComponent, deps: [{ token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: { node: "node", showDetails: "showDetails" }, ngImport: i0, template: "<ng-container *ngIf=\"version\">\n  <div class=\"tags has-addons\" *ngIf=\"service.latestVersion$ | async as latestVersion\">\n    <ng-container *bindOnce=\"url\">\n      <a class=\"tag is-info\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n        {{ version }}\n        <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"showDetails\">\n      <ng-container *ngIf=\"latestVersion === version; else outdated\">\n        <ng-container *ngTemplateOutlet=\"latest\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #latest>\n  <span class=\"tag is-success\">latest recalculations</span>\n</ng-template>\n\n<ng-template #outdated>\n  <span class=\"tag is-warning\">outdated recalculations</span>\n</ng-template>\n", styles: [":host{display:inline-block}a{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: { node: "node", showDetails: "showDetails" }, ngImport: i0, template: "<ng-container *ngIf=\"version\">\n  <div class=\"tags has-addons\" *ngIf=\"service.latestVersion$ | async as latestVersion\">\n    <ng-container *bindOnce=\"url\">\n      <a class=\"tag is-info\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n        {{ version }}\n        <fa-icon class=\"ml-2\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"showDetails\">\n      <ng-container *ngIf=\"latestVersion === version; else outdated\">\n        <ng-container *ngTemplateOutlet=\"latest\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #latest>\n  <span class=\"tag is-success\">latest recalculations</span>\n</ng-template>\n\n<ng-template #outdated>\n  <span class=\"tag is-warning\">outdated recalculations</span>\n</ng-template>\n", styles: [":host{display:inline-block}a{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineModelsVersionLinkComponent, decorators: [{
             type: Component$1,
@@ -7814,7 +7879,7 @@ class EngineOrchestratorEditComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineOrchestratorEditComponent, deps: [{ token: HeEngineService }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0, template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the Hestia's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow has-text-right\">\n      <div\n        class=\"dropdown is-right has-text-left is-dropdown-filters\"\n        [class.is-active]=\"showConfig\"\n        (clickOutside)=\"showConfig = false\">\n        <div class=\"dropdown-trigger\" (click)=\"showConfig = !showConfig\">\n          <button\n            class=\"button is-ghost\"\n            [class.is-active]=\"showConfig\"\n            aria-haspopup=\"true\"\n            aria-controls=\"option-menu\"\n            ngbTooltip=\"Filters\"\n            placement=\"bottom\"\n            container=\"body\"\n            [disableTooltip]=\"showConfig\">\n            <span class=\"icon is-small\">\n              <fa-icon icon=\"cog\" aria-hidden=\"true\"></fa-icon>\n            </span>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    [(ngModel)]=\"search\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    (input)=\"filterModels()\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search = ''; filterModels()\">\n                    <fa-icon icon=\"times\"></fa-icon>\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\"\n                  (change)=\"filterModels()\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\"\n                  (change)=\"filterModels()\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow has-text-right\">\n      <div\n        class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\">\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button\n            class=\"button is-ghost\"\n            aria-haspopup=\"true\"\n            aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\"\n            placement=\"bottom\"\n            container=\"body\"\n            [disableTooltip]=\"showDisplayBy\">\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\" [class.is-selected]=\"displayBy === 'list'\" (click)=\"displayBy = 'list'\">\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a class=\"dropdown-item\" [class.is-selected]=\"displayBy === 'type'\" (click)=\"displayBy = 'type'\">\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models }\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\">\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container\n      *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels[selectedGroupedKey] }\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #termLink let-value>\n  <ng-template #defaultLabel>\n    <span>{{ value | keyToLabel }}</span>\n  </ng-template>\n\n  <ng-container *ngIf=\"termsById[value]; else defaultLabel\">\n    <he-node-link [node]=\"termsById[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById[value].name }}</span>\n    </he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data) && data.length\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\"></ng-container>\n    </div>\n\n    <hr />\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{ data.value }}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span class=\"pr-2\">\n              <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\"></ng-container>\n            </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\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link }\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container\n            *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"showAdvanced\">\n          <div *ngIf=\"data.runStrategy\">\n            <span class=\"pr-1\">Run strategy:</span>\n            <ng-container\n              *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\n              *ngTemplateOutlet=\"\n                strategiesLink;\n                context: { strategy: data.mergeStrategy, type: 'merge' }\n              \"></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    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <ng-container *ngIf=\"link.term\">\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\"></ng-container>\n  </ng-container>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{ value }}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\"></ng-container>\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{ value }}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\"></ng-container>\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    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>\n      :\n      <code>{{ arg.value | json }}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown.is-dropdown-filters .dropdown-content{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineOrchestratorEditComponent, selector: "he-engine-orchestrator-edit", inputs: { config: "config", nodeType: "nodeType" }, usesOnChanges: true, ngImport: i0, template: "<p>\n  <i>\n    The configuration below is a preview of the\n    <a [href]=\"configUrl\" target=\"_blank\">JSON configuration file</a>\n    used for the orchestration of the Hestia's calculations.\n  </i>\n</p>\n<p>\n  <i>Note: not all models might be represented accurately.</i>\n</p>\n\n<div class=\"is-size-7 is-italic\">\n  <div class=\"columns is-mobile is-multiline is-vcentered is-variable is-1 my-0\">\n    <div class=\"column\">\n      <div class=\"pl-3 model-parallel my-3\">\n        <span>Models running in parallel</span>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow has-text-right\">\n      <div\n        class=\"dropdown is-right has-text-left is-dropdown-filters\"\n        [class.is-active]=\"showConfig\"\n        (clickOutside)=\"showConfig = false\">\n        <div class=\"dropdown-trigger\" (click)=\"showConfig = !showConfig\">\n          <button\n            class=\"button is-ghost\"\n            [class.is-active]=\"showConfig\"\n            aria-haspopup=\"true\"\n            aria-controls=\"option-menu\"\n            ngbTooltip=\"Filters\"\n            placement=\"bottom\"\n            container=\"body\"\n            [disableTooltip]=\"showConfig\">\n            <span class=\"icon is-small\">\n              <fa-icon icon=\"cog\" aria-hidden=\"true\"></fa-icon>\n            </span>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <div class=\"dropdown-item\">\n              <div class=\"field\">\n                <div class=\"control is-expanded has-icons-right\">\n                  <input\n                    type=\"text\"\n                    class=\"input search-input is-secondary is-small\"\n                    [(ngModel)]=\"search\"\n                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    (input)=\"filterModels()\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search = ''; filterModels()\">\n                    <fa-icon icon=\"times\"></fa-icon>\n                  </a>\n                </div>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"showAdvanced\"\n                  id=\"showAdvanced\"\n                  (change)=\"filterModels()\" />\n                <label class=\"is-size-7\" for=\"showAdvanced\">\n                  <span>Show advanced data</span>\n                </label>\n              </div>\n\n              <div class=\"field is-relative\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded is-secondary\"\n                  [(ngModel)]=\"onlyGapFilled\"\n                  id=\"onlyGapFilled\"\n                  (change)=\"filterModels()\" />\n                <label class=\"is-size-7\" for=\"onlyGapFilled\">\n                  <span>Show only gap-filled data</span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"column is-narrow has-text-right\">\n      <div\n        class=\"dropdown is-right has-text-left\"\n        [class.is-active]=\"showDisplayBy\"\n        (clickOutside)=\"showDisplayBy = false\">\n        <div class=\"dropdown-trigger\" (click)=\"showDisplayBy = !showDisplayBy\">\n          <button\n            class=\"button is-ghost\"\n            aria-haspopup=\"true\"\n            aria-controls=\"display-menu\"\n            ngbTooltip=\"Display options\"\n            placement=\"bottom\"\n            container=\"body\"\n            [disableTooltip]=\"showDisplayBy\">\n            <ng-container [ngSwitch]=\"displayBy\">\n              <ng-container *ngSwitchCase=\"'list'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n                </span>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'type'\">\n                <span class=\"icon is-small\">\n                  <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n                </span>\n              </ng-container>\n            </ng-container>\n          </button>\n        </div>\n        <div class=\"dropdown-menu\" id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\" (click)=\"showDisplayBy = false\">\n            <a class=\"dropdown-item\" [class.is-selected]=\"displayBy === 'list'\" (click)=\"displayBy = 'list'\">\n              <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a class=\"dropdown-item\" [class.is-selected]=\"displayBy === 'type'\" (click)=\"displayBy = 'type'\">\n              <fa-icon icon=\"table\" aria-hidden=\"true\"></fa-icon>\n              <span class=\"pl-2\">Display by Type</span>\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"displayBy === 'list' && models\">\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models }\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"displayBy === 'type' && groupedModels\">\n  <div class=\"tabs\">\n    <ul>\n      <li\n        *ngFor=\"let group of groupedModels | keys; trackBy: trackByKey\"\n        [class.is-active]=\"selectedGroupedKey === group.key\">\n        <a (click)=\"selectedGroupedKey = group.key\">\n          <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"pl-3\">\n    <ng-container\n      *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels[selectedGroupedKey] }\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #termLink let-value>\n  <ng-template #defaultLabel>\n    <span>{{ value | keyToLabel }}</span>\n  </ng-template>\n\n  <ng-container *ngIf=\"termsById[value]; else defaultLabel\">\n    <he-node-link [node]=\"termsById[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById[value].name }}</span>\n    </he-node-link>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelList let-data>\n  <div *ngFor=\"let v of data\">\n    <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #model let-data>\n  <ng-container *ngIf=\"isArray(data) && data.length\">\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\"></ng-container>\n    </div>\n\n    <hr />\n  </ng-container>\n  <ng-container *ngIf=\"!isArray(data)\">\n    <div class=\"card mb-2 model-serie is-size-6\">\n      <div class=\"card-content p-3\">\n        <span class=\"is-capitalized\">{{ data.key | keyToLabel }}</span>\n        :\n        <ng-template #defaultView>\n          <span class=\"default-value\">{{ data.value }}</span>\n\n          <p>\n            <span class=\"pr-1\">Model:</span>\n            <span class=\"pr-2\">\n              <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\"></ng-container>\n            </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\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link }\"></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-container *ngIf=\"modelLink$(data) | async as link; else modelFromPathLink\">\n          <ng-container\n            *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\"></ng-container>\n        </ng-container>\n\n        <div *ngIf=\"showAdvanced\">\n          <div *ngIf=\"data.runStrategy\">\n            <span class=\"pr-1\">Run strategy:</span>\n            <ng-container\n              *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\n              *ngTemplateOutlet=\"\n                strategiesLink;\n                context: { strategy: data.mergeStrategy, type: 'merge' }\n              \"></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    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #modelLinkKey let-model=\"model\" let-link=\"link\">\n  <a [href]=\"modelKeyUrl(link, model)\" target=\"_blank\">{{ modelKeyName(link.modelKey) }}</a>\n</ng-template>\n\n<ng-template #modelLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <ng-container *ngIf=\"link.term\">\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\"></ng-container>\n  </ng-container>\n\n  <span *ngIf=\"!link.term && !link?.modelKey\" class=\"default-value\">{{ value }}</span>\n\n  <ng-container *ngIf=\"!link.term && link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\"></ng-container>\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  <span *ngIf=\"!link?.modelKey\" class=\"default-value\">{{ value }}</span>\n\n  <ng-container *ngIf=\"link?.modelKey\">\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\"></ng-container>\n  </ng-container>\n\n  <p class=\"model-path-link\">\n    <span class=\"pr-1\">Model:</span>\n    <span class=\"pr-2\">\n      <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: model }\"></ng-container>\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span class=\"pr-1\">(View Docs)</span>\n      <fa-icon icon=\"external-link-alt\"></fa-icon>\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #strategiesLink let-strategy=\"strategy\" let-type=\"type\">\n  <span class=\"pr-2 is-inline-block\">\n    <code>{{ strategy }}</code>\n  </span>\n\n  <a\n    class=\"is-size-7\"\n    [href]=\"strategiesDocs + '/' + type + '/' + (type === 'merge' ? 'merge_' : '') + strategy + '.md'\"\n    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>\n      :\n      <code>{{ arg.value | json }}</code>\n    </p>\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown.is-dropdown-filters .dropdown-content{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineOrchestratorEditComponent, decorators: [{
             type: Component$1,
@@ -7876,13 +7941,13 @@ class EngineRequirementsFormComponent {
             ...(productTermId ? { productTermId: productTermId['@id'] } : {}) // selected as a JSON-LD Object
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineRequirementsFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0, template: "<form class=\"needs-validation mt-3\" novalidate [formGroup]=\"form\">\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\n            class=\"input\"\n            formControlName=\"productTermId\"\n            name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\" />\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\">\n                {{ termType | keyToLabel }}\n              </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\">\n                {{ siteType.value }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestionProductTermId let-r=\"result\" let-t=\"term\">\n  <ngb-highlight [result]=\"r.name\" [term]=\"t\"></ngb-highlight>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineRequirementsFormComponent, deps: [{ token: i2$1.UntypedFormBuilder }, { token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: EngineRequirementsFormComponent, selector: "he-engine-requirements-form", ngImport: i0, template: "<form class=\"needs-validation mt-3\" novalidate [formGroup]=\"form\">\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\n            class=\"input\"\n            formControlName=\"productTermId\"\n            name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\" />\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\">\n                {{ termType | keyToLabel }}\n              </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\">\n                {{ siteType.value }}\n              </option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n\n<ng-template #suggestionProductTermId let-r=\"result\" let-t=\"term\">\n  <ngb-highlight [result]=\"r.name\" [term]=\"t\"></ngb-highlight>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: KeysPipe, name: "keys" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: EngineRequirementsFormComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-engine-requirements-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"needs-validation mt-3\" novalidate [formGroup]=\"form\">\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\n            class=\"input\"\n            formControlName=\"productTermId\"\n            name=\"productTermId\"\n            placeholder=\"Search product by ID or name\"\n            [editable]=\"false\"\n            [ngbTypeahead]=\"suggestProductTermId\"\n            [resultTemplate]=\"suggestionProductTermId\"\n            [inputFormatter]=\"inputFormatterProductTermId\" />\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\">\n                {{ termType | keyToLabel }}\n              </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\">\n                {{ siteType.value }}\n              </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" }]
-        }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }, { type: HeSearchService }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.UntypedFormBuilder }, { type: HeSearchService }]; } });
 
 const components$5 = [
     EngineModelsStageComponent,
@@ -8958,27 +9023,17 @@ const sitePolygon = ({ boundary }) => (boundary ? polygonsFromFeature(boundary,
 const regions = (sites) => unique(sites.map(({ country, region }) => (region ? region['@id'] : country ? country['@id'] : null)).filter(Boolean));
 const defaultCenter = { lat: 0, lng: 0 };
 class SitesMapsComponent {
-    constructor(nodeService) {
+    constructor(mapLoaded$, nodeService) {
+        this.mapLoaded$ = mapLoaded$;
         this.nodeService = nodeService;
-        this.loaded = false;
         this.loadPolygons = true;
         this.sites = [];
         this.nodes = [];
         this.center = defaultCenter;
         this.zoom = 2;
         this.showNotice = true;
-        this.googleLoaded = false;
         this.showNoLocation = false;
     }
-    ngOnInit() {
-        waitFor('google.maps', () => {
-            this.googleLoaded = true;
-            setTimeout(() => !this.loaded && this.map && this.loadData());
-        });
-    }
-    ngAfterViewInit() {
-        return this.googleLoaded && this.map && this.loadData();
-    }
     async loadData() {
         // loaded data as geojson
         this.map.googleMap.data.setStyle(() => ({ ...strokeStyle, strokeOpacity: 0.1 }));
@@ -8987,7 +9042,6 @@ class SitesMapsComponent {
         // add the site.boundary if exist
         const polygons = sites.flatMap(sitePolygon).filter(Boolean);
         polygons.map(polygon => polygon?.setMap(this.map.googleMap));
-        this.loaded = true;
         // add the default site polygons from GADM region if any
         const termPolygons = (await Promise.all(regions(sites).map(v => this.addTermsPolygons(v)))).flat();
         this.showNoLocation = markers.length === 0 && polygons.length === 0 && termPolygons.length === 0;
@@ -9048,13 +9102,19 @@ class SitesMapsComponent {
             return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMapsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<google-map *ngIf=\"googleLoaded\" height=\"100%\" width=\"100%\" [zoom]=\"zoom\" [center]=\"center\"></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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    mapLoaded() {
+        setTimeout(() => this.loadData());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMapsComponent, deps: [{ token: HE_MAP_LOADED }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMapsComponent, selector: "he-sites-maps", inputs: { loadPolygons: "loadPolygons", sites: "sites", nodes: "nodes", center: "center", zoom: "zoom", showNotice: "showNotice" }, viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<google-map\n  *ngIf=\"mapLoaded$ | async\"\n  (mapInitialized)=\"mapLoaded()\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"></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"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMapsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-sites-maps', changeDetection: ChangeDetectionStrategy.OnPush, template: "<google-map *ngIf=\"googleLoaded\" height=\"100%\" width=\"100%\" [zoom]=\"zoom\" [center]=\"center\"></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"] }]
-        }], ctorParameters: function () { return [{ type: HeNodeService }]; }, propDecorators: { map: [{
+            args: [{ selector: 'he-sites-maps', changeDetection: ChangeDetectionStrategy.OnPush, template: "<google-map\n  *ngIf=\"mapLoaded$ | async\"\n  (mapInitialized)=\"mapLoaded()\"\n  height=\"100%\"\n  width=\"100%\"\n  [zoom]=\"zoom\"\n  [center]=\"center\"></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"] }]
+        }], ctorParameters: function () { return [{ type: i4$1.Observable, decorators: [{
+                    type: Inject,
+                    args: [HE_MAP_LOADED]
+                }] }, { type: HeNodeService }]; }, propDecorators: { map: [{
                 type: ViewChild,
                 args: [GoogleMap]
             }], loadPolygons: [{
@@ -9118,7 +9178,7 @@ class SitesMeasurementsLogsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMeasurementsLogsComponent, deps: [{ token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: { site: "site", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  nodeKey=\"measurements\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"measurements\"\n  [filterTermTypes]=\"[TermTermType.measurement]\"></he-node-logs-models>\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: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: { site: "site", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  nodeKey=\"measurements\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"measurements\"\n  [filterTermTypes]=\"[TermTermType.measurement]\"></he-node-logs-models>\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: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMeasurementsLogsComponent, decorators: [{
             type: Component$1,
@@ -9196,7 +9256,7 @@ class SitesMeasurementsComponent {
         return this.updateSelectedIndex(+value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMeasurementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter measurements by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\" [attr.title]=\"measurement.value.term.name\">\n              <he-node-link [node]=\"measurement.value.term\">\n                <span [innerHtml]=\"measurement.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\" [attr.title]=\"measurement.value.term.units\">\n              <span [innerHtml]=\"measurement.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"measurement.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                <he-node-link [node]=\"site\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(site) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let measurement of measurements\">\n                <span\n                  *ngIf=\"measurement.value.values[site['@id']]\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: measurement.value.values[site['@id']], site: site, key: 'measurements' })\n                  \">\n                  <span pointer>\n                    {{\n                      measurementValue(measurement.value.values[site['@id']], measurement.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n                <span *ngIf=\"!measurement.value.values[site['@id']]\">\n                  <span>-</span>\n                  <sup class=\"pl-1\" *ngIf=\"siteTooBig(site)\">(1)</sup>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <p class=\"is-size-7 is-italic\" *ngIf=\"showAreaTooBig\">\n      (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n    </p>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.measurements\"></he-sites-measurements-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"sites\"\n  filename=\"site-measurements.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"['site.id', 'site.@id', 'site.measurements.']\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SitesMeasurementsComponent, selector: "he-sites-measurements", inputs: { originalValues: "originalValues", sites: "sites", dataState: "dataState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && measurements.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter measurements by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"!isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"selectedView = View.logs\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"measurements.length; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\" [attr.title]=\"measurement.value.term.name\">\n              <he-node-link [node]=\"measurement.value.term\">\n                <span [innerHtml]=\"measurement.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th *ngFor=\"let measurement of measurements\" [attr.title]=\"measurement.value.term.units\">\n              <span [innerHtml]=\"measurement.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"measurement.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let site of sites; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                <he-node-link [node]=\"site\">\n                  <span>{{ i + 1 }}. {{ defaultLabel(site) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let measurement of measurements\">\n                <span\n                  *ngIf=\"measurement.value.values[site['@id']]\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, { data: measurement.value.values[site['@id']], site: site, key: 'measurements' })\n                  \">\n                  <span pointer>\n                    {{\n                      measurementValue(measurement.value.values[site['@id']], measurement.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"measurement.value.values[site['@id']].node\"\n                    key=\"value\"></he-blank-node-state>\n                </span>\n                <span *ngIf=\"!measurement.value.values[site['@id']]\">\n                  <span>-</span>\n                  <sup class=\"pl-1\" *ngIf=\"siteTooBig(site)\">(1)</sup>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n\n    <p class=\"is-size-7 is-italic\" *ngIf=\"showAreaTooBig\">\n      (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n    </p>\n  </ng-container>\n</div>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"sites.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of sites; let i = index\" [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-sites-measurements-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [site]=\"sites[selectedIndex]\"\n    [originalValues]=\"originalValues[selectedIndex]?.measurements\"\n    [recalculatedValues]=\"sites[selectedIndex]?.measurements\"></he-sites-measurements-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"sites\"\n  filename=\"site-measurements.csv\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"['site.id', 'site.@id', 'site.measurements.']\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span *ngIf=\"showSwitchToRecalculated\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: SitesMeasurementsLogsComponent, selector: "he-sites-measurements-logs", inputs: ["site", "originalValues", "recalculatedValues"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SitesMeasurementsComponent, decorators: [{
             type: Component$1,
@@ -9246,7 +9306,7 @@ class SchemaInfoComponent {
         return this.triggers === 'click' ? 'outside' : true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SchemaInfoComponent, deps: [{ token: HeSchemaService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SchemaInfoComponent, selector: "he-schema-info", inputs: { type: "type", field: "field", content: "content", placement: "placement", triggers: "triggers", container: "container" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"contentString\">\n  <span\n    class=\"has-text-secondary\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement\"\n    [triggers]=\"triggers\"\n    [autoClose]=\"autoClose\"\n    [container]=\"container\">\n    <fa-icon icon=\"question-circle\" size=\"sm\"></fa-icon>\n  </span>\n</ng-container>\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: RemoveMarkdownPipe, name: "removeMarkdown" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: SchemaInfoComponent, selector: "he-schema-info", inputs: { type: "type", field: "field", content: "content", placement: "placement", triggers: "triggers", container: "container" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"contentString\">\n  <span\n    class=\"has-text-secondary\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement\"\n    [triggers]=\"triggers\"\n    [autoClose]=\"autoClose\"\n    [container]=\"container\">\n    <fa-icon icon=\"question-circle\" size=\"sm\"></fa-icon>\n  </span>\n</ng-container>\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: RemoveMarkdownPipe, name: "removeMarkdown" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SchemaInfoComponent, decorators: [{
             type: Component$1,
@@ -9734,7 +9794,7 @@ class FilesFormComponent {
         return this.propertyChanged(value, array);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: FilesFormComponent, deps: [{ token: i0.ElementRef }, { token: HeSearchService }, { token: HeUsersService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChanged: "nodeChanged", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span\n      *ngIf=\"nodeProperty\"\n      class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\">\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=\"py-4 pl-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\n  *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\"\n  [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm\n  *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    <he-schema-info\n      class=\"is-inline-block is-pl-1 is-align-middle\"\n      *ngIf=\"property.schema?.description\"\n      triggers=\"click\"\n      [content]=\"property.schema.description\"></he-schema-info>\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\n      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      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  property.schema?.description && editable && property.editable ? labelDescription : labelDefault;\n                  context: { $implicit: property }\n                \"></ng-container>\n            </label>\n          </div>\n        </ng-container>\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=\"property.hasError || property.hasWarning\">\n              <ng-container\n                *ngTemplateOutlet=\"propertyError; context: { property: property, edit: false }\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"panel\"\n        *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n        <div\n          class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\">\n          <div class=\"columns is-mobile is-vcentered is-multiline\">\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\n              class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\"\n              placement=\"top\"\n              [message]=\"\n                '<p>This will remove the group completely.</p>' +\n                (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                '<p>Do you confirm?</p>'\n              \"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\">\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\n                *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\" [id]=\"prop2.fullKey + '_' + prop2.id\">\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\n                          class=\"tag is-info\"\n                          pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                          placement=\"top\">\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span\n                          class=\"tag is-light\"\n                          pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\"\n                          placement=\"top\">\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span\n                          class=\"tag is-light\"\n                          pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\"\n                          placement=\"top\">\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm\n                          class=\"tag is-delete\"\n                          [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                          placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\"\n                          position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"></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\n                      *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 && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\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\n                  buttonClass=\"is-small\"\n                  [node]=\"node\"\n                  [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"></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 *ngIf=\"editable\">\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-container *ngIf=\"!editable\">\n      <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\"></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\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #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]=\"{\n          enabled: editable && property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\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        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\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\" *ngIf=\"!property.hasError && propertyModel.invalid\">\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\n        class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #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          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">\n              {{ value }}\n            </option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\" *ngIf=\"!property.hasError && propertyModel.invalid\">\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a\n      class=\"button is-small\"\n      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      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm\n      class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\">\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\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\" (click)=\"mapDrawingProperty = property\">\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\" (click)=\"bibliographiesSearchProperty = property\">\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\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\" ngbTooltip=\"This field is required\" placement=\"top\">\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\n          class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n          <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\n          class=\"button is-small\"\n          title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\"\n          autoClose=\"outside\"\n          triggers=\"manual\"\n          #p=\"ngbPopover\"\n          placement=\"bottom\"\n          container=\"body\"\n          (click)=\"openUnitConverter(p, property)\">\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\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\" (click)=\"setUserActorId(property)\">\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\n      class=\"button is-small\"\n      title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\">\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button\n      class=\"button is-small\"\n      title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header\n    class=\"card-header\"\n    *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\" *bindOnce=\"property\">\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\n                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                [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\" />\n            </div>\n            <div class=\"control\">\n              <button\n                class=\"button is-small\"\n                type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\">\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\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\" *ngIf=\"property.error\">\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\" *ngIf=\"edit && errorsEditable && property.error.index >= 0\" (click)=\"editError(property)\">\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a\n      class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\">\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\" (click)=\"mapVisible = !mapVisible\" pointer [class.is-open]=\"mapVisible\">\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\n          class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"></textarea>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\">\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\" [(ngModel)]=\"data.message\" placeholder=\"Enter your message here\" />\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\"></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-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: FilesFormComponent, selector: "he-files-form", inputs: { schemas: "schemas", errors: "errors", node: "node", nodeMap: "nodeMap", editable: "editable", errorMode: "errorMode", deepEditable: "deepEditable", errorsEditable: "errorsEditable", showSuggestedDefaultProperties: "showSuggestedDefaultProperties" }, outputs: { nodeChanged: "nodeChanged", nodeErorrResolved: "nodeErorrResolved", nodeErrorAdded: "nodeErrorAdded" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen = !isOpen\" pointer>\n    <fa-icon icon=\"angle-down\" [class.is-hidden]=\"!isOpen\"></fa-icon>\n    <fa-icon icon=\"angle-right\" [class.is-hidden]=\"isOpen\"></fa-icon>\n    <span\n      *ngIf=\"nodeProperty\"\n      class=\"is-px-2\"\n      [class.has-text-danger]=\"nodeProperty.hasError\"\n      [class.has-text-warning]=\"nodeProperty.hasWarning\">\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=\"py-4 pl-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\n  *ngIf=\"!!mapDrawingProperty\"\n  [value]=\"mapDrawingProperty.value\"\n  [modes]=\"mapDrawingModes(mapDrawingProperty)\"\n  (closed)=\"onMapDrawingClosed($event)\"></he-maps-drawing-confirm>\n\n<he-bibliographies-search-confirm\n  *ngIf=\"!!bibliographiesSearchProperty\"\n  [search]=\"bibliographiesSearchProperty.value\"\n  [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty)\"\n  [searchSources]=\"bibliographiesSearchSources\"\n  (closed)=\"onBibliographiesSearchClosed($event)\"></he-bibliographies-search-confirm>\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    <he-schema-info\n      class=\"is-inline-block is-pl-1 is-align-middle\"\n      *ngIf=\"property.schema?.description\"\n      triggers=\"click\"\n      [content]=\"property.schema.description\"></he-schema-info>\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\n      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      <div class=\"columns is-multiline is-variable is-1\" *ngSwitchCase=\"false\">\n        <ng-container *bindOnce=\"property\">\n          <div class=\"column is-3 py-1\" *ngIf=\"property.key\">\n            <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  property.schema?.description && editable && property.editable ? labelDescription : labelDefault;\n                  context: { $implicit: property }\n                \"></ng-container>\n            </label>\n          </div>\n        </ng-container>\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=\"property.hasError || property.hasWarning\">\n              <ng-container\n                *ngTemplateOutlet=\"propertyError; context: { property: property, edit: false }\"></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=\"panel\"\n        *ngSwitchCase=\"true\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n        <div\n          class=\"open-group panel-heading py-0\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.has-text-white]=\"(errorMode && property.changed) || property.hasError || property.hasWarning\">\n          <div class=\"columns is-mobile is-vcentered is-multiline\">\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\n              class=\"column is-narrow py-1 my-0 px-0\"\n              *ngIf=\"editable && !errorsEditable\"\n              ngbTooltip=\"Remove group\"\n              placement=\"top\"\n              [message]=\"\n                '<p>This will remove the group completely.</p>' +\n                (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                '<p>Do you confirm?</p>'\n              \"\n              popoverClass=\"px-3\"\n              (confirmed)=\"propertyChanged(null, property)\">\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\n                *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\" [id]=\"prop2.fullKey + '_' + prop2.id\">\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\n                          class=\"tag is-info\"\n                          pointer\n                          (click)=\"duplicateArrayGroup(property, prop2)\"\n                          [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                          placement=\"top\">\n                          <fa-icon icon=\"clone\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span\n                          class=\"tag is-light\"\n                          pointer\n                          *ngIf=\"prop2.key !== '0'\"\n                          (click)=\"moveArrayGroupUp(property, prop2)\"\n                          ngbTooltip=\"Move Up\"\n                          placement=\"top\">\n                          <fa-icon icon=\"long-arrow-alt-up\" size=\"sm\"></fa-icon>\n                        </span>\n                        <span\n                          class=\"tag is-light\"\n                          pointer\n                          *ngIf=\"prop2.key !== property.properties.length - 1\"\n                          (click)=\"moveArrayGroupDown(property, prop2)\"\n                          ngbTooltip=\"Move Down\"\n                          placement=\"top\">\n                          <fa-icon icon=\"long-arrow-alt-down\" size=\"sm\"></fa-icon>\n                        </span>\n                        <he-popover-confirm\n                          class=\"tag is-delete\"\n                          [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                          placement=\"top\"\n                          message=\"This will remove the group completely. Do you confirm?\"\n                          position=\"right\"\n                          (confirmed)=\"removeArrayGroup(property, prop2)\"></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\n                      *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 && property.editable\">\n                <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\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\n                  buttonClass=\"is-small\"\n                  [node]=\"node\"\n                  [nodeField]=\"property.key\"\n                  (selectRecommendation)=\"onSelectRecommendation(property, $event)\"></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 *ngIf=\"editable\">\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-container *ngIf=\"!editable\">\n      <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\"></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\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #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]=\"{\n          enabled: editable && property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\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        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"editable && property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\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\" *ngIf=\"!property.hasError && propertyModel.invalid\">\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\n        class=\"select is-small is-fullwidth\"\n        [class.is-secondary]=\"errorMode && property.changed\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #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          <option value=\"\">Select</option>\n          <ng-container *bindOnce=\"property.suggestions\">\n            <option *ngFor=\"let value of property.suggestions.values; trackBy: trackByIndex\" [value]=\"value\">\n              {{ value }}\n            </option>\n          </ng-container>\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\"></ng-container>\n  </div>\n  <p class=\"help is-danger-light\" *ngIf=\"!property.hasError && propertyModel.invalid\">\n    <span *bindOnce=\"propertyModel.errors\" [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n  </p>\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  <div class=\"control\" *ngIf=\"!errorsEditable && !property.isRequired\">\n    <a\n      class=\"button is-small\"\n      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      <fa-icon icon=\"times\"></fa-icon>\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  <ng-container *bindOnce=\"property\">\n    <he-popover-confirm\n      class=\"control\"\n      *ngIf=\"enableAddError(property)\"\n      position=\"left\"\n      [content]=\"popupErrorForm\"\n      (confirmed)=\"addError(property, $event)\">\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\n      <div class=\"control\" *ngIf=\"mapDrawingModes(property).length\">\n        <button class=\"button is-small\" title=\"Pick on Map\" (click)=\"mapDrawingProperty = property\">\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\" (click)=\"bibliographiesSearchProperty = property\">\n          <fa-icon icon=\"search\"></fa-icon>\n        </button>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\"></ng-container>\n    </ng-container>\n\n    <div class=\"control\" *ngIf=\"addPropertyEnabled(property)\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\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\" ngbTooltip=\"This field is required\" placement=\"top\">\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\n          class=\"button is-small\"\n          [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n          target=\"_blank\"\n          [title]=\"property.externalUrl.title\"\n          [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n          [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n          <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\n          class=\"button is-small\"\n          title=\"Open calculator\"\n          [ngbPopover]=\"convertUnits\"\n          autoClose=\"outside\"\n          triggers=\"manual\"\n          #p=\"ngbPopover\"\n          placement=\"bottom\"\n          container=\"body\"\n          (click)=\"openUnitConverter(p, property)\">\n          <fa-icon icon=\"calculator\"></fa-icon>\n        </button>\n      </div>\n    </ng-container>\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\" (click)=\"setUserActorId(property)\">\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\n      class=\"button is-small\"\n      title=\"Calculate value from startDate and endDate\"\n      (click)=\"calculateCycleDuration(property)\"\n      [disabled]=\"!calculateCycleDurationEnabled(property)\">\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n  <div class=\"control\" *ngIf=\"property.key === 'startDate'\">\n    <button\n      class=\"button is-small\"\n      title=\"Calculate value from endDate and cycleDuration\"\n      (click)=\"calculateCycleStartDate(property)\"\n      [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n      <fa-icon icon=\"calculator\"></fa-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  <header\n    class=\"card-header\"\n    *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\" *bindOnce=\"property\">\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\n                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                [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                [resultTemplate]=\"suggestion\"\n                [inputFormatter]=\"formatNewProperty\"\n                [focusFirst]=\"false\"\n                [editable]=\"false\"\n                (focus)=\"typeaheadFocus($event)\" />\n            </div>\n            <div class=\"control\">\n              <button\n                class=\"button is-small\"\n                type=\"submit\"\n                [disabled]=\"!property.newProperty || !property.newProperty.name\">\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\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\" *ngIf=\"property.error\">\n    <span class=\"is-pre-wrap\" *bindOnce=\"property.error\" [innerHTML]=\"property.error.message\"></span>\n    <a class=\"pl-2\" *ngIf=\"edit && errorsEditable && property.error.index >= 0\" (click)=\"editError(property)\">\n      <fa-icon class=\"pr-2\" icon=\"edit\"></fa-icon>\n      <span>Edit</span>\n    </a>\n    <a\n      class=\"pl-2\"\n      *ngIf=\"(property.hasWarning || errorsEditable) && property.error.index >= 0\"\n      (click)=\"resolveError(property)\">\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\" (click)=\"mapVisible = !mapVisible\" pointer [class.is-open]=\"mapVisible\">\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\n          class=\"textarea is-small\"\n          [(ngModel)]=\"property.newError.message\"\n          placeholder=\"Enter your message here\"\n          rows=\"1\"></textarea>\n      </div>\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [disabled]=\"!property.newError.level || !property.newError.message\"\n          (click)=\"addError(property, property.newError)\">\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\" [(ngModel)]=\"data.message\" placeholder=\"Enter your message here\" />\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\"></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-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(54,54,54,.32)}.control>.button{height:100%}.is-danger-light{color:#f5758f}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: MapsDrawingConfirmComponent, selector: "he-maps-drawing-confirm", inputs: ["value", "modes", "center", "zoom"], outputs: ["closed"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass", "text"] }, { kind: "component", type: UnitConverterComponent, selector: "he-unit-converter", inputs: ["term", "value", "fromUnits", "toUnits"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["closed"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "nodes", "center", "zoom", "showNotice"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -9878,7 +9938,7 @@ class FilesUploadErrorsComponent {
         return this.error?.node && this.isJSONFile;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: FilesUploadErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: FilesUploadErrorsComponent, selector: "he-files-upload-errors", inputs: { file: "file", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>\n        Please validate your JSON content before uploading it using an\n        <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n        for example.\n      </p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>No Nodes could be found in your Upload. Please verify the column headers match the Hestia schema.</p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>You have column headers that do not match the Hestia schema.</span>\n          <span class=\"px-1\">Please refer to the</span>\n          <a [href]=\"schemaUrl\" target=\"_blank\">schema</a>\n          <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n        </p>\n\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>\n          The following value in the column\n          <i>{{ error.key }}</i>\n          is not in the correct format:\n        </span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"true\">\n          <p class=\"is-mt-2\">\n            Please format your numbers to remove commas and use a decimal point to separate the whole part of the number\n            from the fractional part of the number.\n          </p>\n\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>\n            If you are trying to set no data, we accept either\n            <code>-</code>\n            or an empty cell.\n          </p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{ error.schema }}</a>\n        <span>schema:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">\n          You must assign a unique\n          <code>id</code>\n          for every record in your data.\n        </span>\n        <span *ngSwitchCase=\"'type'\">\n          Every record in your data must contain a\n          <code>type</code>\n          .\n        </span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">\n          The following field is\n          <code>internal</code>\n          in the\n        </span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schema }} schema</a>\n        <span>:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.schemaKey || error.key}}</code></pre>\n      </div>\n      <p>\n        You cannot upload\n        <code>internal</code>\n        fields to Hestia.\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.SchemaNotFound\">\n      <div class=\"is-mb-2\">\n        <span>The following Node does not exist in the schema:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.key}}</code></pre>\n      </div>\n      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\">\n            <i>{{ type }}</i>\n          </li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{ UploadLimit[error.schema] }}</code>\n        <span>\n          {{ error.schema }} in a single file (\n          <b>{{ error.value }}</b>\n          have been found).\n        </span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{ UploadLimit[error.schema] }}</code>\n        <span>{{ error.schema }} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet. Either try selecting a different sheet in the\n        upload screen, or check the sheet to ensure the headers follow the schema - see examples\n      </span>\n      <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row. Please remove all empty rows at the begining\n        of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The Excel sheet</span>\n        <code>{{ error.value }}</code>\n        <span class=\"pl-1\">does not exist.</span>\n        <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{ e }}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <div>\n        <span class=\"is-pr-1\">You have multiple</span>\n        <code>{{ error.schema | pluralize }}</code>\n        <span class=\"is-px-1\">with the same</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-px-1\">but different data. The</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-pl-1\">is:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n      </div>\n\n      <p class=\"is-mt-2 is-italic\">\n        <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-pl-1\">unique.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.DuplicatedIdFields\">\n      <span class=\"is-pr-1\">You have used both the</span>\n      <code>@id</code>\n      <span class=\"is-px-1\">and</span>\n      <code>id</code>\n      <span class=\"is-px-1\">fields in the same data. Please use</span>\n      <code>@id</code>\n      <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n      <code>id</code>\n      <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n      <code>id</code>\n      <span class=\"is-px-1\">field.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g.,\n        <code>source.id</code>\n        ,\n        <code>source.bibliography.title</code>\n        ) and then create the link (e.g.,\n        <code>cycle.defaultSource.id</code>\n        ). We do not allow nesting (e.g.,\n        <code>cycle.defaultSource.bibliography.title</code>\n        ).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>\n        You have used the internal\n        <code>@id</code>\n        field to upload a new Node.\n      </p>\n      <p>\n        The\n        <code>@id</code>\n        field should only be used to reference existing Node or Terms. Example:\n      </p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\n      <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n      <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.ObjectArrayInvalid\">\n      <p>The values in the column {{ error.key }} must be represented as arrays.</p>\n\n      <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n      <p>Examples:</p>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.0.term.name</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.0.value</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.1.term.name</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.1.value</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\n      <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error.value }}Mb).</span>\n      <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>\n        Your file has {{ error.value | number }} rows. This might be an error caused by adding some data at the bottom\n        of a spreadsheet by accident: delete any unused rows and resubmit the file.\n      </span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\n      <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n      <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n        <li>\n          <span class=\"is-pr-1\">Go to</span>\n          <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n        </li>\n        <li>\n          <span>\n            Save the boundary in a valid\n            <code>.geojson</code>\n            file.\n          </span>\n        </li>\n        <li>\n          <span>Import it on mapshaper.</span>\n        </li>\n        <li>\n          <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n        </li>\n        <li>\n          <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n        </li>\n        <li>\n          <span>\n            Export to\n            <code>GeoJson</code>\n            or\n            <code>CSV</code>\n            .\n          </span>\n        </li>\n        <li>\n          <span>Copy the resulting content into your upload file.</span>\n        </li>\n      </ul>\n      <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{ error.index }}</span>\n      <ng-container *ngIf=\"columns.length\">\n        <span class=\"pl-1\">in {{ 'column' | pluralize: columns.length }}:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{ column.column }}</b>\n            <code>{{ column.name }}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\n      <b>Suggestions:</b>\n      <span class=\"pl-1\">did you mean instead:</span>\n      <ul class=\"mt-1 content is-list-style-disc pl-5\">\n        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{ suggestion }}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>\n        Preview\n        <sup>1</sup>\n        :\n      </b>\n      <div class=\"table-container is-mt-2\">\n        <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n          <thead>\n            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{ header }}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{ error.index }}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"\n                      error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                    \">\n                    {{ col | ellipsis: 50 }}\n                  </span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\">\n        <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n      </p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: FilesUploadErrorsComponent, selector: "he-files-upload-errors", inputs: { file: "file", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"!!error\">\n  <div class=\"has-text-danger\" [ngSwitch]=\"error?.message\">\n    <div *ngSwitchCase=\"ErrorKeys.InvalidJSON\">\n      <p>The uploaded content does not appear to contain valid JSON data:</p>\n\n      <div class=\"is-mt-2\">\n        <pre><code>{{error.error}}</code></pre>\n      </div>\n\n      <p>\n        Please validate your JSON content before uploading it using an\n        <a href=\"https://jsoneditoronline.org\" target=\"_blank\">online tool</a>\n        for example.\n      </p>\n    </div>\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoData\">\n      <p>No Nodes could be found in your Upload. Please verify the column headers match the Hestia schema.</p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.PropertyNotFound\">\n      <div class=\"notification is-danger\" role=\"alert\">\n        <p>\n          <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n          <span>You have column headers that do not match the Hestia schema.</span>\n          <span class=\"px-1\">Please refer to the</span>\n          <a [href]=\"schemaUrl\" target=\"_blank\">schema</a>\n          <span class=\"pl-1\">and then correct the column headers indicated below.</span>\n        </p>\n\n        <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n      </div>\n\n      <div class=\"is-mb-2\">\n        <pre><code>{{error.key}}</code></pre>\n      </div>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.PropertyInvalidFormat\">\n      <div class=\"is-mb-2\">\n        <span>\n          The following value in the column\n          <i>{{ error.key }}</i>\n          is not in the correct format:\n        </span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{stringify(error.value)}}</code></pre>\n      </div>\n      <ng-container [ngSwitch]=\"hasNumberWithCommasError\">\n        <ng-container *ngSwitchCase=\"true\">\n          <p class=\"is-mt-2\">\n            Please format your numbers to remove commas and use a decimal point to separate the whole part of the number\n            from the fractional part of the number.\n          </p>\n\n          <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n          <pre class=\"is-mt-2\"><code>3,510.1</code></pre>\n\n          <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n          <pre class=\"is-mt-2\"><code>3510.1</code></pre>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"false\">\n          <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n          <p>The error could either be a value in the column, or an error with the column header.</p>\n          <p>\n            If you are trying to set no data, we accept either\n            <code>-</code>\n            or an empty cell.\n          </p>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyRequired\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The following field is required in the</span>\n        <a class=\"pr-1\" *ngIf=\"error.schema\" [href]=\"schemaUrl\" target=\"_blank\">{{ error.schema }}</a>\n        <span>schema:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.property}}</code></pre>\n      </div>\n      <p [ngSwitch]=\"error.property\">\n        <span *ngSwitchCase=\"'id'\">\n          You must assign a unique\n          <code>id</code>\n          for every record in your data.\n        </span>\n        <span *ngSwitchCase=\"'type'\">\n          Every record in your data must contain a\n          <code>type</code>\n          .\n        </span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.PropertyInternal\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">\n          The following field is\n          <code>internal</code>\n          in the\n        </span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schema }} schema</a>\n        <span>:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.schemaKey || error.key}}</code></pre>\n      </div>\n      <p>\n        You cannot upload\n        <code>internal</code>\n        fields to Hestia.\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.SchemaNotFound\">\n      <div class=\"is-mb-2\">\n        <span>The following Node does not exist in the schema:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.key}}</code></pre>\n      </div>\n      <p>\n        <span>The list of accepted values is:</span>\n      </p>\n      <div class=\"content\">\n        <ul>\n          <li *ngFor=\"let type of nodeTypes\">\n            <i>{{ type }}</i>\n          </li>\n        </ul>\n      </div>\n    </div>\n\n    <ng-container *ngSwitchCase=\"ErrorKeys.UploadsLimit\">\n      <div class=\"is-mb-2\">\n        <span>You have reached the upload limit of</span>\n        <code class=\"mx-1\">{{ UploadLimit[error.schema] }}</code>\n        <span>\n          {{ error.schema }} in a single file (\n          <b>{{ error.value }}</b>\n          have been found).\n        </span>\n      </div>\n\n      <p>\n        <span>Please re-upload these data in multiple files with a maximum of</span>\n        <code class=\"mx-1\">{{ UploadLimit[error.schema] }}</code>\n        <span>{{ error.schema }} in each file.</span>\n      </p>\n    </ng-container>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidFirstColumn\">\n      <span>\n        No data in the Hestia format was detected on the first sheet. Either try selecting a different sheet in the\n        upload screen, or check the sheet to ensure the headers follow the schema - see examples\n      </span>\n      <a class=\"pl-1\" routerLink=\"/upload\" fragment=\"example\">here</a>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NoHeaders\">\n      <p>\n        No headers matching the Hestia schema were found on the first row. Please remove all empty rows at the begining\n        of the file and try uploading again.\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"defaultError\"></ng-container>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.InvalidSheetName\">\n      <div class=\"is-mb-2\">\n        <span class=\"pr-1\">The Excel sheet</span>\n        <code>{{ error.value }}</code>\n        <span class=\"pl-1\">does not exist.</span>\n        <span class=\"pl-1\">Your Excel file contains the following sheets:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let e of error.error.split(';')\">\n            <code>{{ e }}</code>\n          </li>\n        </ul>\n      </div>\n\n      <p>\n        <span>Please re-upload selecting one of the sheets above.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedHeaders\">\n      <span>Your upload contains duplicated column headers.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.DuplicatedIds\">\n      <div>\n        <span class=\"is-pr-1\">You have multiple</span>\n        <code>{{ error.schema | pluralize }}</code>\n        <span class=\"is-px-1\">with the same</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-px-1\">but different data. The</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-pl-1\">is:</span>\n        <br />\n        <pre class=\"is-mt-2\"><code>{{error.value}}</code></pre>\n      </div>\n\n      <p class=\"is-mt-2 is-italic\">\n        <span class=\"is-pr-1\">Please note that ussing different case does not make the</span>\n        <a [href]=\"schemaKeyUrl\" target=\"_blank\">{{ error.schemaKey }}</a>\n        <span class=\"is-pl-1\">unique.</span>\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.DuplicatedIdFields\">\n      <span class=\"is-pr-1\">You have used both the</span>\n      <code>@id</code>\n      <span class=\"is-px-1\">and</span>\n      <code>id</code>\n      <span class=\"is-px-1\">fields in the same data. Please use</span>\n      <code>@id</code>\n      <span class=\"is-px-1\">when linking to existing nodes on the Platform, and</span>\n      <code>id</code>\n      <span class=\"is-px-1\">when linking to nodes you are uploading in this file using the same</span>\n      <code>id</code>\n      <span class=\"is-px-1\">field.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.NestedHeaders\">\n      <p>\n        To link nodes together, you first need to define the node (e.g.,\n        <code>source.id</code>\n        ,\n        <code>source.bibliography.title</code>\n        ) and then create the link (e.g.,\n        <code>cycle.defaultSource.id</code>\n        ). We do not allow nesting (e.g.,\n        <code>cycle.defaultSource.bibliography.title</code>\n        ).\n      </p>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.ReferenceExistingHeaders\">\n      <p>\n        You have used the internal\n        <code>@id</code>\n        field to upload a new Node.\n      </p>\n      <p>\n        The\n        <code>@id</code>\n        field should only be used to reference existing Node or Terms. Example:\n      </p>\n\n      <p class=\"is-mt-2 has-text-danger has-text-underline\">Incorrect:</p>\n      <pre class=\"is-mt-2\"><code>cycle.@id,cycle.inputs.0.term.@id,source.id</code></pre>\n\n      <p class=\"is-mt-2 has-text-success has-text-underline\">Correct:</p>\n      <pre class=\"is-mt-2\"><code>cycle.id,cycle.inputs.0.term.@id,source.id</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"SchemaErrorKeys.ObjectArrayInvalid\">\n      <p>The values in the column {{ error.key }} must be represented as arrays.</p>\n\n      <ng-container *ngTemplateOutlet=\"schemaError\"></ng-container>\n\n      <p>Examples:</p>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.0.term.name</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.0.value</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.1.term.name</code></pre>\n      <pre class=\"is-mt-2\"><code>{{error.key}}.1.value</code></pre>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxSize\">\n      <span>The maximum file size limit is {{ maxFileSizeMb }}Mb (current file size: {{ error.value }}Mb).</span>\n      <span class=\"pl-1\">Please re-upload these data in multiple files.</span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngSwitchCase=\"ErrorKeys.MaxRows\">\n      <span>\n        Your file has {{ error.value | number }} rows. This might be an error caused by adding some data at the bottom\n        of a spreadsheet by accident: delete any unused rows and resubmit the file.\n      </span>\n    </div>\n\n    <div class=\"is-mb-2\" *ngIf=\"hasGeoJSONError\">\n      <p>If the GeoJSON is too large, please try to simplify it following these steps:</p>\n      <ul class=\"is-my-1 content is-list-style-decimal pl-5\">\n        <li>\n          <span class=\"is-pr-1\">Go to</span>\n          <a href=\"https://mapshaper.org/\" target=\"_blank\">https://mapshaper.org/</a>\n        </li>\n        <li>\n          <span>\n            Save the boundary in a valid\n            <code>.geojson</code>\n            file.\n          </span>\n        </li>\n        <li>\n          <span>Import it on mapshaper.</span>\n        </li>\n        <li>\n          <span>Click \"Simplify\" in the top right corner in the menu bar.</span>\n        </li>\n        <li>\n          <span>Adjust the percentage to a lower value, like 50% to start with.</span>\n        </li>\n        <li>\n          <span>\n            Export to\n            <code>GeoJson</code>\n            or\n            <code>CSV</code>\n            .\n          </span>\n        </li>\n        <li>\n          <span>Copy the resulting content into your upload file.</span>\n        </li>\n      </ul>\n      <p>If you encounter the error again, try again using a lower percentage at step 5.</p>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"columns.length || (error.index && !isSchemaError)\">\n      <b>Hint:</b>\n      <span class=\"pl-1\">the error might be located</span>\n      <span class=\"pl-1\" *ngIf=\"error.index && !isSchemaError\">on row {{ error.index }}</span>\n      <ng-container *ngIf=\"columns.length\">\n        <span class=\"pl-1\">in {{ 'column' | pluralize: columns.length }}:</span>\n        <ul class=\"mt-1 content is-list-style-disc pl-5\">\n          <li *ngFor=\"let column of columns\">\n            <b class=\"pr-2\">{{ column.column }}</b>\n            <code>{{ column.name }}</code>\n          </li>\n        </ul>\n      </ng-container>\n    </div>\n\n    <div class=\"my-3\" *ngIf=\"error.suggestions?.length\">\n      <b>Suggestions:</b>\n      <span class=\"pl-1\">did you mean instead:</span>\n      <ul class=\"mt-1 content is-list-style-disc pl-5\">\n        <li *ngFor=\"let suggestion of error.suggestions\">\n          <code>{{ suggestion }}</code>\n        </li>\n      </ul>\n    </div>\n\n    <div *ngIf=\"showCsvPreview\" class=\"is-my-2\">\n      <b>\n        Preview\n        <sup>1</sup>\n        :\n      </b>\n      <div class=\"table-container is-mt-2\">\n        <table class=\"table is-bordered is-fullwidth is-hoverable is-narrow mb-0\">\n          <thead>\n            <th *ngIf=\"error.index\"></th>\n            <th *ngFor=\"let header of headers\">{{ header }}</th>\n          </thead>\n          <tbody>\n            <ng-container *bindOnce=\"rows\">\n              <tr *ngFor=\"let row of rows\">\n                <td class=\"has-text-danger\" *ngIf=\"error.index\">\n                  <span class=\"is-nowrap\">Row {{ error.index }}</span>\n                </td>\n                <td *ngFor=\"let col of row; let colIndex = index\">\n                  <span\n                    [class.has-text-danger]=\"\n                      error?.message === ErrorKeys.DuplicatedIds && hasDuplicatedError(col, colIndex)\n                    \">\n                    {{ col | ellipsis: 50 }}\n                  </span>\n                </td>\n              </tr>\n            </ng-container>\n          </tbody>\n        </table>\n      </div>\n      <p class=\"is-size-7\">\n        <i>1. The preview does not necessarily reflect the original Upload's order or content.</i>\n      </p>\n    </div>\n\n    <div *ngIf=\"showJsonPreview\" class=\"is-my-2\">\n      <b>Preview:</b>\n      <pre class=\"is-mt-2\"><code>{{stringify(error.node)}}</code></pre>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #defaultError>\n  <p class=\"is-mt-2 has-text-black\">\n    <span class=\"is-pr-1\">If you are still stuck, please see</span>\n    <a [href]=\"baseUrl + '/upload#example'\" target=\"_blank\">the example uploads and videos</a>\n    <span class=\"is-px-1\">\n      or try using the Wizard to get the first few rows of data formatted correctly, or use the chat to ask for help.\n    </span>\n  </p>\n</ng-template>\n\n<ng-template #schemaError>\n  <p>\n    <span class=\"pr-1\">You can see the accepted field type and some examples</span>\n    <a [href]=\"schemaKeyUrl\" target=\"_blank\">here</a>\n    <span>.</span>\n  </p>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: FilesUploadErrorsComponent, decorators: [{
             type: Component$1,
@@ -9938,7 +9998,7 @@ class HeGlossaryService {
     migrations(format = GlossaryMigrationFormat.json) {
         return this.http.get(migrationsUrl(format)).toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeGlossaryService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeGlossaryService, deps: [{ token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeGlossaryService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: HeGlossaryService, decorators: [{
@@ -9946,7 +10006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }]; } });
 
 var ChartNodeType;
 (function (ChartNodeType) {
@@ -10691,7 +10751,7 @@ class ImpactAssessmentsGraphComponent {
         this.updateChart({ switchingSelection });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [{ token: i0.NgZone }, { token: HeSearchService }, { token: HeNodeService }, { token: HeEngineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div\n            class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{ legendItem.mobileText }}</span>\n              <span class=\"is-hidden-touch\">{{ legendItem.text }}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">\n            Calculations are not up to date. Some terms may not display correctly.\n          </span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div\n  [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\"\n  class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n  <span\n    class=\"is-hidden\"\n    [ngbPopover]=\"tipContent\"\n    triggers=\"manual\"\n    placement=\"right left auto\"\n    container=\"body\"\n    #t=\"ngbPopover\"\n    positionTarget=\".tip-target\"\n    popoverClass=\"is-narrow driver-chart-tooltip\"\n    [animation]=\"true\"></span>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n</ng-template>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  <p *ngIf=\"tipData.hasWeightedValue\">contribution: {{ tipData.weightedValueText }}</p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n    : {{ tipData.valueValueText }}\n    <a class=\"is-dark\" *ngIf=\"tipData.hasValue\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n      <span>Docs</span>\n      <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n    </a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    :\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">term</a>\n    :\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termValueHref\">{{ tipData.termValue }}</a>\n  </p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 767px){.key-label{font-size:calc(.9 * .8rem)}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsGraphComponent, selector: "he-impact-assessments-graph", inputs: { impactAssessments: "impactAssessments", dataState: "dataState" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else loader\">\n  <ng-container *ngIf=\"isRecalculated; else showSwitchRecalculated\">\n    <div class=\"field has-addons pt-2 px-3 mb-0\" *ngIf=\"filteredImpactAssessments.length > 1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedImpactAssessmentId\" (change)=\"reloadChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let value of filteredImpactAssessments\" [value]=\"value['@id']\">\n              {{ value.name || value['@id'] }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"!noData\" class=\"field has-addons py-2 px-3\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a model</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select [(ngModel)]=\"selectedModelId\" (change)=\"initChart()\" [disabled]=\"loading\">\n            <option *ngFor=\"let model of models\" [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"!noData && !showWarnings\">\n      <div class=\"columns is-centered py-2 is-size-7 is-mobile is-multiline\">\n        <ng-container *ngFor=\"let legendItem of legend\">\n          <div\n            class=\"column is-narrow py-0 is-flex-mobile is-flex-direction-column is-align-items-center is-legend-item\">\n            <span\n              class=\"key-colour is-inline-block-tablet is-align-middle\"\n              [style.backgroundColor]=\"nodeColours[legendItem.type]\"></span>\n            <strong class=\"has-text-black is-align-middle key-label is-pl-tablet-2\">\n              <span class=\"is-hidden-desktop\">{{ legendItem.mobileText }}</span>\n              <span class=\"is-hidden-touch\">{{ legendItem.text }}</span>\n            </strong>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n\n    <p *ngIf=\"error\" class=\"has-text-danger py-3\">\n      <ng-container [ngSwitch]=\"error\">\n        <p *ngSwitchCase=\"'not-found'\">Impact Assessment not found</p>\n        <div *ngSwitchDefault>\n          <span>An unexpected error occurred:</span>\n          <p class=\"mt-1\">{{ error }}</p>\n        </div>\n      </ng-container>\n    </p>\n\n    <div *ngIf=\"showWarnings\" class=\"has-text-warning py-3 has-text-centered\">\n      <p class=\"is-mb-2\" *ngFor=\"let warning of warnings\">\n        <fa-icon class=\"pr-2\" icon=\"exclamation-triangle\"></fa-icon>\n        <ng-container [ngSwitch]=\"warning\">\n          <span *ngSwitchCase=\"'missing-terms'\">\n            Calculations are not up to date. Some terms may not display correctly.\n          </span>\n        </ng-container>\n      </p>\n      <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings = false\">View chart anyway.</a></p>\n    </div>\n\n    <div *ngIf=\"noData\" class=\"py-3\">\n      <p class=\"has-text-centered\">No chart available.</p>\n    </div>\n  </ng-container>\n</ng-container>\n\n<div\n  [class.is-hidden]=\"!isRecalculated || loading || error || noData || showWarnings\"\n  class=\"chart-container is-relative w-100\">\n  <svg class=\"w-100 h-100\" #chart></svg>\n  <span\n    class=\"is-hidden\"\n    [ngbPopover]=\"tipContent\"\n    triggers=\"manual\"\n    placement=\"right left auto\"\n    container=\"body\"\n    #t=\"ngbPopover\"\n    positionTarget=\".tip-target\"\n    popoverClass=\"is-narrow driver-chart-tooltip\"\n    [animation]=\"true\"></span>\n</div>\n\n<ng-template #loader>\n  <div class=\"loading-container has-text-center my-5 py-5\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-template>\n\n<ng-template #showSwitchRecalculated>\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n</ng-template>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  <p *ngIf=\"tipData.hasWeightedValue\">contribution: {{ tipData.weightedValueText }}</p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n    : {{ tipData.valueValueText }}\n    <a class=\"is-dark\" *ngIf=\"tipData.hasValue\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n      <span>Docs</span>\n      <fa-icon class=\"ml-1\" icon=\"external-link-alt\" size=\"sm\"></fa-icon>\n    </a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    :\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">term</a>\n    :\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termValueHref\">{{ tipData.termValue }}</a>\n  </p>\n</ng-template>\n", styles: [".is-marginless{margin:0!important}.is-paddingless{padding:0!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:.75rem!important}.mt-3{margin-top:.75rem!important}.mr-3{margin-right:.75rem!important}.mb-3{margin-bottom:.75rem!important}.ml-3{margin-left:.75rem!important}.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}.my-3{margin-top:.75rem!important;margin-bottom:.75rem!important}.m-4{margin:1rem!important}.mt-4{margin-top:1rem!important}.mr-4{margin-right:1rem!important}.mb-4{margin-bottom:1rem!important}.ml-4{margin-left:1rem!important}.mx-4{margin-left:1rem!important;margin-right:1rem!important}.my-4{margin-top:1rem!important;margin-bottom:1rem!important}.m-5{margin:1.5rem!important}.mt-5{margin-top:1.5rem!important}.mr-5{margin-right:1.5rem!important}.mb-5{margin-bottom:1.5rem!important}.ml-5{margin-left:1.5rem!important}.mx-5{margin-left:1.5rem!important;margin-right:1.5rem!important}.my-5{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-6{margin:3rem!important}.mt-6{margin-top:3rem!important}.mr-6{margin-right:3rem!important}.mb-6{margin-bottom:3rem!important}.ml-6{margin-left:3rem!important}.mx-6{margin-left:3rem!important;margin-right:3rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:.75rem!important}.pt-3{padding-top:.75rem!important}.pr-3{padding-right:.75rem!important}.pb-3{padding-bottom:.75rem!important}.pl-3{padding-left:.75rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.p-4{padding:1rem!important}.pt-4{padding-top:1rem!important}.pr-4{padding-right:1rem!important}.pb-4{padding-bottom:1rem!important}.pl-4{padding-left:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-4{padding-top:1rem!important;padding-bottom:1rem!important}.p-5{padding:1.5rem!important}.pt-5{padding-top:1.5rem!important}.pr-5{padding-right:1.5rem!important}.pb-5{padding-bottom:1.5rem!important}.pl-5{padding-left:1.5rem!important}.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}.py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-6{padding:3rem!important}.pt-6{padding-top:3rem!important}.pr-6{padding-right:3rem!important}.pb-6{padding-bottom:3rem!important}.pl-6{padding-left:3rem!important}.px-6{padding-left:3rem!important;padding-right:3rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.p-auto{padding:auto!important}.pt-auto{padding-top:auto!important}.pr-auto{padding-right:auto!important}.pb-auto{padding-bottom:auto!important}.pl-auto{padding-left:auto!important}.px-auto{padding-left:auto!important;padding-right:auto!important}.py-auto{padding-top:auto!important;padding-bottom:auto!important}.key-colour{border-radius:2px;box-shadow:0 2px 3px #0000001a,inset 0 0 0 1px #0000001a;height:1.5em;width:1.5em;opacity:.7}@media screen and (max-width: 767px){.key-label{font-size:calc(.9 * .8rem)}}svg{pointer-events:none}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.loading-container{min-height:200px}:host ::ng-deep .node-box{rx:10px;ry:10px;fill-opacity:0;stroke-opacity:.5;pointer-events:auto}:host ::ng-deep .node-open{stroke-width:3}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:.1}:host ::ng-deep .node-openable:hover{stroke-width:3}:host ::ng-deep .group-button{fill:#fff;cursor:pointer;pointer-events:auto;stroke-dasharray:2,5;stroke:#999;stroke-width:2}:host ::ng-deep .group-button:hover{fill:#000}:host ::ng-deep .group-button:hover+text{fill:#fff}:host ::ng-deep .group-button-text{text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line{stroke-dasharray:2,5;stroke:#999;stroke-width:2;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#696969;text-anchor:start;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#000;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{font-weight:700;fill:#696969;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:10px;ry:10px;stroke-width:3;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#d3d3d3;fill-opacity:.5}:host ::ng-deep .link-path{fill:none;stroke:#999}:host ::ng-deep .bar-foreground{fill-opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
@@ -10802,7 +10862,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.ngZone.runOutsideAngular(() => this.initChart());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: { impactAssessments: "impactAssessments", key: "key", filterTermTypes: "filterTermTypes" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"!terms?.length\">\n  <div class=\"field has-addons pt-2 px-3\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n          <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-1\">\n    <div class=\"chart-container\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
@@ -10856,7 +10916,7 @@ class ImpactAssessmentsProductsLogsComponent {
             : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsProductsLogsComponent, deps: [{ token: HeSearchService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: { impactAssessment: "impactAssessment", key: "key", filterTermTypes: "filterTermTypes", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  [nodeKey]=\"key\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"terms\"\n  [filterTermTypes]=\"filterTermTypes\"\n  [noDataMessage]=\"noDataMessage\"></he-node-logs-models>\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: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: { impactAssessment: "impactAssessment", key: "key", filterTermTypes: "filterTermTypes", originalValues: "originalValues", recalculatedValues: "recalculatedValues" }, ngImport: i0, template: "<he-node-logs-models\n  *ngIf=\"!loading; else loader\"\n  [node]=\"node\"\n  [nodeKey]=\"key\"\n  [originalValues]=\"originalValues\"\n  [recalculatedValues]=\"recalculatedValues\"\n  [terms]=\"terms\"\n  [filterTermTypes]=\"filterTermTypes\"\n  [noDataMessage]=\"noDataMessage\"></he-node-logs-models>\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: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsProductsLogsComponent, decorators: [{
             type: Component$1,
@@ -11055,13 +11115,13 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
     updateChart() {
         this.ngZone.runOutsideAngular(() => this.initChart());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [{ token: i0.NgZone }, { token: i1$1.DomSanitizer }, { token: HeSearchService }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: "impactAssessment", indicators: "indicators" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{ term.name }}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a\n        class=\"button is-ghost is-small\"\n        [href]=\"csvContent\"\n        [download]=\"id + '-logs.csv'\"\n        nbgTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\"></fa-icon>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{ selectedTerm?.name }}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{ selectedMethod.name }})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [{ token: i0.NgZone }, { token: i1$2.DomSanitizer }, { token: HeSearchService }, { token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: "impactAssessment", indicators: "indicators" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{ term.name }}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a\n        class=\"button is-ghost is-small\"\n        [href]=\"csvContent\"\n        [download]=\"id + '-logs.csv'\"\n        nbgTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\"></fa-icon>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{ selectedTerm?.name }}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{ selectedMethod.name }})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', template: "<div class=\"p-3\" [class.is-hidden]=\"loading || !terms?.length\">\n  <div class=\"columns\">\n    <div class=\"column\">\n      <div class=\"field has-addons\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedTerm\" id=\"selectedTerm\">\n              <option *ngFor=\"let term of terms\" [ngValue]=\"term\">{{ term.name }} ({{ term.units }})</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"control is-expanded\" *ngIf=\"methods?.length\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select (change)=\"updateChart()\" [(ngModel)]=\"selectedMethod\" id=\"selectedMethod\">\n              <option [ngValue]=\"undefined\">Filter Model</option>\n              <option *ngFor=\"let term of methods\" [ngValue]=\"term\">{{ term.name }}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"column is-narrow\">\n      <a\n        class=\"button is-ghost is-small\"\n        [href]=\"csvContent\"\n        [download]=\"id + '-logs.csv'\"\n        nbgTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\"></fa-icon>\n      </a>\n    </div>\n  </div>\n\n  <p class=\"is-size-7\" *ngIf=\"!selectedMethod\">\n    <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n  </p>\n\n  <div class=\"mt-1\">\n    <p *ngIf=\"noData\" class=\"has-text-centered\">\n      <span>No breakdown available for {{ selectedTerm?.name }}</span>\n      <span class=\"pl-1\" *ngIf=\"selectedMethod\">({{ selectedMethod.name }})</span>\n      <span>.</span>\n    </p>\n    <div class=\"chart-container h-100\">\n      <canvas #chart></canvas>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"loading\">\n  <div class=\"has-text-center py-3\">\n    <fa-icon icon=\"spinner\" [pulse]=\"true\" size=\"lg\"></fa-icon>\n  </div>\n</ng-container>\n", styles: [":host{display:block;overflow:visible}.chart-container{height:400px;position:relative}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.DomSanitizer }, { type: HeSearchService }, { type: HeNodeService }]; }, propDecorators: { chartRef: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$2.DomSanitizer }, { type: HeSearchService }, { type: HeNodeService }]; }, propDecorators: { chartRef: [{
                 type: ViewChild,
                 args: ['chart']
             }], impactAssessment: [{
@@ -11194,7 +11254,7 @@ class ImpactAssessmentsProductsComponent {
         this.selectedView = View.logs;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [{ token: HeNodeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter indicators by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.breakdown\"\n          (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\" (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\">\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{ term.name }}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\" [attr.title]=\"indicator.value.term.name\">\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\" [attr.title]=\"indicator.value.term.units\">\n              <span [innerHtml]=\"indicator.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"indicator.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span>{{ i + 1 }}. {{ impactName(impactAssessment) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.term?.units\">\n                <span>1 {{ impactAssessment.product?.term?.units }}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.term?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product?.term\" [node]=\"impactAssessment.product.term\">\n                  <span>{{ impactAssessment.product.term.name | ellipsis: 30 }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span\n                  *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, {\n                      data: indicator.value.values[impactAssessment['@id']],\n                      impactAssessment: impactAssessment,\n                      key: key\n                    })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart\n  *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart\n  *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ impactName(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\"\n  [filename]=\"'impact-' + key + '.csv'\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span [class.is-hidden]=\"!isOriginal\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{ cycleLabel(node.cycle) }}</span>\n      <span *ngIf=\"!data.cycle\">{{ data.name }}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\">\n        <ngb-highlight [result]=\"impact.product.term?.name || impact.product.name\" [term]=\"t\"></ngb-highlight>\n      </span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.8", type: ImpactAssessmentsProductsComponent, selector: "he-impact-assessments-products", inputs: { cycles: "cycles", impactAssessments: "impactAssessments", key: "key", dataState: "dataState", filterTermTypes: "filterTermTypes", enableFilterMethodModel: "enableFilterMethodModel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    <ng-container *ngIf=\"selectedView === View.table && indicators.length\">\n      <button\n        class=\"button is-small is-ghost\"\n        (click)=\"showDownload = true\"\n        ngbTooltip=\"Download as CSV\"\n        placement=\"bottom\">\n        <fa-icon icon=\"download\" size=\"lg\"></fa-icon>\n      </button>\n    </ng-container>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"selectedView === View.table\">\n    <he-search-extend\n      class=\"is-secondary is-small\"\n      placeholder=\"Filter indicators by name\"\n      (search)=\"filter($event)\"></he-search-extend>\n  </div>\n  <div class=\"column is-narrow\" *ngIf=\"impactAssessments.length > 1 || enableBreakdown || !isOriginal\">\n    <div class=\"field has-addons\">\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.table\"\n          (click)=\"selectedView = View.table\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"list\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Table view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"impactAssessments.length > 1\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.chart\"\n          (click)=\"selectedView = View.chart\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Chart view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"enableBreakdown\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.breakdown\"\n          (click)=\"selectedView = View.breakdown\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"chart-bar\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Breakdown view</span>\n        </button>\n      </div>\n      <div class=\"control\" *ngIf=\"!isOriginal\">\n        <button\n          class=\"button is-small\"\n          [class.is-selected]=\"selectedView === View.logs\"\n          (click)=\"showRecalculationLogs()\">\n          <span class=\"icon is-small\">\n            <fa-icon icon=\"calculator\" aria-hidden=\"true\"></fa-icon>\n          </span>\n          <span class=\"is-hidden-mobile\">Recalculations logs</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"px-3 pb-3\" [class.is-hidden]=\"selectedView !== View.table\">\n  <ng-container *ngIf=\"hasData; else emptyTable\">\n    <he-data-table class=\"mb-1 is-small\" [small]=\"true\" maxHeight=\"320\">\n      <table class=\"table is-fullwidth is-narrow is-striped\">\n        <thead>\n          <tr class=\"has-text-weight-semibold\">\n            <th class=\"width-auto py-0\">\n              <div class=\"select is-small\" *ngIf=\"enableFilterMethodModel\">\n                <select name=\"selectedMethodModel\" (change)=\"updateImpacts()\" [(ngModel)]=\"selectedMethodModel\">\n                  <option [ngValue]=\"undefined\">Filter Model</option>\n                  <option *ngFor=\"let term of methodModels\" [ngValue]=\"term\">{{ term.name }}</option>\n                </select>\n              </div>\n            </th>\n            <th class=\"has-border-right\"></th>\n            <th class=\"has-border-right\"></th>\n            <th *ngFor=\"let indicator of indicators\" [attr.title]=\"indicator.value.term.name\">\n              <he-node-link [node]=\"indicator.value.term\">\n                <span [innerHtml]=\"indicator.value.term.name | ellipsis: 30 | compound\"></span>\n              </he-node-link>\n            </th>\n          </tr>\n          <tr class=\"is-italic has-text-weight-semibold\">\n            <th class=\"width-auto has-border-right\"></th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n            </th>\n            <th class=\"has-border-right\">\n              <a [href]=\"baseUrl + '/schema/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n            </th>\n            <th *ngFor=\"let indicator of indicators\" [attr.title]=\"indicator.value.term.units\">\n              <span [innerHtml]=\"indicator.value.term.units | compound\"></span>\n              <he-terms-units-description\n                class=\"is-inline-block is-ml-2\"\n                [term]=\"indicator.value.term\"></he-terms-units-description>\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let impactAssessment of impactAssessments; trackBy: trackById; let i = index\">\n            <tr>\n              <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                <he-node-link [node]=\"impactAssessment\">\n                  <span>{{ i + 1 }}. {{ impactName(impactAssessment) }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.term?.units\">\n                <span>1 {{ impactAssessment.product?.term?.units }}</span>\n              </td>\n              <td class=\"has-border-right\" [attr.title]=\"impactAssessment.product?.term?.name\">\n                <he-node-link *ngIf=\"impactAssessment.product?.term\" [node]=\"impactAssessment.product.term\">\n                  <span>{{ impactAssessment.product.term.name | ellipsis: 30 }}</span>\n                </he-node-link>\n              </td>\n              <td class=\"is-nowrap\" *ngFor=\"let indicator of indicators\">\n                <span\n                  *ngIf=\"indicator.value.values[impactAssessment['@id']]; else emptyValue\"\n                  class=\"trigger-popover\"\n                  [ngbPopover]=\"details\"\n                  [autoClose]=\"'outside'\"\n                  popoverClass=\"is-narrow\"\n                  triggers=\"manual\"\n                  #p=\"ngbPopover\"\n                  placement=\"left\"\n                  container=\"body\"\n                  (click)=\"\n                    togglePopover(p, {\n                      data: indicator.value.values[impactAssessment['@id']],\n                      impactAssessment: impactAssessment,\n                      key: key\n                    })\n                  \">\n                  <span pointer>\n                    {{\n                      propertyValue(indicator.value.values[impactAssessment['@id']].value, indicator.value.term['@id'])\n                        | precision: 3\n                        | default: '-'\n                    }}\n                  </span>\n                  <he-blank-node-state\n                    class=\"ml-1\"\n                    [dataState]=\"dataState\"\n                    [node]=\"indicator.value.values[impactAssessment['@id']].node\"\n                    key=\"value\"\n                    [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\"></he-blank-node-state>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </he-data-table>\n\n    <he-blank-node-state-notice [dataState]=\"dataState\"></he-blank-node-state-notice>\n  </ng-container>\n</div>\n\n<he-impact-assessments-indicator-breakdown-chart\n  *ngIf=\"selectedView === View.breakdown\"\n  [impactAssessment]=\"impactAssessments[0]\"\n  [indicators]=\"impactAssessments[0][key]\"></he-impact-assessments-indicator-breakdown-chart>\n\n<he-impact-assessments-indicators-chart\n  *ngIf=\"selectedView === View.chart && impactAssessments.length > 1\"\n  [key]=\"key\"\n  [impactAssessments]=\"impactAssessments\"\n  [filterTermTypes]=\"filterTermTypes\"></he-impact-assessments-indicators-chart>\n\n<ng-container *ngIf=\"selectedView === View.logs && !isOriginal\">\n  <div class=\"field has-addons pt-2 px-3\" *ngIf=\"impactAssessments.length > 1\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectIndex($event)\">\n          <option *ngFor=\"let value of impactAssessments; let i = index\" [value]=\"i\">\n            {{ i + 1 }}. {{ impactName(value) }}\n          </option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <he-impact-assessments-products-logs\n    *ngIf=\"selectedIndex >= 0\"\n    [key]=\"key\"\n    [impactAssessment]=\"impactAssessments[selectedIndex]\"\n    [filterTermTypes]=\"filterTermTypes\"\n    [originalValues]=\"originalValues[selectedIndex]?.[key]\"\n    [recalculatedValues]=\"impactAssessments[selectedIndex]?.[key]\"></he-impact-assessments-products-logs>\n</ng-container>\n\n<he-node-csv-export-confirm\n  *ngIf=\"showDownload\"\n  [nodes]=\"impactAssessments\"\n  [filename]=\"'impact-' + key + '.csv'\"\n  [isUpload]=\"false\"\n  [headerKeys]=\"['impactAssessment.id', 'impactAssessment.@id', 'impactAssessment.' + key + '.']\"\n  (closed)=\"showDownload = false\"></he-node-csv-export-confirm>\n\n<ng-template #emptyTable>\n  <div class=\"has-text-centered\">\n    <span>No data available</span>\n    <span class=\"is-pl-1\" [class.is-hidden]=\"!filterTerm\">matching your search criteria</span>\n    <span>.</span>\n    <span [class.is-hidden]=\"!isOriginal\">\n      Switch to\n      <code>recalculated</code>\n      version.\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\" let-key=\"key\">\n  <p *bindOnce=\"node\">\n    <b>\n      <span *ngIf=\"data.cycle\">{{ cycleLabel(node.cycle) }}</span>\n      <span *ngIf=\"!data.cycle\">{{ data.name }}</span>\n    </b>\n  </p>\n  <he-node-value-details\n    [data]=\"data\"\n    [dataState]=\"dataState\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\"></he-node-value-details>\n</ng-template>\n\n<ng-template #suggestion let-impact=\"result\" let-t=\"term\">\n  <div class=\"is-block\">\n    <ngb-highlight [result]=\"impact.name || impact.cycle.name\" [term]=\"t\"></ngb-highlight>\n  </div>\n  <div class=\"columns is-flex\">\n    <div class=\"column\" *ngIf=\"impact.country\">\n      <span class=\"pr-1 has-text-underline\">Country:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.country.name\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.product\">\n      <span class=\"pr-1 has-text-underline\">Product:</span>\n      <span class=\"is-inline-flex\">\n        <ngb-highlight [result]=\"impact.product.term?.name || impact.product.name\" [term]=\"t\"></ngb-highlight>\n      </span>\n    </div>\n    <div class=\"column\" *ngIf=\"impact.endDate\">\n      <span class=\"pr-1 has-text-underline\">Date:</span>\n      <span class=\"is-inline-flex\"><ngb-highlight [result]=\"impact.endDate\" [term]=\"t\"></ngb-highlight></span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fa-icon{display:inline-block;width:10px}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$1.NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: BindOnceDirective, selector: "[bindOnce]", inputs: ["bindOnce"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showAggregated", "showDeleted"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["search"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvExportConfirmComponent, selector: "he-node-csv-export-confirm", inputs: ["nodes", "filename", "headerKeys", "extension", "isUpload"], outputs: ["closed"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataKey", "dataState"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["impactAssessments", "key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsProductsLogsComponent, selector: "he-impact-assessments-products-logs", inputs: ["impactAssessment", "key", "filterTermTypes", "originalValues", "recalculatedValues"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -11582,7 +11642,7 @@ class SelectComponent extends ControlValueAccessor {
                 provide: SELECT_TOKEN,
                 useExisting: forwardRef(() => SelectComponent)
             }
-        ], queries: [{ propertyName: "nodes", predicate: NODE_ELEMENT_TOKEN, descendants: true }, { propertyName: "options", predicate: SELECT_OPTION_TOKEN, descendants: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #origin=\"cdkOverlayOrigin\" cdkOverlayOrigin>\n  <ng-container\n    *ngTemplateOutlet=\"\n      selectTemplate ?? defaultSelectTemplate;\n      context: {\n        $implicit: this,\n        value,\n        displayValue,\n        labelState,\n        icon,\n        placeholder,\n        searchPlaceholder,\n        width,\n        valueTemplate\n      }\n    \"></ng-container>\n</div>\n\n<ng-template\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOptions?.offsetX ?? -2\"\n  [cdkConnectedOverlayOffsetY]=\"overlayOptions?.offsetY ?? 4\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop', 'pointer-none']\"\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop>\n  <div [style.width]=\"width\" class=\"select-panel\" (clickOutside)=\"close()\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectTemplate>\n  <div class=\"select-host\">\n    <div class=\"control | is-flex is-justify-content-space-between is-align-items-center\">\n      <ng-container [ngSwitch]=\"labelState\">\n        <input\n          #input\n          (input)=\"onHandleInput($event)\"\n          *ngSwitchCase=\"'search'\"\n          [placeholder]=\"searchPlaceholder\"\n          class=\"select-search | is-transparent\" />\n\n        <ng-container *ngSwitchCase=\"'value'\">\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate ?? defaultValueTemplate; context: { $implicit: value }\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <span class=\"drop-down-icon ml-2\">\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultValueTemplate>\n  <span [ngClass]=\"{ empty: !value }\" class=\"selected-value\">{{ displayValue || placeholder }}</span>\n</ng-template>\n", styles: ["body.is-os-windows::-webkit-scrollbar,body.is-os-windows *::-webkit-scrollbar{border-radius:10px;height:10px;width:10px;border:none;background:transparent}body.is-os-windows::-webkit-scrollbar-button,body.is-os-windows *::-webkit-scrollbar-button{background:#dde1e6;color:#dde1e6}body.is-os-windows::-webkit-scrollbar-thumb,body.is-os-windows *::-webkit-scrollbar-thumb{border-radius:10px;background:#dde1e6}body.is-os-windows::-webkit-scrollbar-thumb:hover,body.is-os-windows *::-webkit-scrollbar-thumb:hover{background:#dde1e6}body.is-os-windows::-webkit-scrollbar-track,body.is-os-windows *::-webkit-scrollbar-track{border:none;background-color:transparent;background-repeat:no-repeat;background-image:url(https://cdn.hestia.earth/prod/assets/images/scrollbar-thumb.png);background-position:center}body.is-os-windows::-webkit-scrollbar-track:vertical,body.is-os-windows *::-webkit-scrollbar-track:vertical{background-repeat:repeat-y}body.is-os-windows::-webkit-scrollbar-track:horizontal,body.is-os-windows *::-webkit-scrollbar-track:horizontal{background-repeat:repeat-x}body.is-os-windows .is-dark::-webkit-scrollbar-button{background:#4c7194;color:#4c7194}body.is-os-windows .is-dark::-webkit-scrollbar-thumb{background:#4c7194}body.is-os-windows .is-dark::-webkit-scrollbar-thumb:hover{background:#4c7194}::ng-deep:root{--select-border-radius: 6px;--select-min-width: 250px;--select-shadow: rgba(0, 0, 0, .1) 0px 4px 6px -1px, rgba(0, 0, 0, .06) 0px 2px 4px -1px}.select-host{display:flex;justify-content:flex-start;flex-direction:column;padding:5px 10px;box-sizing:border-box;min-width:var(--select-min-width);border-radius:var(--select-border-radius);border:1px solid #f5f5f5;background:hsl(0,0%,100%);box-shadow:var(--select-shadow)}.select-host:hover{cursor:pointer;background-color:var(--color-background, #eceff1)}.select-host.select-panel-open{position:relative;z-index:1001;border-radius:var(--select-border-radius) var(--select-border-radius) 0 0;box-shadow:none}::ng-deep .is-disabled .select-host{pointer-events:none;-webkit-user-select:none;user-select:none;background:rgba(245,245,245,.5019607843);border-color:#dbdbdb;box-shadow:none;color:#dbdbdb}.select-search{border:none;outline:none;background:transparent}.select-panel{box-sizing:border-box;border-radius:0 0 var(--select-border-radius, 6px) var(--select-border-radius, 6px);border:1px solid #f5f5f5;background-color:#fff;transform-origin:top;max-height:350px;overflow:auto;box-shadow:var(--select-shadow)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodes", predicate: NODE_ELEMENT_TOKEN, descendants: true }, { propertyName: "options", predicate: SELECT_OPTION_TOKEN, descendants: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #origin=\"cdkOverlayOrigin\" cdkOverlayOrigin>\n  <ng-container\n    *ngTemplateOutlet=\"\n      selectTemplate ?? defaultSelectTemplate;\n      context: {\n        $implicit: this,\n        value,\n        displayValue,\n        labelState,\n        icon,\n        placeholder,\n        searchPlaceholder,\n        width,\n        valueTemplate\n      }\n    \"></ng-container>\n</div>\n\n<ng-template\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOptions?.offsetX ?? -2\"\n  [cdkConnectedOverlayOffsetY]=\"overlayOptions?.offsetY ?? 4\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop', 'pointer-none']\"\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop>\n  <div [style.width]=\"width\" class=\"select-panel\" (clickOutside)=\"close()\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectTemplate>\n  <div class=\"select-host\">\n    <div class=\"control | is-flex is-justify-content-space-between is-align-items-center\">\n      <ng-container [ngSwitch]=\"labelState\">\n        <input\n          #input\n          (input)=\"onHandleInput($event)\"\n          *ngSwitchCase=\"'search'\"\n          [placeholder]=\"searchPlaceholder\"\n          class=\"select-search | is-transparent\" />\n\n        <ng-container *ngSwitchCase=\"'value'\">\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate ?? defaultValueTemplate; context: { $implicit: value }\"></ng-container>\n        </ng-container>\n      </ng-container>\n\n      <span class=\"drop-down-icon ml-2\">\n        <fa-icon [icon]=\"icon\"></fa-icon>\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultValueTemplate>\n  <span [ngClass]=\"{ empty: !value }\" class=\"selected-value\">{{ displayValue || placeholder }}</span>\n</ng-template>\n", styles: ["body.is-os-windows::-webkit-scrollbar,body.is-os-windows *::-webkit-scrollbar{border-radius:10px;height:10px;width:10px;border:none;background:transparent}body.is-os-windows::-webkit-scrollbar-button,body.is-os-windows *::-webkit-scrollbar-button{background:#dde1e6;color:#dde1e6}body.is-os-windows::-webkit-scrollbar-thumb,body.is-os-windows *::-webkit-scrollbar-thumb{border-radius:10px;background:#dde1e6}body.is-os-windows::-webkit-scrollbar-thumb:hover,body.is-os-windows *::-webkit-scrollbar-thumb:hover{background:#dde1e6}body.is-os-windows::-webkit-scrollbar-track,body.is-os-windows *::-webkit-scrollbar-track{border:none;background-color:transparent;background-repeat:no-repeat;background-image:url(https://cdn.hestia.earth/prod/assets/images/scrollbar-thumb.png);background-position:center}body.is-os-windows::-webkit-scrollbar-track:vertical,body.is-os-windows *::-webkit-scrollbar-track:vertical{background-repeat:repeat-y}body.is-os-windows::-webkit-scrollbar-track:horizontal,body.is-os-windows *::-webkit-scrollbar-track:horizontal{background-repeat:repeat-x}body.is-os-windows .is-dark::-webkit-scrollbar-button{background:#4c7194;color:#4c7194}body.is-os-windows .is-dark::-webkit-scrollbar-thumb{background:#4c7194}body.is-os-windows .is-dark::-webkit-scrollbar-thumb:hover{background:#4c7194}::ng-deep:root{--select-border-radius: 6px;--select-min-width: 250px;--select-shadow: rgba(0, 0, 0, .1) 0px 4px 6px -1px, rgba(0, 0, 0, .06) 0px 2px 4px -1px}.select-host{display:flex;justify-content:flex-start;flex-direction:column;padding:5px 10px;box-sizing:border-box;min-width:var(--select-min-width);border-radius:var(--select-border-radius);border:1px solid #f5f5f5;background:hsl(0,0%,100%);box-shadow:var(--select-shadow)}.select-host:hover{cursor:pointer;background-color:var(--color-background, #eceff1)}.select-host.select-panel-open{position:relative;z-index:1001;border-radius:var(--select-border-radius) var(--select-border-radius) 0 0;box-shadow:none}::ng-deep .is-disabled .select-host{pointer-events:none;-webkit-user-select:none;user-select:none;background:rgba(245,245,245,.5019607843);border-color:#dbdbdb;box-shadow:none;color:#dbdbdb}.select-search{border:none;outline:none;background:transparent}.select-panel{box-sizing:border-box;border-radius:0 0 var(--select-border-radius, 6px) var(--select-border-radius, 6px);border:1px solid #f5f5f5;background-color:#fff;transform-origin:top;max-height:350px;overflow:auto;box-shadow:var(--select-shadow)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component$1,
@@ -11733,7 +11793,7 @@ class SelectOptionGroupComponent {
                 provide: OPTION_GROUP_TOKEN,
                 useExisting: forwardRef(() => SelectOptionGroupComponent)
             }
-        ], queries: [{ propertyName: "_descendants", predicate: NODE_ELEMENT_TOKEN, descendants: true }], ngImport: i0, template: "<header\n  (click)=\"onGroupLabelClick($event)\"\n  (keyup.enter)=\"onGroupLabelClick($event)\"\n  class=\"option-group-header | is-align-items-center\">\n  <p class=\"option-group-label\">{{ label }}</p>\n  <fa-icon [icon]=\"suffixIcon\"></fa-icon>\n</header>\n\n<div class=\"option-group-option-container\">\n  <ng-content *ngIf=\"expanded\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;cursor:pointer}:host.active>.option-group-header{border-top-color:#249da5;border-bottom-color:#249da5;background-color:Rgba(123,123,222,.15)}:host .option-group-header:hover,:host .option-group-header:focus,:host .option-group-header:active,:host .option-group-header:focus-visible{border-top-color:#249da5;border-bottom-color:#249da5}:host:first-child .option-group-header:hover,:host:first-child .option-group-header:focus,:host:first-child .option-group-header:active,:host:first-child .option-group-header:focus-visible{border-top-color:transparent}:host:last-child:not(.expanded) .option-group-header:hover,:host:last-child:not(.expanded) .option-group-header:focus,:host:last-child:not(.expanded) .option-group-header:active,:host:last-child:not(.expanded) .option-group-header:focus-visible{border-bottom-color:transparent}.option-group-option-container{margin-left:1em}.option-group-header{display:grid;grid-template-columns:1fr auto;gap:.5em;padding:.5em 1em;border:transparent 1px solid;border-top-color:#f5f5f5;border-bottom-color:#f5f5f5;font-size:14px;font-style:normal;font-weight:600;line-height:128.571%}.option-group-header:focus-visible{outline:transparent}.option-group-label{color:#193957;font-feature-settings:\"calt\" off;word-break:break-word}.option-content{transition:transform .32s ease-out;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_descendants", predicate: NODE_ELEMENT_TOKEN, descendants: true }], ngImport: i0, template: "<header\n  (click)=\"onGroupLabelClick($event)\"\n  (keyup.enter)=\"onGroupLabelClick($event)\"\n  class=\"option-group-header | is-align-items-center\">\n  <p class=\"option-group-label\">{{ label }}</p>\n  <fa-icon [icon]=\"suffixIcon\"></fa-icon>\n</header>\n\n<div class=\"option-group-option-container\">\n  <ng-content *ngIf=\"expanded\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;cursor:pointer}:host.active>.option-group-header{border-top-color:#249da5;border-bottom-color:#249da5;background-color:Rgba(123,123,222,.15)}:host .option-group-header:hover,:host .option-group-header:focus,:host .option-group-header:active,:host .option-group-header:focus-visible{border-top-color:#249da5;border-bottom-color:#249da5}:host:first-child .option-group-header:hover,:host:first-child .option-group-header:focus,:host:first-child .option-group-header:active,:host:first-child .option-group-header:focus-visible{border-top-color:transparent}:host:last-child:not(.expanded) .option-group-header:hover,:host:last-child:not(.expanded) .option-group-header:focus,:host:last-child:not(.expanded) .option-group-header:active,:host:last-child:not(.expanded) .option-group-header:focus-visible{border-bottom-color:transparent}.option-group-option-container{margin-left:1em}.option-group-header{display:grid;grid-template-columns:1fr auto;gap:.5em;padding:.5em 1em;border:transparent 1px solid;border-top-color:#f5f5f5;border-bottom-color:#f5f5f5;font-size:14px;font-style:normal;font-weight:600;line-height:128.571%}.option-group-header:focus-visible{outline:transparent}.option-group-label{color:#193957;font-feature-settings:\"calt\" off;word-break:break-word}.option-content{transition:transform .32s ease-out;width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SelectOptionGroupComponent, decorators: [{
             type: Component$1,
@@ -11808,7 +11868,7 @@ class SelectOptionComponent {
                 provide: SELECT_OPTION_TOKEN,
                 useExisting: forwardRef(() => SelectOptionComponent)
             }
-        ], ngImport: i0, template: "<input (keyup.enter)=\"checkboxClicked($event)\" *ngIf=\"isMultiple()\" [checked]=\"isChecked\" type=\"checkbox\" />\n\n<div class=\"option-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;gap:.6em;align-items:center;padding:.5em 1em;box-sizing:border-box;border-radius:3px;border:transparent 1px solid;cursor:pointer}:host:hover{background-color:#e5f2f8}:host.selected{background:#fefaf0}:host.disabled{opacity:.5;pointer-events:none}:host.active{border:var(--color-text-light, #bbcdd5) 1px dashed;background:#fefaf0}.option-content{width:100%;word-break:break-word;color:#193957;font-feature-settings:\"calt\" off;font-family:Lato,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:128.571%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<input (keyup.enter)=\"checkboxClicked($event)\" *ngIf=\"isMultiple()\" [checked]=\"isChecked\" type=\"checkbox\" />\n\n<div class=\"option-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;gap:.6em;align-items:center;padding:.5em 1em;box-sizing:border-box;border-radius:3px;border:transparent 1px solid;cursor:pointer}:host:hover{background-color:#e5f2f8}:host.selected{background:#fefaf0}:host.disabled{opacity:.5;pointer-events:none}:host.active{border:var(--color-text-light, #bbcdd5) 1px dashed;background:#fefaf0}.option-content{width:100%;word-break:break-word;color:#193957;font-feature-settings:\"calt\" off;font-family:Lato,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:128.571%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component$1,
@@ -12053,7 +12113,7 @@ class FilterComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<he-select\n  (blur)=\"onClose()\"\n  (closed)=\"onClose()\"\n  (searchChanged)=\"onSearchFilter($event)\"\n  (selectionChanged)=\"onSelectionChange($event)\"\n  [displayWith]=\"displayWith\"\n  [formControl]=\"selectControl\"\n  [multiple]=\"multiple\"\n  [placeholder]=\"placeholder\"\n  [searchable]=\"true\"\n  [valueTemplate]=\"multiple ? valueTemplateRef : undefined\"\n  [disabled]=\"disabled\"\n  [value]=\"$any(value)\">\n\n  <ng-container *ngIf=\"showSelectedOnTop\">\n    <he-select-option *ngFor=\"let option of filterStore.selectedOptions()\"\n                      [staticChecked]=\"true\"\n                      [value]=\"option.value\"\n                      class=\"selected\">\n      {{ option.label }}\n    </he-select-option>\n    <div *ngIf=\"filterStore.selectedOptions()?.length\" class=\"border-line w-100\"></div>\n  </ng-container>\n  <ng-container *ngFor=\"let option of filterStore.filteredData() | slice: 0 : limitValue(); trackBy: trackByFn\">\n    <!--    LAYER:1    -->\n    <he-select-option *ngIf=\"option.type === 'option'\" [value]=\"option.value\">{{ option.label }}</he-select-option>\n    <he-select-option-group *ngIf=\"option.type === 'group' && option | filterHasOptions\" [label]=\"option.label\">\n      <he-select-option *ngIf=\"option.type === 'group' && option.toggleButton\" toggleGroup>Select all</he-select-option>\n      <!--    LAYER:2    -->\n      <ng-container *ngFor=\"let child of option.options | slice: 0 : limitValue(); trackBy: trackByFn\">\n        <he-select-option *ngIf=\"child.type === 'option'\" [value]=\"child.value\">{{ child.label }}</he-select-option>\n        <he-select-option-group *ngIf=\"child.type === 'group' && child | filterHasOptions\" [label]=\"child.label\">\n          <he-select-option *ngIf=\"child.type === 'group' && child.toggleButton\" toggleGroup>\n            Select all\n          </he-select-option>\n\n          <!--    LAYER:3    -->\n          <ng-container *ngFor=\"let child2 of child.options | slice: 0 : limitValue(); trackBy: trackByFn\">\n            <he-select-option *ngIf=\"child2.type === 'option'\" [value]=\"child2.value\">\n              {{ child2.label }}\n            </he-select-option>\n            <he-select-option-group *ngIf=\"child2.type === 'group' && child2 | filterHasOptions\" [label]=\"child2.label\">\n              <!--    LAYER:4    -->\n              <he-select-option\n                *ngIf=\"child2.type === 'group' && child2.toggleButton\"\n                [staticChecked]=\"false\"\n                toggleGroup>\n                Select all\n              </he-select-option>\n\n              <he-select-option\n                *ngFor=\"let child3 of child2.options | slice: 0 : limitValue(); trackBy: trackByFn\"\n                [value]=\"child3.value\">\n                {{ child3.label }}\n              </he-select-option>\n            </he-select-option-group>\n          </ng-container>\n        </he-select-option-group>\n      </ng-container>\n    </he-select-option-group>\n  </ng-container>\n</he-select>\n\n<ng-template #valueTemplateRef let-value>\n  <span class=\"has-text-ellipsis m-0\">{{ valuePlaceholder }}</span>\n</ng-template>\n\n<!-- TODO: recursive way of rendering. There are problem with ContentChildren when using this approach (not working a11n and other bugs)-->\n<!--<he-select [searchable]=\"true\" multiple (searchChanged)=\"onSearchFilter($event)\">-->\n<!--  <ng-container *ngFor=\"let option of filteredData\" [ngTemplateOutlet]=\"renderOption\"-->\n<!--                [ngTemplateOutletContext]=\"{$implicit: option}\"-->\n<!--                [ngTemplateOutletInjector]=\"selectInjector\"-->\n<!--  ></ng-container>-->\n<!--</he-select>-->\n\n<!--<ng-template #renderOption let-option>-->\n<!--  <he-select-option *ngIf=\"option.type === 'option'\" [value]=\"option.value\">{{option.label}}</he-select-option>-->\n<!--  <he-select-option-group *ngIf=\"option.type === 'group'\" [label]=\"option.label\">-->\n<!--    <he-select-option *ngFor=\"let child of option.options\" [value]=\"child.value\">{{child.label}}</he-select-option>-->\n<!--    <ng-container *ngFor=\"let child of option.options\" [ngTemplateOutlet]=\"renderOption\"-->\n<!--                  [ngTemplateOutletContext]=\"{$implicit: child}\"-->\n<!--                  [ngTemplateOutletInjector]=\"selectInjector\"></ng-container>-->\n<!--  </he-select-option-group>-->\n<!--</ng-template>-->\n", styles: [".border-line{height:1px;background-color:#249da5}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NodeElementDirective, selector: "he-select-option, he-select-option-group" }, { kind: "directive", type: ToggleOptionDirective, selector: "[toggleGroup]" }, { kind: "component", type: SelectComponent, selector: "he-select", inputs: ["placeholder", "searchPlaceholder", "searchable", "disabled", "displayWith", "valueTemplate", "positions", "multiple", "selectTemplate", "overlayOptions", "value", "compareWith", "menuWidth"], outputs: ["opened", "selectionChanged", "closed", "searchChanged"] }, { kind: "component", type: SelectOptionComponent, selector: "he-select-option", inputs: ["value", "staticChecked", "disabled"], outputs: ["selected"] }, { kind: "component", type: SelectOptionGroupComponent, selector: "he-select-option-group", inputs: ["label", "disabled"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: FilterHasOptionsPipe, name: "filterHasOptions" }] }); }
+        ], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<he-select\n  (blur)=\"onClose()\"\n  (closed)=\"onClose()\"\n  (searchChanged)=\"onSearchFilter($event)\"\n  (selectionChanged)=\"onSelectionChange($event)\"\n  [displayWith]=\"displayWith\"\n  [formControl]=\"selectControl\"\n  [multiple]=\"multiple\"\n  [placeholder]=\"placeholder\"\n  [searchable]=\"true\"\n  [valueTemplate]=\"multiple ? valueTemplateRef : undefined\"\n  [disabled]=\"disabled\"\n  [value]=\"$any(value)\">\n\n  <ng-container *ngIf=\"showSelectedOnTop\">\n    <he-select-option *ngFor=\"let option of filterStore.selectedOptions()\"\n                      [staticChecked]=\"true\"\n                      [value]=\"option.value\"\n                      class=\"selected\">\n      {{ option.label }}\n    </he-select-option>\n    <div *ngIf=\"filterStore.selectedOptions()?.length\" class=\"border-line w-100\"></div>\n  </ng-container>\n  <ng-container *ngFor=\"let option of filterStore.filteredData() | slice: 0 : limitValue(); trackBy: trackByFn\">\n    <!--    LAYER:1    -->\n    <he-select-option *ngIf=\"option.type === 'option'\" [value]=\"option.value\">{{ option.label }}</he-select-option>\n    <he-select-option-group *ngIf=\"option.type === 'group' && option | filterHasOptions\" [label]=\"option.label\">\n      <he-select-option *ngIf=\"option.type === 'group' && option.toggleButton\" toggleGroup>Select all</he-select-option>\n      <!--    LAYER:2    -->\n      <ng-container *ngFor=\"let child of option.options | slice: 0 : limitValue(); trackBy: trackByFn\">\n        <he-select-option *ngIf=\"child.type === 'option'\" [value]=\"child.value\">{{ child.label }}</he-select-option>\n        <he-select-option-group *ngIf=\"child.type === 'group' && child | filterHasOptions\" [label]=\"child.label\">\n          <he-select-option *ngIf=\"child.type === 'group' && child.toggleButton\" toggleGroup>\n            Select all\n          </he-select-option>\n\n          <!--    LAYER:3    -->\n          <ng-container *ngFor=\"let child2 of child.options | slice: 0 : limitValue(); trackBy: trackByFn\">\n            <he-select-option *ngIf=\"child2.type === 'option'\" [value]=\"child2.value\">\n              {{ child2.label }}\n            </he-select-option>\n            <he-select-option-group *ngIf=\"child2.type === 'group' && child2 | filterHasOptions\" [label]=\"child2.label\">\n              <!--    LAYER:4    -->\n              <he-select-option\n                *ngIf=\"child2.type === 'group' && child2.toggleButton\"\n                [staticChecked]=\"false\"\n                toggleGroup>\n                Select all\n              </he-select-option>\n\n              <he-select-option\n                *ngFor=\"let child3 of child2.options | slice: 0 : limitValue(); trackBy: trackByFn\"\n                [value]=\"child3.value\">\n                {{ child3.label }}\n              </he-select-option>\n            </he-select-option-group>\n          </ng-container>\n        </he-select-option-group>\n      </ng-container>\n    </he-select-option-group>\n  </ng-container>\n</he-select>\n\n<ng-template #valueTemplateRef let-value>\n  <span class=\"has-text-ellipsis m-0\">{{ valuePlaceholder }}</span>\n</ng-template>\n\n<!-- TODO: recursive way of rendering. There are problem with ContentChildren when using this approach (not working a11n and other bugs)-->\n<!--<he-select [searchable]=\"true\" multiple (searchChanged)=\"onSearchFilter($event)\">-->\n<!--  <ng-container *ngFor=\"let option of filteredData\" [ngTemplateOutlet]=\"renderOption\"-->\n<!--                [ngTemplateOutletContext]=\"{$implicit: option}\"-->\n<!--                [ngTemplateOutletInjector]=\"selectInjector\"-->\n<!--  ></ng-container>-->\n<!--</he-select>-->\n\n<!--<ng-template #renderOption let-option>-->\n<!--  <he-select-option *ngIf=\"option.type === 'option'\" [value]=\"option.value\">{{option.label}}</he-select-option>-->\n<!--  <he-select-option-group *ngIf=\"option.type === 'group'\" [label]=\"option.label\">-->\n<!--    <he-select-option *ngFor=\"let child of option.options\" [value]=\"child.value\">{{child.label}}</he-select-option>-->\n<!--    <ng-container *ngFor=\"let child of option.options\" [ngTemplateOutlet]=\"renderOption\"-->\n<!--                  [ngTemplateOutletContext]=\"{$implicit: child}\"-->\n<!--                  [ngTemplateOutletInjector]=\"selectInjector\"></ng-container>-->\n<!--  </he-select-option-group>-->\n<!--</ng-template>-->\n", styles: [".border-line{height:1px;background-color:#249da5}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NodeElementDirective, selector: "he-select-option, he-select-option-group" }, { kind: "directive", type: ToggleOptionDirective, selector: "[toggleGroup]" }, { kind: "component", type: SelectComponent, selector: "he-select", inputs: ["placeholder", "searchPlaceholder", "searchable", "disabled", "displayWith", "valueTemplate", "positions", "multiple", "selectTemplate", "overlayOptions", "value", "compareWith", "menuWidth"], outputs: ["opened", "selectionChanged", "closed", "searchChanged"] }, { kind: "component", type: SelectOptionComponent, selector: "he-select-option", inputs: ["value", "staticChecked", "disabled"], outputs: ["selected"] }, { kind: "component", type: SelectOptionGroupComponent, selector: "he-select-option-group", inputs: ["label", "disabled"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: FilterHasOptionsPipe, name: "filterHasOptions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component$1,
@@ -12133,5 +12193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, ColorPalette, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesAnimalsComponent, CyclesCompletenessComponent, CyclesCompletenessLogsComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, DropdownComponent, EllipsisPipe, EngineModelsStageComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, FilesUploadErrorsComponent, FilterComponent, FilterHasOptionsPipe, GetPipe, GlossaryMigrationFormat, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeGlossaryService, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaModule, HeSchemaService, HeSearchService, HeSelectModule, HeSitesModule, HeTermsModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MAX_STAGE, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NavigationMenuService, NoExtPipe, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeElementDirective, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, OPTION_GROUP_TOKEN, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RemoveMarkdownPipe, Repository, ResizedDirective, ResizedEvent, SELECT_OPTION_TOKEN, SELECT_TOKEN, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, SelectComponent, SelectOptionComponent, SelectOptionGroupComponent, ShellComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, TimesPipe, ToastComponent, ToggleOptionDirective, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, distinctUntilChangedDeep, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, externalLink, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatError, formatPropertyError, formatter, getColor, gitBranch, gitHome, gitRawBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupdLogsByKey, handleAPIError, hasError, hasLeafWithValue, hasWarning, initialFilterState, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, keyToDataPath, levels, linkTypeEnabled, listColor, listColorContinuous, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lookupUrl, lookups, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, nodeVersion, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, populateWithTrackIdsFilterData, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toThousands, typeToNewProperty, typeaheadFocus, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BibliographiesSearchConfirmComponent, BindOnceDirective, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, ClickOutsideDirective, ClipboardComponent, ColorPalette, CompoundDirective, CompoundPipe, CyclesActivityComponent, CyclesActivityLogsComponent, CyclesAnimalsComponent, CyclesCompletenessComponent, CyclesCompletenessLogsComponent, CyclesEmissionsChartComponent, CyclesEmissionsComponent, CyclesEmissionsLogsComponent, CyclesFunctionalUnitMeasureComponent, CyclesPracticesComponent, CyclesPracticesLogsComponent, CyclesPracticesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DiffsDisplayType, DropdownComponent, EllipsisPipe, EngineModelsStageComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FilesFormComponent, FilesUploadErrorsComponent, FilterComponent, FilterHasOptionsPipe, GetPipe, GlossaryMigrationFormat, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HE_ORCHESTRATOR_BASE_URL, HeAggregationEngineService, HeAuthService, HeBibliographiesModule, HeCommonLightModule, HeCommonModule, HeCommonService, HeCyclesModule, HeEngineModule, HeEngineService, HeFilesModule, HeFontawesomeModule, HeGlossaryService, HeImpactAssessmentsModule, HeMendeleyService, HeNodeCsvService, HeNodeModule, HeNodeService, HeSchemaModule, HeSchemaService, HeSearchService, HeSelectModule, HeSitesModule, HeSvgIconsModule, HeTermsModule, HeToastService, HeUsersService, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, ImpactAssessmentsProductsLogsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, KeysPipe, Level, LinkKeyValueComponent, LogStatus, MAX_RESULTS, MAX_STAGE, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NavigationMenuService, NoExtPipe, NodeCsvExportConfirmComponent, NodeCsvSelectHeadersComponent, NodeDiffsComponent, NodeElementDirective, NodeIconComponent, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeMissingLookupFactorsComponent, NodeRecommendationsComponent, NodeValueDetailsComponent, OPTION_GROUP_TOKEN, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RemoveMarkdownPipe, Repository, ResizedDirective, ResizedEvent, SELECT_OPTION_TOKEN, SELECT_TOKEN, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, SelectComponent, SelectOptionComponent, SelectOptionGroupComponent, ShellComponent, SitesMapsComponent, SitesMeasurementsComponent, SitesMeasurementsLogsComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, TimesPipe, ToastComponent, ToggleOptionDirective, UnitConverterComponent, addPolygonToFeature, allCountriesQuery, arrayValue, availableProperties, baseUrl, bottom, buildSummary, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, clustererImage, code, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, definitionToSchemaType, distinctUntilChangedDeep, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, externalLink, fillColor, fillStyle, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatError, formatPropertyError, formatter, getColor, gitBranch, gitHome, gitRawBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupdLogsByKey, handleAPIError, hasError, hasLeafWithValue, hasWarning, initialFilterState, isAddPropertyEnabled, isChrome, isEqual, isExternal, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, keyToDataPath, levels, linkTypeEnabled, listColor, listColorContinuous, loadMapApi, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lookupUrl, lookups, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeLink, nodeLogsUrl, nodeUrl, nodeVersion, numberGte, parentKey, parentProperty, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pathToApiDocsPath, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonsFromFeature, populateWithTrackIdsFilterData, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, sortProperties, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toThousands, typeToNewProperty, typeaheadFocus, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map