@hestia-earth/ui-components 0.33.13 → 0.33.15

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

@@ -15,7 +15,7 @@ import * as i1$3 from 'angular-svg-icon';
 import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
 import merge from 'lodash.merge';
 import Chart, { Chart as Chart$1 } from 'chart.js';
-import { getPercentileValue, toPrecision, isEmpty, unique, monthsBefore, isNumber, isUndefined, toComma, keyToLabel, isEqual as isEqual$2, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
+import { toPrecision, toComma, isUndefined, isNumber, getPercentileValue, isEmpty, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
 import Gradient from 'javascript-color-gradient';
 import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
 import { select, selectAll } from 'd3-selection';
@@ -767,6 +767,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
         }] });
 
+const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
+const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
+    ? `${(enableComma ? toComma : v => v)(parsePrecision(value, precision))}`.replace(/\.00$/, '')
+    : value;
+class PrecisionPipe {
+    transform(value, precision = 3, enableComma = true) {
+        return transform(value, precision, enableComma);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, isStandalone: true, name: "precision" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'precision',
+                    standalone: true
+                }]
+        }] });
+
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
     lightBlue: 'rgba(132, 160, 220, 1)'
@@ -892,8 +911,8 @@ class DistributionChartComponent {
                                 userCallback: (label) => label
                                     .split(joinXLabel)
                                     .map(parseFloat)
-                                    .map(v => toPrecision(v, 2))
-                                    .map(v => v.toExponential())
+                                    .map(v => transform(v, 3, true))
+                                    // .map(v => v.toExponential())
                                     .join('-')
                             },
                             scaleLabel: {
@@ -2332,25 +2351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-blank-node-state-notice', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (show()) {\n  <p class=\"is-size-7 is-italic\">\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    @if (showDeleted()) {\n      <span class=\"pl-1 notice-data-deleted\">**** Data deleted by HESTIA</span>\n    }\n  </p>\n}\n" }]
         }] });
 
-const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
-const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
-    ? `${(enableComma ? toComma : v => v)(parsePrecision(value, precision))}`.replace(/\.00$/, '')
-    : value;
-class PrecisionPipe {
-    transform(value, precision = 3, enableComma = true) {
-        return transform(value, precision, enableComma);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, isStandalone: true, name: "precision" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PrecisionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'precision',
-                    standalone: true
-                }]
-        }] });
-
 class BlankNodeValueDeltaComponent {
     constructor() {
         this.value = input();
@@ -2956,11 +2956,11 @@ class IssueConfirmComponent {
         this.activeModal?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IssueConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IssueConfirmComponent, isStandalone: true, selector: "he-issue-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, repository: { classPropertyName: "repository", publicName: "repository", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isCommunity: { classPropertyName: "isCommunity", publicName: "isCommunity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", repository: "repositoryChange", template: "templateChange", isCommunity: "isCommunityChange", 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\">{{ title() }}</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></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\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div 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()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\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      }\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IssueConfirmComponent, isStandalone: true, selector: "he-issue-confirm", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, repository: { classPropertyName: "repository", publicName: "repository", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, isCommunity: { classPropertyName: "isCommunity", publicName: "isCommunity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", repository: "repositoryChange", template: "templateChange", isCommunity: "isCommunityChange", 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\">{{ title() }}</p>\n      <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></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                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div 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 [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\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      }\n    </section>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IssueConfirmComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-issue-confirm', imports: [FormsModule, KeyValuePipe], 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 is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></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\n                  [ngModel]=\"repository()\"\n                  (change)=\"repository.set($event.target.value)\"\n                  name=\"repository\"\n                  required>\n                  <option [ngValue]=\"undefined\">Select from the list</option>\n                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div 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()\" (change)=\"template.set($event.target.value)\" name=\"template\" required>\n                    <option [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\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      }\n    </section>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'he-issue-confirm', imports: [FormsModule, KeyValuePipe], 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 is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></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                  @for (repo of repositories(); track repo) {\n                    <option [value]=\"repo\">\n                      @switch (repo) {\n                        @case (Repository.glossary) {\n                          Glossary of terms / lookup issues\n                        }\n                        @case (Repository.models) {\n                          Calculation issues\n                        }\n                        @case (Repository.orchestrator) {\n                          Orchestration issues\n                        }\n                        @case (Repository.aggregation) {\n                          Aggregated Data issues\n                        }\n                        @case (Repository.community) {\n                          UI/UX or API issues\n                        }\n                        @case (Repository.poorenemeck) {\n                          Conversion from P&N Spreadsheet\n                        }\n                        @case (Repository.schema) {\n                          Schema issues\n                        }\n                        @default {\n                          Other issues\n                        }\n                      }\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (repository()) {\n        <div 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 [value]=\"undefined\">Select from the list</option>\n                    @for (t of Template | keyvalue; track t) {\n                      <option [value]=\"t.value\">\n                        @switch (t.value) {\n                          @case (Template.bug) {\n                            I found a bug\n                          }\n                          @case (Template.feature) {\n                            I would like a new feature\n                          }\n                        }\n                      </option>\n                    }\n                  </select>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (repository() && template() && issueUrl()) {\n        <p>\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      }\n    </section>\n  </div>\n</div>\n" }]
         }] });
 
 const valueLink = (value) => isExpandable(value) && value['@id'] ? [baseUrl(), value['@type'].toLowerCase(), value['@id']].join('/') : null;
@@ -3291,11 +3291,11 @@ class SearchExtendComponent {
         return this.extended() ? this.applySearch() : this.extend();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchExtendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: SearchExtendComponent, isStandalone: true, selector: "he-search-extend", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchText: "searchText" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!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      (input)=\"value.set($event.target.value)\" />\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n      <he-svg-icon name=\"xmark\" size=\"20\" />\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class() }}\" type=\"submit\">\n      <he-svg-icon name=\"search\" size=\"20\" />\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: SearchExtendComponent, isStandalone: true, selector: "he-search-extend", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchText: "searchText" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"input search-input {{ class() }}\"\n      name=\"search\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled()\"\n      [attr.placeholder]=\"placeholder()\" />\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n      <he-svg-icon name=\"xmark\" size=\"20\" />\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class() }}\" type=\"submit\">\n      <he-svg-icon name=\"search\" size=\"20\" />\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SearchExtendComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-search-extend', imports: [FormsModule, HESvgIconComponent], template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!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      (input)=\"value.set($event.target.value)\" />\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n      <he-svg-icon name=\"xmark\" size=\"20\" />\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class() }}\" type=\"submit\">\n      <he-svg-icon name=\"search\" size=\"20\" />\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'he-search-extend', imports: [FormsModule, HESvgIconComponent], template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\n  <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"input search-input {{ class() }}\"\n      name=\"search\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled()\"\n      [attr.placeholder]=\"placeholder()\" />\n    <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n      <he-svg-icon name=\"xmark\" size=\"20\" />\n    </a>\n  </div>\n  <div class=\"control\">\n    <button class=\"button {{ class() }}\" type=\"submit\">\n      <he-svg-icon name=\"search\" size=\"20\" />\n    </button>\n  </div>\n</form>\n" }]
         }] });
 
 class ShellComponent {
@@ -6060,7 +6060,7 @@ class NodeCsvSelectHeadersComponent {
         this.headers.set(headers);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeCsvSelectHeadersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeCsvSelectHeadersComponent, isStandalone: true, selector: "he-node-csv-select-headers", inputs: { csv: { classPropertyName: "csv", publicName: "csv", isSignal: true, isRequired: true, transformFunction: null }, keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, includeDefaultCSV: { classPropertyName: "includeDefaultCSV", publicName: "includeDefaultCSV", isSignal: true, isRequired: false, transformFunction: null } }, 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)=\"selectAll($event.target.checked)\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow\">\n    <div ngbDropdown container=\"body\" placement=\"bottom-end\">\n      <button ngbDropdownToggle class=\"button is-small\" type=\"button\" id=\"select-menu\">\n        <span>Advanced Filters</span>\n        <span class=\"icon is-small\">\n          <he-svg-icon name=\"filter-funnel\" aria-hidden=\"true\" />\n        </span>\n      </button>\n      <div ngbDropdownMenu aria-labelledby=\"select-menu\">\n        <div class=\"dropdown-content\">\n          <a ngbDropdownItem>\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [ngModel]=\"showNonIncluded()\"\n                (change)=\"showNonIncluded.set($event.target.checked)\" />\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          @for (field of termFields; track field) {\n            <div ngbDropdownItem>\n              <label class=\"checkbox ml-1\">\n                <input\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [checked]=\"isTermFieldSelect(field)\"\n                  (change)=\"toggleTermField($event.target.checked, field)\" />\n                <span class=\"ml-2\">{{ field }}</span>\n              </label>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (loading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"is-overflow-y-auto | drag-container\">\n    @for (group of groups(); track group.key) {\n      <div class=\"card\">\n        <header class=\"card-header\">\n          <div class=\"card-header-title\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [indeterminate]=\"group.partialSelected\"\n                [ngModel]=\"group.selected\"\n                (change)=\"updateGroup($event.target.checked, group)\" />\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.open = !group.open\"\n            pointer>\n            <span class=\"icon\">\n              <he-svg-icon [name]=\"group.open ? 'chevron-down' : 'chevron-right'\" />\n            </span>\n          </span>\n        </header>\n        <div class=\"card-content p-3\" [class.is-hidden]=\"!group.open\">\n          <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group)\">\n            @for (header of group.headers; track header.key) {\n              @if (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)=\"updateHeader($event.target.checked, group, header)\" />\n                    <span class=\"ml-2\">{{ header.key }}</span>\n                  </label>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeCsvSelectHeadersComponent, isStandalone: true, selector: "he-node-csv-select-headers", inputs: { csv: { classPropertyName: "csv", publicName: "csv", isSignal: true, isRequired: true, transformFunction: null }, keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, includeDefaultCSV: { classPropertyName: "includeDefaultCSV", publicName: "includeDefaultCSV", isSignal: true, isRequired: false, transformFunction: null } }, 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)=\"selectAll($event.target.checked)\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow\">\n    <div ngbDropdown container=\"body\" placement=\"bottom-end\">\n      <button ngbDropdownToggle class=\"button is-small\" type=\"button\" id=\"select-menu\">\n        <span>Advanced Filters</span>\n        <span class=\"icon is-small\">\n          <he-svg-icon name=\"filter-funnel\" aria-hidden=\"true\" />\n        </span>\n      </button>\n      <div ngbDropdownMenu aria-labelledby=\"select-menu\">\n        <div class=\"dropdown-content\">\n          <a ngbDropdownItem>\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\" [(ngModel)]=\"showNonIncluded\" />\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          @for (field of termFields; track field) {\n            <div ngbDropdownItem>\n              <label class=\"checkbox ml-1\">\n                <input\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [checked]=\"isTermFieldSelect(field)\"\n                  (change)=\"toggleTermField($event.target.checked, field)\" />\n                <span class=\"ml-2\">{{ field }}</span>\n              </label>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (loading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"is-overflow-y-auto | drag-container\">\n    @for (group of groups(); track group.key) {\n      <div class=\"card\">\n        <header class=\"card-header\">\n          <div class=\"card-header-title\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [indeterminate]=\"group.partialSelected\"\n                [ngModel]=\"group.selected\"\n                (change)=\"updateGroup($event.target.checked, group)\" />\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.open = !group.open\"\n            pointer>\n            <span class=\"icon\">\n              <he-svg-icon [name]=\"group.open ? 'chevron-down' : 'chevron-right'\" />\n            </span>\n          </span>\n        </header>\n        <div class=\"card-content p-3\" [class.is-hidden]=\"!group.open\">\n          <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group)\">\n            @for (header of group.headers; track header.key) {\n              @if (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)=\"updateHeader($event.target.checked, group, header)\" />\n                    <span class=\"ml-2\">{{ header.key }}</span>\n                  </label>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeCsvSelectHeadersComponent, decorators: [{
             type: Component$1,
@@ -6073,7 +6073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NgbDropdownItem,
                         CdkDropList,
                         CdkDrag
-                    ], 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)=\"selectAll($event.target.checked)\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow\">\n    <div ngbDropdown container=\"body\" placement=\"bottom-end\">\n      <button ngbDropdownToggle class=\"button is-small\" type=\"button\" id=\"select-menu\">\n        <span>Advanced Filters</span>\n        <span class=\"icon is-small\">\n          <he-svg-icon name=\"filter-funnel\" aria-hidden=\"true\" />\n        </span>\n      </button>\n      <div ngbDropdownMenu aria-labelledby=\"select-menu\">\n        <div class=\"dropdown-content\">\n          <a ngbDropdownItem>\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [ngModel]=\"showNonIncluded()\"\n                (change)=\"showNonIncluded.set($event.target.checked)\" />\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          @for (field of termFields; track field) {\n            <div ngbDropdownItem>\n              <label class=\"checkbox ml-1\">\n                <input\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [checked]=\"isTermFieldSelect(field)\"\n                  (change)=\"toggleTermField($event.target.checked, field)\" />\n                <span class=\"ml-2\">{{ field }}</span>\n              </label>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (loading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"is-overflow-y-auto | drag-container\">\n    @for (group of groups(); track group.key) {\n      <div class=\"card\">\n        <header class=\"card-header\">\n          <div class=\"card-header-title\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [indeterminate]=\"group.partialSelected\"\n                [ngModel]=\"group.selected\"\n                (change)=\"updateGroup($event.target.checked, group)\" />\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.open = !group.open\"\n            pointer>\n            <span class=\"icon\">\n              <he-svg-icon [name]=\"group.open ? 'chevron-down' : 'chevron-right'\" />\n            </span>\n          </span>\n        </header>\n        <div class=\"card-content p-3\" [class.is-hidden]=\"!group.open\">\n          <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group)\">\n            @for (header of group.headers; track header.key) {\n              @if (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)=\"updateHeader($event.target.checked, group, header)\" />\n                    <span class=\"ml-2\">{{ header.key }}</span>\n                  </label>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.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"] }]
+                    ], 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)=\"selectAll($event.target.checked)\" />\n      <span class=\"ml-2\">Toggle All</span>\n    </label>\n  </div>\n\n  <div class=\"column is-narrow\">\n    <div ngbDropdown container=\"body\" placement=\"bottom-end\">\n      <button ngbDropdownToggle class=\"button is-small\" type=\"button\" id=\"select-menu\">\n        <span>Advanced Filters</span>\n        <span class=\"icon is-small\">\n          <he-svg-icon name=\"filter-funnel\" aria-hidden=\"true\" />\n        </span>\n      </button>\n      <div ngbDropdownMenu aria-labelledby=\"select-menu\">\n        <div class=\"dropdown-content\">\n          <a ngbDropdownItem>\n            <label class=\"checkbox ml-1\">\n              <input type=\"checkbox\" class=\"selector\" [(ngModel)]=\"showNonIncluded\" />\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          @for (field of termFields; track field) {\n            <div ngbDropdownItem>\n              <label class=\"checkbox ml-1\">\n                <input\n                  type=\"checkbox\"\n                  class=\"selector\"\n                  [checked]=\"isTermFieldSelect(field)\"\n                  (change)=\"toggleTermField($event.target.checked, field)\" />\n                <span class=\"ml-2\">{{ field }}</span>\n              </label>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n@if (loading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"is-overflow-y-auto | drag-container\">\n    @for (group of groups(); track group.key) {\n      <div class=\"card\">\n        <header class=\"card-header\">\n          <div class=\"card-header-title\">\n            <label class=\"checkbox ml-1\">\n              <input\n                type=\"checkbox\"\n                class=\"selector\"\n                [indeterminate]=\"group.partialSelected\"\n                [ngModel]=\"group.selected\"\n                (change)=\"updateGroup($event.target.checked, group)\" />\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.open = !group.open\"\n            pointer>\n            <span class=\"icon\">\n              <he-svg-icon [name]=\"group.open ? 'chevron-down' : 'chevron-right'\" />\n            </span>\n          </span>\n        </header>\n        <div class=\"card-content p-3\" [class.is-hidden]=\"!group.open\">\n          <ul cdkDropList (cdkDropListDropped)=\"dropHeader($event, group)\">\n            @for (header of group.headers; track header.key) {\n              @if (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)=\"updateHeader($event.target.checked, group, header)\" />\n                    <span class=\"ml-2\">{{ header.key }}</span>\n                  </label>\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [".toggle-all{border-bottom:1px solid #4a4a4a}.cdk-drag-preview{border-radius:3px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [] });
 
 const nodeDataState = (node) => 
@@ -7436,7 +7436,7 @@ class NodeLogsModelsComponent {
         return subValues.every(v => v.configModels.some(vv => vv.status === LogStatus.success));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\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            @if (enableFilterByTerm()) {\n              <div class=\"field\">\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)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [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                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\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.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\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  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\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=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::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:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { 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: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\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            @if (enableFilterByTerm()) {\n              <div class=\"field\">\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)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [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                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\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.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input type=\"checkbox\" class=\"selector\" [(ngModel)]=\"onlyRequired\" [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\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  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\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=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::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:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { 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: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
@@ -7460,7 +7460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NodeLogsModelsLogsStatusComponent,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\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            @if (enableFilterByTerm()) {\n              <div class=\"field\">\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)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [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                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\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.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input\n              type=\"checkbox\"\n              class=\"selector\"\n              [ngModel]=\"onlyRequired\"\n              (change)=\"onlyRequired.set($event.target.checked)\"\n              [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\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  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\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=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::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:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
+                    ], template: "<div class=\"is-px-3 is-pb-3\">\n  @if (!isExternal && !loading() && logsUrl()) {\n    <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n      <div class=\"is-flex-grow-1\"></div>\n      @if (hasLogs()) {\n        <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n          <span>Open Full Logs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      } @else {\n        <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n        <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n      }\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            @if (enableFilterByTerm()) {\n              <div class=\"field\">\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)=\"term.set($event.item)\"\n                    container=\"body\"\n                    popupClass=\"is-small\" />\n                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n                    <he-svg-icon name=\"xmark\" />\n                  </a>\n                </div>\n              </div>\n            }\n          </th>\n          @if (isBlankNodes()) {\n            <th>\n              <span class=\"is-pr-1\">Units</span>\n              @if (functionalUnit()) {\n                <span>(per&nbsp;</span>\n                <span>{{ functionalUnit() }}</span>\n                <span>)</span>\n              }\n            </th>\n          }\n          <th>Original</th>\n          <th>Recalculated</th>\n          @if (isBlankNodes()) {\n            <th>Difference</th>\n          }\n          @for (c of methodModelsCount() | times; track i; let i = $index) {\n            <th>({{ i + 1 }})</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @if (loading()) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <div class=\"has-text-center py-3\">\n                <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n              </div>\n            </td>\n          </tr>\n        } @else if (blankNodes().length === 0) {\n          <tr>\n            <td class=\"has-text-centered\" colspan=\"6\">\n              <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n            </td>\n          </tr>\n        }\n        @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n          <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n            <td\n              class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n              [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n              <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n              @if ($any(blankNode).term) {\n                <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n                  <span\n                    class=\"break-word\"\n                    [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n                </he-node-link>\n              } @else if ($any(blankNode).key) {\n                @if (nodeKey() === 'completeness') {\n                  <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td>\n                @if ($any(blankNode).term) {\n                  <span\n                    class=\"is-nowrap\"\n                    [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n                }\n              </td>\n            }\n            <td>\n              <ng-template #originalValueContent>\n                <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n              </ng-template>\n\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                  </div>\n                }\n              } @else {\n                <span\n                  [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n                  [ngbPopover]=\"blankNodeOriginalValueDetails\"\n                  autoClose=\"outside\"\n                  popoverClass=\"is-narrow\"\n                  placement=\"bottom left right auto\"\n                  container=\"body\"\n                  [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n                  [popoverContext]=\"{ blankNode }\">\n                  <span pointer>\n                    {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n                  </span>\n                </span>\n              }\n            </td>\n            <td>\n              @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n                    </div>\n                  }\n                } @else {\n                  <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n                }\n              } @else if ($any(blankNode).configModels?.length) {\n                not recalculated\n              } @else {\n                -\n              }\n            </td>\n            @if (isBlankNodes()) {\n              <td class=\"is-nowrap\">\n                @if (blankNode.allParallel) {\n                  @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                    <div>\n                      @if (\n                        $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n                        $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n                      ) {\n                        <he-blank-node-value-delta\n                          [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n                          [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n                          [useCustomFunctions]=\"false\" />\n                      } @else {\n                        -\n                      }\n                    </div>\n                  }\n                } @else {\n                  @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n                    <he-blank-node-value-delta\n                      [value]=\"blankNode.recalculatedValue\"\n                      [originalValue]=\"$any(blankNode).originalValue\"\n                      [useCustomFunctions]=\"false\" />\n                  } @else {\n                    -\n                  }\n                }\n              </td>\n            }\n            <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n          </tr>\n          @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n            @if (blankNode.isOpen) {\n              <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [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                  @if (blankNode.type) {\n                    <a\n                      class=\"is-inline-block is-pre-wrap\"\n                      [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n                      target=\"_blank\"\n                      [title]=\"subValue.key\">\n                      <span>{{ subValue.key }}</span>\n                    </a>\n                  }\n                  @if (!blankNode.type) {\n                    <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td></td>\n                }\n                <td>\n                  @if (subValue.originalValue !== null) {\n                    <span>\n                      {{ subValue.originalValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    -\n                  }\n                </td>\n                <td>\n                  @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                    <span>\n                      {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n                    </span>\n                  } @else {\n                    not recalculated\n                  }\n                </td>\n                @if (isBlankNodes()) {\n                  <td>-</td>\n                }\n                <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n              </tr>\n            }\n          }\n          @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n            <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n          }\n        }\n      </tbody>\n    </table>\n  </he-data-table>\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.set(!showLegend())\">\n            <he-svg-icon [name]=\"showLegend() ? 'chevron-down' : 'chevron-right'\" />\n          </a>\n          <span class=\"is-inline-block\">Legend:</span>\n        </p>\n        @if (showLegend()) {\n          <ul class=\"content pl-2\">\n            @for (status of LogStatus | keyvalue; track status.value) {\n              @if (logIcon[status.value]) {\n                <li class=\"has-text-{{ logColor[status.value] }}\">\n                  <he-svg-icon [name]=\"logIcon[status.value]\" />\n                  <span class=\"pl-1\">{{ status.value }}</span>\n                </li>\n              }\n            }\n          </ul>\n        }\n      </div>\n      @if (filteredType()) {\n        <div class=\"column has-text-right\">\n          <label class=\"is-inline-block checkbox\">\n            <input type=\"checkbox\" class=\"selector\" [(ngModel)]=\"onlyRequired\" [disabled]=\"!!term()\" />\n            <span class=\"ml-2\">\n              Show only {{ filteredType() }} terms included in the default HESTIA system boundary\n            </span>\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n  @if (blankNode.canOpen) {\n    <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n      <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n    </a>\n  }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n  @let term = subValue.term || termById(subValue.id);\n  @if (parent.isOpen) {\n    <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n      <td class=\"width-auto has-border-right\">\n        <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n          <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n          <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n          <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n            <span>\n              <span>{{ subValue.key | keyToLabel }}</span>\n              @if (subValue.id) {\n                <span class=\"is-inline-block\">:</span>\n              }\n            </span>\n            @if (subValue.id) {\n              @switch (subValue.key) {\n                @case ('backgroundData') {\n                  <span class=\"is-inline-block\">{{ term?.name }}</span>\n                }\n                @case ('animal') {\n                  <span class=\"is-inline-block\">{{ subValue.id }}</span>\n                }\n                @default {\n                  <he-node-link\n                    class=\"is-inline-block\"\n                    linkClass=\"is-inline-block\"\n                    [node]=\"term\"\n                    [attr.title]=\"term?.name\">\n                    <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n                  </he-node-link>\n                }\n              }\n            }\n          </div>\n        </div>\n      </td>\n      @if (isBlankNodes()) {\n        <td>\n          @if (subValue.showUnits && $any(blankNode).term) {\n            <span\n              class=\"is-nowrap\"\n              [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n          }\n        </td>\n      }\n      <td>\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td>\n        @if (subValue.isRecalculated) {\n          @if (subValue.multiGroups) {\n            <span\n              class=\"trigger-popover\"\n              ngbPopover=\"The total value across all inputs\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow is-overflow-visible\"\n              placement=\"left bottom auto\"\n              container=\"body\">\n              <span pointer>\n                {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n              </span>\n            </span>\n          } @else {\n            <span>\n              {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td>-</td>\n      }\n      <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n    </tr>\n  }\n  @if (subValue.subValues) {\n    @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          subValueRow;\n          context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n        \" />\n    }\n  }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n  <span class=\"is-pr-1\">The original value was reported using:</span>\n  <he-node-link\n    class=\"is-inline-block\"\n    linkClass=\"is-dark\"\n    [node]=\"$any(blankNode).original[0].methodModel\"\n    [showExternalLink]=\"true\">\n    <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n  </he-node-link>\n</ng-template>\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  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td [attr.colspan]=\"methodModelsCount()\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>a model for all {{ key }} succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>all models for some {{ key }} failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"blank-node-index-{{ configModelIndex }}\">\n        @if (getModelsAt(data, configModelIndex); as models) {\n          @if ($any(models) | isArray) {\n            <div>\n              @for (model of $any(models); track model.methodId) {\n                <p>\n                  <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n                </p>\n              }\n            </div>\n          } @else {\n            <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n          }\n        } @else {\n          -\n        }\n      </td>\n    }\n  } @else {\n    -\n  }\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=\"bottom left right auto\"\n    container=\"body\"\n    (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n    <span>\n      <span class=\"is-capitalized\">{{ methodName(model) }}</span>\n      @if (model.logs?.methodTier || model.model?.methodTier) {\n        <span>&nbsp;[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n      }\n    </span>\n\n    <span\n      class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n      [class.trigger-popover]=\"hasLogs()\"\n      [ngbPopover]=\"logStatusDetails\"\n      [disablePopover]=\"!hasLogs()\"\n      autoClose=\"outside\"\n      popoverClass=\"is-narrow\"\n      triggers=\"manual\"\n      #p1=\"ngbPopover\"\n      placement=\"bottom left right auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n      <he-svg-icon [name]=\"logIcon[model.status]\" />\n    </span>\n\n    @if (model.model) {\n      <span class=\"pl-1\">\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      </span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n  <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n  <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n  @if (guideEnabled && model.guidePath) {\n    <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n  } @else {\n    <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <span>Docs</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: [":host{display:block}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::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:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
         }] });
 
 var View$3;
@@ -8072,7 +8072,7 @@ class CyclesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\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]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [ngModel]=\"hideZeroValues()\"\n                  (change)=\"hideZeroValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.inputs) {\n          <he-cycles-result [cycles]=\"cycles()\" />\n        }\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline [recalculatedValues]=\"timelineValues()\" [dataState]=\"dataState()\" />\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\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    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-px-3\">\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            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { 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: "directive", type: 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: 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", "showDeleted"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["recalculatedValues", "dataState"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\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]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.inputs) {\n          <he-cycles-result [cycles]=\"cycles()\" />\n        }\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline [recalculatedValues]=\"timelineValues()\" [dataState]=\"dataState()\" />\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\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    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-px-3\">\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            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { 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: "directive", type: 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: 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", "showDeleted"] }, { kind: "component", type: CyclesResultComponent, selector: "he-cycles-result", inputs: ["cycles"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["recalculatedValues", "dataState"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CyclesNodesComponent, decorators: [{
             type: Component$1,
@@ -8099,7 +8099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KeyToLabelPipe,
                         PrecisionPipe,
                         PluralizePipe
-                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\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]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [ngModel]=\"hideZeroValues()\"\n                  (change)=\"hideZeroValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.inputs) {\n          <he-cycles-result [cycles]=\"cycles()\" />\n        }\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline [recalculatedValues]=\"timelineValues()\" [dataState]=\"dataState()\" />\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\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    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-px-3\">\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            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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"] }]
+                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\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]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.inputs) {\n          <he-cycles-result [cycles]=\"cycles()\" />\n        }\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline [recalculatedValues]=\"timelineValues()\" [dataState]=\"dataState()\" />\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\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    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-px-3\">\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            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], ctorParameters: () => [] });
 
 const formatName = (name) => name.replace(/[.]/g, ' ');
@@ -8483,7 +8483,7 @@ class NodeJsonldSchemaComponent {
         this.nodes = computed(() => (Array.isArray(this.content()) ? this.content() : [this.content()]).map(value => omit(value, ignoredProperties)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeJsonldSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeJsonldSchemaComponent, isStandalone: true, selector: "he-node-jsonld-schema", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, enableCsv: { classPropertyName: "enableCsv", publicName: "enableCsv", isSignal: true, isRequired: false, transformFunction: null }, csvOptions: { classPropertyName: "csvOptions", publicName: "csvOptions", isSignal: true, isRequired: false, transformFunction: null }, csvNotice: { classPropertyName: "csvNotice", publicName: "csvNotice", isSignal: true, isRequired: false, transformFunction: null }, showSchemaButton: { classPropertyName: "showSchemaButton", publicName: "showSchemaButton", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange" }, ngImport: i0, template: "@if (useTabs() && views().length > 1) {\n  <div class=\"tabs\">\n    <ul>\n      @for (view of views(); track view) {\n        <li [class.is-active]=\"selectedView() === view\">\n          <a\n            [ngbTooltip]=\"formatTooltip\"\n            [tooltipContext]=\"{ view }\"\n            placement=\"right\"\n            (click)=\"selectedView.set(view)\">\n            <span>{{ view }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"is-relative is-clipped\">\n  <div\n    class=\"is-flex is-justify-content-end\"\n    [class.copy-clipboard]=\"selectedView() === Views.jsonld\"\n    [class.is-p-2]=\"selectedView() !== Views.jsonld\">\n    <div class=\"field has-addons\">\n      @if (showSchemaButton()) {\n        <div class=\"control\">\n          <he-schema-version-link linkClass=\"button is-info is-small\" [node]=\"content()\">\n            <span>View Schema</span>\n          </he-schema-version-link>\n        </div>\n      }\n      @if (selectedView() === Views.jsonld) {\n        <div class=\"control\" ngbTooltip=\"Copy Content\" placement=\"bottom\" container=\"body\">\n          <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"content()\" [hideText]=\"true\" />\n        </div>\n      }\n      @if (!useTabs() && views().length > 1) {\n        <div class=\"control\">\n          <div class=\"select is-small is-fullwidth\">\n            <select [ngModel]=\"selectedView()\" (change)=\"selectedView.set($event.target.value)\" name=\"selectedView\">\n              @for (view of views(); track view) {\n                <option [value]=\"view\">{{ view }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  @switch (selectedView()) {\n    @case (Views.jsonld) {\n      <pre><code>{{nodes()?.[0] | json}}</code></pre>\n    }\n    @default {\n      <he-node-csv-preview\n        [nodes]=\"nodes()\"\n        [csvOptions]=\"csvOptions()\"\n        [csvNotice]=\"csvNotice()\"\n        [compacted]=\"selectedView() === Views.csvCompacted\" />\n    }\n  }\n</div>\n\n<ng-template #formatTooltip let-view=\"view\">\n  @switch (view) {\n    @case (Views.jsonld) {\n      <p>JSON is a structured text-based format for representing data,</p>\n      <p>where the 'LD' is a specific version of JSON which includes notation for linking different Nodes.</p>\n    }\n    @case (Views.csv) {\n      <p>CSV is a tabular or row-column format.</p>\n      <p>This format has the term identifier in a separate column to the term value.</p>\n    }\n    @case (Views.csvCompacted) {\n      <p>This format has the term identifier (term.&#64;id) in the column header.</p>\n      <p>It is a typical format for most data analysis applications which expect</p>\n      <p>column headers to identify the data.</p>\n    }\n  }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;width:100%}pre{max-height:400px}he-schema-version-link ::ng-deep he-svg-icon{height:16px!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvPreviewComponent, selector: "he-node-csv-preview", inputs: ["nodes", "compacted", "showDownload", "csvOptions", "csvNotice"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeJsonldSchemaComponent, isStandalone: true, selector: "he-node-jsonld-schema", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, enableCsv: { classPropertyName: "enableCsv", publicName: "enableCsv", isSignal: true, isRequired: false, transformFunction: null }, csvOptions: { classPropertyName: "csvOptions", publicName: "csvOptions", isSignal: true, isRequired: false, transformFunction: null }, csvNotice: { classPropertyName: "csvNotice", publicName: "csvNotice", isSignal: true, isRequired: false, transformFunction: null }, showSchemaButton: { classPropertyName: "showSchemaButton", publicName: "showSchemaButton", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange" }, ngImport: i0, template: "@if (useTabs() && views().length > 1) {\n  <div class=\"tabs\">\n    <ul>\n      @for (view of views(); track view) {\n        <li [class.is-active]=\"selectedView() === view\">\n          <a\n            [ngbTooltip]=\"formatTooltip\"\n            [tooltipContext]=\"{ view }\"\n            placement=\"right\"\n            (click)=\"selectedView.set(view)\">\n            <span>{{ view }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"is-relative is-clipped\">\n  <div\n    class=\"is-flex is-justify-content-end\"\n    [class.copy-clipboard]=\"selectedView() === Views.jsonld\"\n    [class.is-p-2]=\"selectedView() !== Views.jsonld\">\n    <div class=\"field has-addons\">\n      @if (showSchemaButton()) {\n        <div class=\"control\">\n          <he-schema-version-link linkClass=\"button is-info is-small\" [node]=\"content()\">\n            <span>View Schema</span>\n          </he-schema-version-link>\n        </div>\n      }\n      @if (selectedView() === Views.jsonld) {\n        <div class=\"control\" ngbTooltip=\"Copy Content\" placement=\"bottom\" container=\"body\">\n          <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"content()\" [hideText]=\"true\" />\n        </div>\n      }\n      @if (!useTabs() && views().length > 1) {\n        <div class=\"control\">\n          <div class=\"select is-small is-fullwidth\">\n            <select [(ngModel)]=\"selectedView\" name=\"selectedView\">\n              @for (view of views(); track view) {\n                <option [value]=\"view\">{{ view }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  @switch (selectedView()) {\n    @case (Views.jsonld) {\n      <pre><code>{{nodes()?.[0] | json}}</code></pre>\n    }\n    @default {\n      <he-node-csv-preview\n        [nodes]=\"nodes()\"\n        [csvOptions]=\"csvOptions()\"\n        [csvNotice]=\"csvNotice()\"\n        [compacted]=\"selectedView() === Views.csvCompacted\" />\n    }\n  }\n</div>\n\n<ng-template #formatTooltip let-view=\"view\">\n  @switch (view) {\n    @case (Views.jsonld) {\n      <p>JSON is a structured text-based format for representing data,</p>\n      <p>where the 'LD' is a specific version of JSON which includes notation for linking different Nodes.</p>\n    }\n    @case (Views.csv) {\n      <p>CSV is a tabular or row-column format.</p>\n      <p>This format has the term identifier in a separate column to the term value.</p>\n    }\n    @case (Views.csvCompacted) {\n      <p>This format has the term identifier (term.&#64;id) in the column header.</p>\n      <p>It is a typical format for most data analysis applications which expect</p>\n      <p>column headers to identify the data.</p>\n    }\n  }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;width:100%}pre{max-height:400px}he-schema-version-link ::ng-deep he-svg-icon{height:16px!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1$2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeCsvPreviewComponent, selector: "he-node-csv-preview", inputs: ["nodes", "compacted", "showDownload", "csvOptions", "csvNotice"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeJsonldSchemaComponent, decorators: [{
             type: Component$1,
@@ -8494,7 +8494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         ClipboardComponent,
                         SchemaVersionLinkComponent,
                         NodeCsvPreviewComponent
-                    ], template: "@if (useTabs() && views().length > 1) {\n  <div class=\"tabs\">\n    <ul>\n      @for (view of views(); track view) {\n        <li [class.is-active]=\"selectedView() === view\">\n          <a\n            [ngbTooltip]=\"formatTooltip\"\n            [tooltipContext]=\"{ view }\"\n            placement=\"right\"\n            (click)=\"selectedView.set(view)\">\n            <span>{{ view }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"is-relative is-clipped\">\n  <div\n    class=\"is-flex is-justify-content-end\"\n    [class.copy-clipboard]=\"selectedView() === Views.jsonld\"\n    [class.is-p-2]=\"selectedView() !== Views.jsonld\">\n    <div class=\"field has-addons\">\n      @if (showSchemaButton()) {\n        <div class=\"control\">\n          <he-schema-version-link linkClass=\"button is-info is-small\" [node]=\"content()\">\n            <span>View Schema</span>\n          </he-schema-version-link>\n        </div>\n      }\n      @if (selectedView() === Views.jsonld) {\n        <div class=\"control\" ngbTooltip=\"Copy Content\" placement=\"bottom\" container=\"body\">\n          <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"content()\" [hideText]=\"true\" />\n        </div>\n      }\n      @if (!useTabs() && views().length > 1) {\n        <div class=\"control\">\n          <div class=\"select is-small is-fullwidth\">\n            <select [ngModel]=\"selectedView()\" (change)=\"selectedView.set($event.target.value)\" name=\"selectedView\">\n              @for (view of views(); track view) {\n                <option [value]=\"view\">{{ view }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  @switch (selectedView()) {\n    @case (Views.jsonld) {\n      <pre><code>{{nodes()?.[0] | json}}</code></pre>\n    }\n    @default {\n      <he-node-csv-preview\n        [nodes]=\"nodes()\"\n        [csvOptions]=\"csvOptions()\"\n        [csvNotice]=\"csvNotice()\"\n        [compacted]=\"selectedView() === Views.csvCompacted\" />\n    }\n  }\n</div>\n\n<ng-template #formatTooltip let-view=\"view\">\n  @switch (view) {\n    @case (Views.jsonld) {\n      <p>JSON is a structured text-based format for representing data,</p>\n      <p>where the 'LD' is a specific version of JSON which includes notation for linking different Nodes.</p>\n    }\n    @case (Views.csv) {\n      <p>CSV is a tabular or row-column format.</p>\n      <p>This format has the term identifier in a separate column to the term value.</p>\n    }\n    @case (Views.csvCompacted) {\n      <p>This format has the term identifier (term.&#64;id) in the column header.</p>\n      <p>It is a typical format for most data analysis applications which expect</p>\n      <p>column headers to identify the data.</p>\n    }\n  }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;width:100%}pre{max-height:400px}he-schema-version-link ::ng-deep he-svg-icon{height:16px!important;width:auto!important}\n"] }]
+                    ], template: "@if (useTabs() && views().length > 1) {\n  <div class=\"tabs\">\n    <ul>\n      @for (view of views(); track view) {\n        <li [class.is-active]=\"selectedView() === view\">\n          <a\n            [ngbTooltip]=\"formatTooltip\"\n            [tooltipContext]=\"{ view }\"\n            placement=\"right\"\n            (click)=\"selectedView.set(view)\">\n            <span>{{ view }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"is-relative is-clipped\">\n  <div\n    class=\"is-flex is-justify-content-end\"\n    [class.copy-clipboard]=\"selectedView() === Views.jsonld\"\n    [class.is-p-2]=\"selectedView() !== Views.jsonld\">\n    <div class=\"field has-addons\">\n      @if (showSchemaButton()) {\n        <div class=\"control\">\n          <he-schema-version-link linkClass=\"button is-info is-small\" [node]=\"content()\">\n            <span>View Schema</span>\n          </he-schema-version-link>\n        </div>\n      }\n      @if (selectedView() === Views.jsonld) {\n        <div class=\"control\" ngbTooltip=\"Copy Content\" placement=\"bottom\" container=\"body\">\n          <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"content()\" [hideText]=\"true\" />\n        </div>\n      }\n      @if (!useTabs() && views().length > 1) {\n        <div class=\"control\">\n          <div class=\"select is-small is-fullwidth\">\n            <select [(ngModel)]=\"selectedView\" name=\"selectedView\">\n              @for (view of views(); track view) {\n                <option [value]=\"view\">{{ view }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  @switch (selectedView()) {\n    @case (Views.jsonld) {\n      <pre><code>{{nodes()?.[0] | json}}</code></pre>\n    }\n    @default {\n      <he-node-csv-preview\n        [nodes]=\"nodes()\"\n        [csvOptions]=\"csvOptions()\"\n        [csvNotice]=\"csvNotice()\"\n        [compacted]=\"selectedView() === Views.csvCompacted\" />\n    }\n  }\n</div>\n\n<ng-template #formatTooltip let-view=\"view\">\n  @switch (view) {\n    @case (Views.jsonld) {\n      <p>JSON is a structured text-based format for representing data,</p>\n      <p>where the 'LD' is a specific version of JSON which includes notation for linking different Nodes.</p>\n    }\n    @case (Views.csv) {\n      <p>CSV is a tabular or row-column format.</p>\n      <p>This format has the term identifier in a separate column to the term value.</p>\n    }\n    @case (Views.csvCompacted) {\n      <p>This format has the term identifier (term.&#64;id) in the column header.</p>\n      <p>It is a typical format for most data analysis applications which expect</p>\n      <p>column headers to identify the data.</p>\n    }\n  }\n</ng-template>\n", styles: [":host{display:block;overflow:auto;width:100%}pre{max-height:400px}he-schema-version-link ::ng-deep he-svg-icon{height:16px!important;width:auto!important}\n"] }]
         }] });
 
 const cleanContextUrl = (contextUrl) => contextUrl.replace('http://localhost:4200', baseUrl(false));
@@ -8554,11 +8554,11 @@ class NodeLogsFileComponent {
         this.csvFilename = computed(() => fileToExt(this.node()?.['@id'] ?? '', 'csv'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsFileComponent, isStandalone: true, selector: "he-node-logs-file", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      @if (showFilters()) {\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [ngModel]=\"modelFilter()\"\n            id=\"modelFilter\"\n            (input)=\"modelFilter.set($event.target.value)\"\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)=\"termFilter.set($event.target.value)\"\n            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select [ngModel]=\"selectedLevel()\" (change)=\"selectedLevel.set($event.target.value)\" id=\"selectedLevel\">\n              @for (level of Level | keyvalue; track level) {\n                <option [value]=\"level.value\">{{ level.value }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          (click)=\"showFilters.set(!showFilters())\"\n          [ngbTooltip]=\"showFilters() ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <he-svg-icon name=\"filter-funnel\" />\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"nodeLog()\" [hideText]=\"true\" />\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\" [href]=\"csvContent()\" [download]=\"csvFilename()\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\">\n    @for (line of nodeLogLines(); track line) {\n      <code class=\"is-block {{line.class}}\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code>\n    }\n  </pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px;font-size:0}pre>code{font-size:.875rem;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeLogsFileComponent, isStandalone: true, selector: "he-node-logs-file", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      @if (showFilters()) {\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\"\n            id=\"modelFilter\"\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            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\">\n              @for (level of Level | keyvalue; track level) {\n                <option [value]=\"level.value\">{{ level.value }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          (click)=\"showFilters.set(!showFilters())\"\n          [ngbTooltip]=\"showFilters() ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <he-svg-icon name=\"filter-funnel\" />\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"nodeLog()\" [hideText]=\"true\" />\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\" [href]=\"csvContent()\" [download]=\"csvFilename()\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\">\n    @for (line of nodeLogLines(); track line) {\n      <code class=\"is-block {{line.class}}\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code>\n    }\n  </pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px;font-size:0}pre>code{font-size:.875rem;line-height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeLogsFileComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-logs-file', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, HESvgIconComponent, ClipboardComponent, KeyValuePipe], template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      @if (showFilters()) {\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [ngModel]=\"modelFilter()\"\n            id=\"modelFilter\"\n            (input)=\"modelFilter.set($event.target.value)\"\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)=\"termFilter.set($event.target.value)\"\n            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select [ngModel]=\"selectedLevel()\" (change)=\"selectedLevel.set($event.target.value)\" id=\"selectedLevel\">\n              @for (level of Level | keyvalue; track level) {\n                <option [value]=\"level.value\">{{ level.value }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          (click)=\"showFilters.set(!showFilters())\"\n          [ngbTooltip]=\"showFilters() ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <he-svg-icon name=\"filter-funnel\" />\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"nodeLog()\" [hideText]=\"true\" />\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\" [href]=\"csvContent()\" [download]=\"csvFilename()\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\">\n    @for (line of nodeLogLines(); track line) {\n      <code class=\"is-block {{line.class}}\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code>\n    }\n  </pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px;font-size:0}pre>code{font-size:.875rem;line-height:20px}\n"] }]
+            args: [{ selector: 'he-node-logs-file', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, HESvgIconComponent, ClipboardComponent, KeyValuePipe], template: "<div class=\"is-relative\">\n  <div class=\"copy-clipboard\">\n    <div class=\"field has-addons\">\n      @if (showFilters()) {\n        <div class=\"control\">\n          <input\n            class=\"input is-secondary is-small\"\n            [(ngModel)]=\"modelFilter\"\n            id=\"modelFilter\"\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            placeholder=\"Filter by Term\" />\n        </div>\n        <div class=\"control\">\n          <div class=\"select is-secondary is-small\">\n            <select [(ngModel)]=\"selectedLevel\" id=\"selectedLevel\">\n              @for (level of Level | keyvalue; track level) {\n                <option [value]=\"level.value\">{{ level.value }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      <div class=\"control\">\n        <button\n          class=\"button is-small\"\n          (click)=\"showFilters.set(!showFilters())\"\n          [ngbTooltip]=\"showFilters() ? 'Hide filters' : 'Show filters'\"\n          placement=\"bottom\"\n          container=\"body\">\n          <he-svg-icon name=\"filter-funnel\" />\n        </button>\n      </div>\n      <div class=\"control\">\n        <he-clipboard clipboardClass=\"button is-secondary is-small\" [value]=\"nodeLog()\" [hideText]=\"true\" />\n      </div>\n      <div class=\"control\">\n        <a class=\"button is-info is-small\" target=\"_blank\" [href]=\"csvContent()\" [download]=\"csvFilename()\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"pl-3 pt-3 ml-3\">\n    @for (line of nodeLogLines(); track line) {\n      <code class=\"is-block {{line.class}}\">{{line.data.timestamp}} {{('[' + line.data.level + ']:').padEnd(9, ' ')}} {{line.data.message}}</code>\n    }\n  </pre>\n</div>\n", styles: [":host{display:block}pre{background-color:inherit;color:inherit;min-height:38px;max-height:500px;font-size:0}pre>code{font-size:.875rem;line-height:20px}\n"] }]
         }] });
 
 class NodeLogsTimeComponent {
@@ -8726,11 +8726,11 @@ class NodeSelectComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeSelectComponent, isStandalone: true, selector: "he-node-select", inputs: { selectedNodeType: { classPropertyName: "selectedNodeType", publicName: "selectedNodeType", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, selectedDataState: { classPropertyName: "selectedDataState", publicName: "selectedDataState", isSignal: true, isRequired: false, transformFunction: null }, enableTypes: { classPropertyName: "enableTypes", publicName: "enableTypes", isSignal: true, isRequired: false, transformFunction: null }, enableDataState: { classPropertyName: "enableDataState", publicName: "enableDataState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNodeType: "selectedNodeTypeChange", selectedNodeId: "selectedNodeIdChange", selectedDataState: "selectedDataStateChange" }, exportAs: ["heNodeSelect"], ngImport: i0, template: "<div class=\"field has-addons\">\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select\n        [ngModel]=\"selectedNodeType()\"\n        name=\"selectedNodeType\"\n        (change)=\"selectedNodeType.set($event.target.value)\">\n        @for (value of nodeTypes(); track value) {\n          <option [value]=\"value\">{{ value }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [ngModel]=\"selectedNodeId()\" name=\"selectedNodeId\" (change)=\"selectedNodeId.set($event.target.value)\">\n        @for (id of nodeIds(); track id) {\n          <option [value]=\"id\">{{ id }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  @if (enableDataState()) {\n    <div class=\"control\">\n      <div class=\"select is-small is-fullwidth\">\n        <select\n          [ngModel]=\"selectedDataState()\"\n          name=\"selectedDataState\"\n          (change)=\"selectedDataState.set($event.target.value)\">\n          @for (value of dataStates(); track value) {\n            <option [value]=\"value\">{{ value | keyToLabel }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeSelectComponent, isStandalone: true, selector: "he-node-select", inputs: { selectedNodeType: { classPropertyName: "selectedNodeType", publicName: "selectedNodeType", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, selectedDataState: { classPropertyName: "selectedDataState", publicName: "selectedDataState", isSignal: true, isRequired: false, transformFunction: null }, enableTypes: { classPropertyName: "enableTypes", publicName: "enableTypes", isSignal: true, isRequired: false, transformFunction: null }, enableDataState: { classPropertyName: "enableDataState", publicName: "enableDataState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNodeType: "selectedNodeTypeChange", selectedNodeId: "selectedNodeIdChange", selectedDataState: "selectedDataStateChange" }, exportAs: ["heNodeSelect"], ngImport: i0, template: "<div class=\"field has-addons\">\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [(ngModel)]=\"selectedNodeType\" name=\"selectedNodeType\">\n        @for (value of nodeTypes(); track value) {\n          <option [value]=\"value\">{{ value }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [(ngModel)]=\"selectedNodeId\" name=\"selectedNodeId\">\n        @for (id of nodeIds(); track id) {\n          <option [value]=\"id\">{{ id }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  @if (enableDataState()) {\n    <div class=\"control\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"selectedDataState\" name=\"selectedDataState\">\n          @for (value of dataStates(); track value) {\n            <option [value]=\"value\">{{ value | keyToLabel }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeSelectComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-select', exportAs: 'heNodeSelect', imports: [FormsModule, KeyToLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field has-addons\">\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select\n        [ngModel]=\"selectedNodeType()\"\n        name=\"selectedNodeType\"\n        (change)=\"selectedNodeType.set($event.target.value)\">\n        @for (value of nodeTypes(); track value) {\n          <option [value]=\"value\">{{ value }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [ngModel]=\"selectedNodeId()\" name=\"selectedNodeId\" (change)=\"selectedNodeId.set($event.target.value)\">\n        @for (id of nodeIds(); track id) {\n          <option [value]=\"id\">{{ id }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  @if (enableDataState()) {\n    <div class=\"control\">\n      <div class=\"select is-small is-fullwidth\">\n        <select\n          [ngModel]=\"selectedDataState()\"\n          name=\"selectedDataState\"\n          (change)=\"selectedDataState.set($event.target.value)\">\n          @for (value of dataStates(); track value) {\n            <option [value]=\"value\">{{ value | keyToLabel }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'he-node-select', exportAs: 'heNodeSelect', imports: [FormsModule, KeyToLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"field has-addons\">\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [(ngModel)]=\"selectedNodeType\" name=\"selectedNodeType\">\n        @for (value of nodeTypes(); track value) {\n          <option [value]=\"value\">{{ value }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  <div class=\"control is-expanded\">\n    <div class=\"select is-small is-fullwidth\">\n      <select [(ngModel)]=\"selectedNodeId\" name=\"selectedNodeId\">\n        @for (id of nodeIds(); track id) {\n          <option [value]=\"id\">{{ id }}</option>\n        }\n      </select>\n    </div>\n  </div>\n  @if (enableDataState()) {\n    <div class=\"control\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"selectedDataState\" name=\"selectedDataState\">\n          @for (value of dataStates(); track value) {\n            <option [value]=\"value\">{{ value | keyToLabel }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class EngineModelsStageComponent {
@@ -8969,7 +8969,7 @@ class EngineOrchestratorEditComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineOrchestratorEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineOrchestratorEditComponent, isStandalone: true, selector: "he-engine-orchestrator-edit", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: false, transformFunction: null } }, 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\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\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)=\"search.set($event.target.value)\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\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)=\"showAdvanced.set($event.target.checked)\" />\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)=\"onlyGapFilled.set($event.target.checked)\" />\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    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\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]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\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@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!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        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\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  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\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>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: EngineOrchestratorEditComponent, isStandalone: true, selector: "he-engine-orchestrator-edit", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: false, transformFunction: null } }, 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\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\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                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\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                <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                <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    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\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]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\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@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!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        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\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  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\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>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EngineOrchestratorEditComponent, decorators: [{
             type: Component$1,
@@ -8983,7 +8983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NodeLinkComponent,
                         KeyToLabelPipe,
                         HESvgIconComponent
-                    ], 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\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\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)=\"search.set($event.target.value)\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\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)=\"showAdvanced.set($event.target.checked)\" />\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)=\"onlyGapFilled.set($event.target.checked)\" />\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    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\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]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\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@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!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        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\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  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\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>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"] }]
+                    ], 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\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\" autoClose=\"outside\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-ghost\"\n          aria-haspopup=\"true\"\n          aria-controls=\"option-menu\"\n          ngbTooltip=\"Options\"\n          placement=\"bottom\"\n          container=\"body\"\n          [disableTooltip]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"option-menu\" role=\"menu\">\n          <div class=\"dropdown-content | is-dropdown-filters\">\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                    name=\"collection\"\n                    placeholder=\"Filter by key, name or model\"\n                    [(ngModel)]=\"search\" />\n                  <a class=\"icon is-small is-right\" (click)=\"search.set('')\">\n                    <he-svg-icon name=\"xmark\" />\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                <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                <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    <div class=\"column is-narrow\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\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]=\"optionDd.isOpen()\">\n          <span class=\"icon is-small\">\n            <he-svg-icon [name]=\"displayBy() === 'list' ? 'textform-list' : 'table'\" aria-hidden=\"true\" />\n          </span>\n        </button>\n        <div ngbDropdownMenu id=\"display-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'list'\" (click)=\"displayBy.set('list')\">\n              <he-svg-icon name=\"textform-list\" aria-hidden=\"true\" />\n              <span class=\"pl-2\">Display by Priority</span>\n            </a>\n            <a ngbDropdownItem [class.is-selected]=\"displayBy() === 'type'\" (click)=\"displayBy.set('type')\">\n              <he-svg-icon name=\"table\" aria-hidden=\"true\" />\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@if (displayBy() === 'list' && models()) {\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: models() }\" />\n  </div>\n}\n\n@if (displayBy() === 'type' && groupedModels()) {\n  <div class=\"tabs\">\n    <ul>\n      @for (group of groupedModels() | keyvalue; track group.key) {\n        <li [class.is-active]=\"selectedGroupedKey() === group.key\">\n          <a (click)=\"selectedGroupedKey.set(group.key)\">\n            <span class=\"pl-2\">{{ group.key }} ({{ group.value.length }})</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n  <div class=\"pl-3\">\n    <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: groupedModels()[selectedGroupedKey()] }\" />\n  </div>\n}\n\n<ng-template #termLink let-value>\n  @if (termsById()[value]) {\n    <he-node-link [node]=\"termsById()[value]\" [showExternalLink]=\"true\">\n      <span>{{ termsById()[value].name }}</span>\n    </he-node-link>\n  } @else {\n    <span>{{ value | keyToLabel }}</span>\n  }\n</ng-template>\n\n<ng-template #modelList let-data>\n  @for (v of data; track v) {\n    <div>\n      <ng-container *ngTemplateOutlet=\"model; context: { $implicit: v }\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #model let-data>\n  @if (isArray(data) && data.length) {\n    <div class=\"pl-3 model-parallel\">\n      <ng-container *ngTemplateOutlet=\"modelList; context: { $implicit: data }\" />\n    </div>\n    <hr />\n  } @else if (!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        @let link = findModelLink(data);\n        @if (link) {\n          <ng-container *ngTemplateOutlet=\"modelLink; context: { model: data.model, value: data.value, link }\" />\n        } @else {\n          @let modelLink = findModelPathLink(data);\n          @if (modelLink) {\n            <ng-container\n              *ngTemplateOutlet=\"modelPathLink; context: { model: data.model, value: data.value, link: modelLink }\" />\n          } @else {\n            <span class=\"default-value\">{{ data.value }}</span>\n            <p>\n              <span class=\"pr-1\">Model:</span>\n              <span class=\"pr-2\">\n                <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: data.model }\" />\n              </span>\n            </p>\n          }\n        }\n        @if (showAdvanced()) {\n          <div>\n            @if (data.runStrategy) {\n              <div>\n                <span class=\"pr-1\">Run strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.runStrategy, type: 'run' }\" />\n                @if (data.runArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Run arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.runArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n            @if (data.mergeStrategy) {\n              <div>\n                <span class=\"pr-1\">Merge strategy:</span>\n                <ng-container\n                  *ngTemplateOutlet=\"strategiesLink; context: { strategy: data.mergeStrategy, type: 'merge' }\" />\n                @if (data.mergeArgs) {\n                  <div class=\"pl-3 is-size-7\">\n                    <p><b>Merge arguments:</b></p>\n                    <ng-container *ngTemplateOutlet=\"strategiesArgs; context: { $implicit: data.mergeArgs }\" />\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\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  @if (link.term) {\n    <ng-container *ngTemplateOutlet=\"termLink; context: { $implicit: link.term }\" />\n  }\n\n  @if (!link.term && !link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (!link.term && link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  </p>\n</ng-template>\n\n<ng-template #modelPathLink let-model=\"model\" let-link=\"link\" let-value=\"value\">\n  @if (!link?.modelKey) {\n    <span class=\"default-value\">{{ value }}</span>\n  }\n\n  @if (link?.modelKey) {\n    <ng-container *ngTemplateOutlet=\"modelLinkKey; context: { link, model }\" />\n  }\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 }\" />\n    </span>\n\n    <a class=\"is-size-7\" [href]=\"link.docPath\" target=\"_blank\">\n      <span>(View Docs)</span>\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\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>(View Docs)</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n\n<ng-template #strategiesArgs let-args>\n  <div class=\"pl-2\">\n    @for (arg of args | keyvalue; track arg) {\n      <p>\n        <span class=\"has-text-underline\">{{ arg.key }}</span>\n        :\n        <code>{{ arg.value | json }}</code>\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block}.model-parallel{border-left:3px solid #4a4a4a}.dropdown-content.is-dropdown-filters{min-width:250px}\n"] }]
         }], ctorParameters: () => [] });
 
 class EngineRequirementsFormComponent {
@@ -10491,7 +10491,7 @@ class FilesFormComponent {
         return focusFirstError(this.ref.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-items-center is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{\n        classes\n      }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning\" />\n      }\n      <div [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#f14668}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#f14668}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#e13939!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: 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: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n      <div class=\"is-flex is-flex-grow-1\" [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "directive", type: 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: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "size", "clipboardClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -10507,7 +10507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         ClipboardComponent,
                         GuideOverlayComponent,
                         EllipsisPipe
-                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-my-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-items-center is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{\n        classes\n      }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning\" />\n      }\n      <div [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#f14668}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#f14668}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#e13939!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty(), classes: 'is-my-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n      <div class=\"is-flex is-flex-grow-1\" [innerHTML]=\"property.error.message\"></div>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#48c78e}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
         }] });
 
 class SchemaInfoComponent {
@@ -10876,7 +10876,7 @@ class FilesFormEditableComponent {
         return this.propertyChanged(value, array);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormEditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\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    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\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  @if ((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      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\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 && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\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]=\"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                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span 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              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\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                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [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                            @if (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                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\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)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: 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)=\"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        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\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        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (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        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\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                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.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(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#c91e1e}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: 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: 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: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\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    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\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  @if ((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      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\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 && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\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]=\"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                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span 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              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\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                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [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                            @if (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                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\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)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: 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)=\"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        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\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        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (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        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\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                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.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(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: 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: 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: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesFormEditableComponent, decorators: [{
             type: Component$1,
@@ -10898,7 +10898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TagsInputDirective,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\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    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\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  @if ((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      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\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 && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\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]=\"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                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span 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              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\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                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [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                            @if (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                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\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)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: 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)=\"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        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\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        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (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        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\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                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.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(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#c91e1e}he-sites-maps{height:200px}\n"] }]
+                    ], template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\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    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\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  @if ((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      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\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 && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\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]=\"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                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span 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              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\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                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [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                            @if (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                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\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)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: 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)=\"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        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\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-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]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\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        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (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        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\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                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width:767px){.card-toggle{position:relative}}.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(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"] }]
         }] });
 
 const nodeTypeToString = (type) => `${type.charAt(0).toLowerCase()}${type.substring(1)}`;
@@ -11115,11 +11115,11 @@ class FilesErrorSummaryItemComponent {
         this.maxLength.set(Math.max(minimumMaxLength, width / 3));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesErrorSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesErrorSummaryItemComponent, isStandalone: true, selector: "he-files-error-summary-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, resolved: { classPropertyName: "resolved", publicName: "resolved", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resolved: "resolvedChange" }, ngImport: i0, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#f14668}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "directive", type: ResizedDirective, selector: "[resized]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilesErrorSummaryItemComponent, isStandalone: true, selector: "he-files-error-summary-item", inputs: { summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: true, transformFunction: null }, resolved: { classPropertyName: "resolved", publicName: "resolved", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resolved: "resolvedChange" }, ngImport: i0, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#ff3844}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }, { kind: "directive", type: ResizedDirective, selector: "[resized]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilesErrorSummaryItemComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-files-error-summary-item', imports: [HESvgIconComponent, EllipsisPipe, PluralizePipe, ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#f14668}\n"] }]
+            args: [{ selector: 'he-files-error-summary-item', imports: [HESvgIconComponent, EllipsisPipe, PluralizePipe, ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-justify-content-center is-align-items-center is-align-self-stretch is-gap-8 is-mb-2\">\n  <div class=\"is-flex is-flex-grow-1 | errors-path border-right\">\n    <span class=\"has-text-weight-bold\">{{ summary().path || '-' }}</span>\n  </div>\n\n  <div class=\"is-flex is-align-items-center is-gap-4 | errors-count\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center has-background-{{\n        errorColor()\n      }} | errors-count--number\">\n      <span class=\"has-text-weight-bold has-text-white\">{{ summary().count }}</span>\n    </div>\n    <span class=\"has-text-{{ errorColor() }} is-capitalized\">\n      {{ summary().level | pluralize: summary().count }}\n    </span>\n  </div>\n</div>\n\n<div class=\"py-2 w-100 border-y\">\n  @if (summary().terms) {\n    <p class=\"is-size-7\">\n      <span class=\"is-pr-1 has-text-weight-bold\">Terms:</span>\n      <span [innerHtml]=\"summary().terms\"></span>\n    </p>\n  }\n\n  @if (hasAutoGeneratedNodes()) {\n    <p class=\"is-size-7 has-text-info\">\n      <span>Some nodes are auto-generated and the {{ summary().level }} might come from other nodes</span>\n    </p>\n  }\n\n  <p class=\"is-italic has-text-weight-semilight has-text-grey-dark\" (resized)=\"onResized($event)\">\n    <span [innerHTML]=\"message() | ellipsis: textMaxLength()\"></span>\n    @if (showMoreButton()) {\n      <a class=\"has-text-weight-semibold\" (click)=\"$event.stopPropagation(); showMore.set(!showMore())\">\n        @if (showMore()) {\n          less\n        } @else {\n          more\n        }\n      </a>\n    }\n  </p>\n</div>\n<div class=\"px-1 py-3 w-100\">\n  <div class=\"is-flex is-align-items-center is-gap-8 | resolved-actions\">\n    <p class=\"has-text-weight-bold is-size-7\">Resolved?</p>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(false)\"\n      class=\"resolved-actions--unresolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"xmark-circle\" />\n    </a>\n\n    <a\n      (click)=\"$event.stopPropagation(); resolved.set(true)\"\n      class=\"resolved-actions--resolve\"\n      [class.is-resolved]=\"resolved()\">\n      <he-svg-icon name=\"checkmark-circle\" />\n    </a>\n  </div>\n</div>\n", styles: [":host{--summary-files-border-edge: 1px solid #f5f5f5}:host .border-top{border-top:var(--summary-files-border-edge)}:host .border-bottom{border-bottom:var(--summary-files-border-edge)}:host .border-right{border-right:var(--summary-files-border-edge)}:host .border-x{border-left:var(--summary-files-border-edge);border-right:var(--summary-files-border-edge)}:host .border-y{border-bottom:var(--summary-files-border-edge);border-top:var(--summary-files-border-edge)}p,span{word-break:break-word}.errors-path{color:#4c7194}.errors-count{width:110px}.errors-count--number{line-height:1.3;border-radius:1px;padding:1px 5px}.resolved-actions--resolve{color:#b5b5b5}.resolved-actions--resolve.is-resolved,.resolved-actions--resolve:hover{color:#48c78e}.resolved-actions--unresolve{color:#b5b5b5}.resolved-actions--unresolve:not(.is-resolved),.resolved-actions--unresolve:hover{color:#ff3844}\n"] }]
         }] });
 
 const filterErrors = (showErrorsOnAutogenerated, nodes = [], errors = []) => errors.filter(({ index }) => showErrorsOnAutogenerated || !nodes?.[index]?.autoGenerated);
@@ -12003,11 +12003,11 @@ class ImpactAssessmentsGraphComponent {
         effect(() => this.showWarnings.set(this.warnings()?.length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field has-addons pt-2 px-3 mb-0\">\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\n              [ngModel]=\"selectedImpactAssessmentId()\"\n              (change)=\"selectedImpactAssessmentId.set($event.target.value)\"\n              [disabled]=\"loading()\">\n              @for (value of filteredImpactAssessments(); track value['@id']) {\n                <option [value]=\"value['@id']\">\n                  {{ value.name || value['@id'] }}\n                </option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div 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\n              [ngModel]=\"selectedModelId()\"\n              (change)=\"selectedModelId.set($event.target.value)\"\n              [disabled]=\"loading()\">\n              @for (model of models(); track model['@id']) {\n                <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field has-addons pt-2 px-3 mb-0\">\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\" [disabled]=\"loading()\">\n              @for (value of filteredImpactAssessments(); track value['@id']) {\n                <option [value]=\"value['@id']\">\n                  {{ value.name || value['@id'] }}\n                </option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div 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\" [disabled]=\"loading()\">\n              @for (model of models(); track model['@id']) {\n                <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field has-addons pt-2 px-3 mb-0\">\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\n              [ngModel]=\"selectedImpactAssessmentId()\"\n              (change)=\"selectedImpactAssessmentId.set($event.target.value)\"\n              [disabled]=\"loading()\">\n              @for (value of filteredImpactAssessments(); track value['@id']) {\n                <option [value]=\"value['@id']\">\n                  {{ value.name || value['@id'] }}\n                </option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div 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\n              [ngModel]=\"selectedModelId()\"\n              (change)=\"selectedModelId.set($event.target.value)\"\n              [disabled]=\"loading()\">\n              @for (model of models(); track model['@id']) {\n                <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field has-addons pt-2 px-3 mb-0\">\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\" [disabled]=\"loading()\">\n              @for (value of filteredImpactAssessments(); track value['@id']) {\n                <option [value]=\"value['@id']\">\n                  {{ value.name || value['@id'] }}\n                </option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div 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\" [disabled]=\"loading()\">\n              @for (model of models(); track model['@id']) {\n                <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
         }], ctorParameters: () => [] });
 
 const parseLog = (data) => ({
@@ -12196,11 +12196,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"p-3\" [class.is-hidden]=\"!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          @if (terms()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [ngModel]=\"selectedTermId()\" (change)=\"selectedTermId.set($event.target.value)\">\n                  @for (term of terms(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }} ({{ term.units }})</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n          @if (methods()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [ngModel]=\"selectedMethodId()\" (change)=\"selectedMethodId.set($event.target.value)\">\n                  @if (methods().length > 1) {\n                    <option [ngValue]=\"undefined\">Filter Model</option>\n                  }\n                  @for (term of methods(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"column is-narrow\">\n        <a\n          class=\"button is-ghost is-small\"\n          [href]=\"csvContent()\"\n          [download]=\"downloadFilename()\"\n          ngbTooltip=\"Download as CSV\"\n          placement=\"bottom\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n    @if (!selectedMethod()) {\n      <p class=\"is-size-7\">\n        <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n      </p>\n    }\n  </div>\n}\n\n<div class=\"is-mt-1\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart{height:100%}he-chart::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"p-3\" [class.is-hidden]=\"!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          @if (terms()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n                  @for (term of terms(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }} ({{ term.units }})</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n          @if (methods()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n                  @if (methods().length > 1) {\n                    <option [ngValue]=\"undefined\">Filter Model</option>\n                  }\n                  @for (term of methods(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"column is-narrow\">\n        <a\n          class=\"button is-ghost is-small\"\n          [href]=\"csvContent()\"\n          [download]=\"downloadFilename()\"\n          ngbTooltip=\"Download as CSV\"\n          placement=\"bottom\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n    @if (!selectedMethod()) {\n      <p class=\"is-size-7\">\n        <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n      </p>\n    }\n  </div>\n}\n\n<div class=\"is-mt-1\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart{height:100%}he-chart::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, ChartComponent], template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"p-3\" [class.is-hidden]=\"!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          @if (terms()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [ngModel]=\"selectedTermId()\" (change)=\"selectedTermId.set($event.target.value)\">\n                  @for (term of terms(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }} ({{ term.units }})</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n          @if (methods()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [ngModel]=\"selectedMethodId()\" (change)=\"selectedMethodId.set($event.target.value)\">\n                  @if (methods().length > 1) {\n                    <option [ngValue]=\"undefined\">Filter Model</option>\n                  }\n                  @for (term of methods(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"column is-narrow\">\n        <a\n          class=\"button is-ghost is-small\"\n          [href]=\"csvContent()\"\n          [download]=\"downloadFilename()\"\n          ngbTooltip=\"Download as CSV\"\n          placement=\"bottom\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n    @if (!selectedMethod()) {\n      <p class=\"is-size-7\">\n        <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n      </p>\n    }\n  </div>\n}\n\n<div class=\"is-mt-1\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart{height:100%}he-chart::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, ChartComponent], template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else {\n  <div class=\"p-3\" [class.is-hidden]=\"!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          @if (terms()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n                  @for (term of terms(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }} ({{ term.units }})</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n          @if (methods()?.length) {\n            <div class=\"control is-expanded\">\n              <div class=\"select is-fullwidth is-small is-secondary\">\n                <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n                  @if (methods().length > 1) {\n                    <option [ngValue]=\"undefined\">Filter Model</option>\n                  }\n                  @for (term of methods(); track term) {\n                    <option [value]=\"term['@id']\">{{ term.name }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"column is-narrow\">\n        <a\n          class=\"button is-ghost is-small\"\n          [href]=\"csvContent()\"\n          [download]=\"downloadFilename()\"\n          ngbTooltip=\"Download as CSV\"\n          placement=\"bottom\">\n          <he-svg-icon name=\"download\" />\n        </a>\n      </div>\n    </div>\n    @if (!selectedMethod()) {\n      <p class=\"is-size-7\">\n        <i>Selecting a Model is recommended to avoid duplicated entries.</i>\n      </p>\n    }\n  </div>\n}\n\n<div class=\"is-mt-1\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart{height:100%}he-chart::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [] });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -12425,7 +12425,7 @@ class ImpactAssessmentsProductsComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @if (enableFilterMethodModel()) {\n                      <div class=\"select is-small\">\n                        <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n                          <option [ngValue]=\"undefined\">Filter Model</option>\n                          @for (term of methodModels(); track term) {\n                            <option [ngValue]=\"term\">{{ term.name }}</option>\n                          }\n                        </select>\n                      </div>\n                    }\n                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\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 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            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: 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: 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", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @if (enableFilterMethodModel()) {\n                      <div class=\"select is-small\">\n                        <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n                          <option [ngValue]=\"undefined\">Filter Model</option>\n                          @for (term of methodModels(); track term) {\n                            <option [ngValue]=\"term\">{{ term.name }}</option>\n                          }\n                        </select>\n                      </div>\n                    }\n                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\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 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            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: 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: 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", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -12449,7 +12449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         EllipsisPipe,
                         PrecisionPipe,
                         KeyToLabelPipe
-                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @if (enableFilterMethodModel()) {\n                      <div class=\"select is-small\">\n                        <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n                          <option [ngValue]=\"undefined\">Filter Model</option>\n                          @for (term of methodModels(); track term) {\n                            <option [ngValue]=\"term\">{{ term.name }}</option>\n                          }\n                        </select>\n                      </div>\n                    }\n                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\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 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            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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"] }]
+                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @if (enableFilterMethodModel()) {\n                      <div class=\"select is-small\">\n                        <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n                          <option [ngValue]=\"undefined\">Filter Model</option>\n                          @for (term of methodModels(); track term) {\n                            <option [ngValue]=\"term\">{{ term.name }}</option>\n                          }\n                        </select>\n                      </div>\n                    }\n                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\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]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\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 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            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["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"] }]
         }], ctorParameters: () => [] });
 
 const hasValidationError = (errors = [], level) => {
@@ -12705,7 +12705,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @let items = getFilteredDirectChildren(group, parentSearch);\n\n  @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              <div class=\"filter-accordion__search\" [class.d-none]=\"getDirectOptionsCount(item) <= 5\">\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right pl-5\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                    <a\n                      class=\"icon has-text-secondary is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ removeCountFromLabel(item.label) }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-pl-2\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(item)\"\n      [indeterminate]=\"isGroupPartiallySelected(item)\"\n      (change)=\"toggleGroup(item)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n    @let count = getOptionCountFn()(item.value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @let items = getFilteredDirectChildren(group, parentSearch);\n\n  @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ removeCountFromLabel(item.label) }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-pl-2\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(item)\"\n      [indeterminate]=\"isGroupPartiallySelected(item)\"\n      (change)=\"toggleGroup(item)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n    @let count = getOptionCountFn()(item.value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -12716,7 +12716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             multi: true
                         },
                         FilterStore
-                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @let items = getFilteredDirectChildren(group, parentSearch);\n\n  @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              <div class=\"filter-accordion__search\" [class.d-none]=\"getDirectOptionsCount(item) <= 5\">\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right pl-5\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input pl-2\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                    <a\n                      class=\"icon has-text-secondary is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ removeCountFromLabel(item.label) }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-pl-2\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(item)\"\n      [indeterminate]=\"isGroupPartiallySelected(item)\"\n      (change)=\"toggleGroup(item)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n    @let count = getOptionCountFn()(item.value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
+                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "@if (showHeader()) {\n  <div\n    class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"right\"\n          triggers=\"hover\"\n          size=\"16\"\n          container=\"body\" />\n      }\n    </div>\n\n    <ng-content select=\"[header-content]\" />\n\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n\n    @if (showGlobalSearch()) {\n      <div class=\"field is-mb-0 pb-2 w-100\">\n        <div class=\"control is-expanded has-icons-right\">\n          <input\n            type=\"text\"\n            class=\"input is-secondary is-small search-input\"\n            [placeholder]=\"globalSearchPlaceholder()\"\n            [(ngModel)]=\"search\"\n            [disabled]=\"disabled()\"\n            (input)=\"onSearch($event.target.value, group())\" />\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n            <he-svg-icon name=\"xmark\" />\n          </a>\n          <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n            <he-svg-icon name=\"search\" />\n          </a>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"has-border-bottom\">\n  <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n  @let items = getFilteredDirectChildren(group, parentSearch);\n\n  @for (item of items; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          <div\n            class=\"filter-accordion__panel-content\"\n            [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n            [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n            <div class=\"filter-accordion__panel-inner\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"filter-accordion__search\">\n                  <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                    <div class=\"control is-expanded has-icons-right pl-5\">\n                      <input\n                        type=\"text\"\n                        class=\"input is-secondary is-small search-input pl-2\"\n                        placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                        [value]=\"groupState.searchTerm || ''\"\n                        [disabled]=\"isItemEffectivelyDisabled(item)\"\n                        (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                      <a\n                        class=\"icon has-text-secondary is-small is-right\"\n                        [class.is-hidden]=\"!groupState.searchTerm\"\n                        (click)=\"groupState.searchTerm = ''\">\n                        <he-svg-icon name=\"xmark\" />\n                      </a>\n                      <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                        <he-svg-icon name=\"search\" />\n                      </a>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n                  \" />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\">\n  <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ removeCountFromLabel(item.label) }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light is-pl-2\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(item)\"\n      [indeterminate]=\"isGroupPartiallySelected(item)\"\n      (change)=\"toggleGroup(item)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\n\n    @let count = getOptionCountFn()(item.value);\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n    }\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:2px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)
@@ -12918,7 +12918,7 @@ class SitesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.name\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [ngModel]=\"hideZeroValues()\"\n                (change)=\"hideZeroValues.set($event.target.checked)\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n          @if (showAreaTooBig()) {\n            <p class=\"is-size-7 is-italic\">\n              (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n            </p>\n          }\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\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 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            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: 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: 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", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.name\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n          @if (showAreaTooBig()) {\n            <p class=\"is-size-7 is-italic\">\n              (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n            </p>\n          }\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\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 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            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: 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: 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", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SitesNodesComponent, decorators: [{
             type: Component$1,
@@ -12941,7 +12941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         PrecisionPipe,
                         CapitalizePipe,
                         SitesManagementChartComponent
-                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.name\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [ngModel]=\"hideZeroValues()\"\n                (change)=\"hideZeroValues.set($event.target.checked)\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [ngModel]=\"hideIdenticalValues()\"\n                  (change)=\"hideIdenticalValues.set($event.target.checked)\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n          @if (showAreaTooBig()) {\n            <p class=\"is-size-7 is-italic\">\n              (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n            </p>\n          }\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\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 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            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n" }]
+                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    @if (hasData() && selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (selectedView() === View.table) {\n    <div class=\"column is-narrow\">\n      <he-search-extend\n        class=\"is-secondary is-small\"\n        placeholder=\"Filter terms by name\"\n        (searchText)=\"filterTerm.set($event)\" />\n    </div>\n  }\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\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                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.name\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n          @if (showAreaTooBig()) {\n            <p class=\"is-size-7 is-italic\">\n              (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n            </p>\n          }\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\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 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            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class TermsPropertyContentComponent {