@hestia-earth/ui-components 0.36.25 → 0.37.0

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

@@ -6,7 +6,7 @@ import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule, NG_VA
 import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe } from '@angular/common';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
-import { catchError, map, debounceTime, distinctUntilChanged, tap, switchMap, mergeMap, shareReplay, delay, take, first, filter, startWith, skip, throttleTime, skipUntil, toArray, reduce, mergeAll, distinct, groupBy } from 'rxjs/operators';
+import { catchError, map, debounceTime, distinctUntilChanged, tap, switchMap, mergeMap, shareReplay, delay, take, first, filter, startWith, skip, throttleTime, skipUntil, reduce, mergeAll, toArray, distinct, groupBy } from 'rxjs/operators';
 import { of, zip, ReplaySubject, timer, Subject, combineLatest, pipe, fromEvent, merge as merge$1, EMPTY, animationFrameScheduler, forkJoin, from } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
@@ -1174,8 +1174,9 @@ const convertToSvg = (config, metadata = {}) => {
             textFn: ({ data }) => [toPrecision(data), metadata.units].filter(Boolean).join(' '),
             xPosFn: (x, index, width, chart, data) => (data < 0 || isEmpty(data) ? chart.scales['x-axis-0'].getPixelForValue(0) : x) + 10,
             emptyValueLabel: 'No data'
-        })
-    ];
+        }),
+        metadata.lollipopConfig ? lollipopChartPlugin(metadata.lollipopConfig) : null
+    ].filter(Boolean);
     new Chart(mockCanvas, chartConfig);
     return stretchSvg(svgContext.getSerializedSvg(true));
 };
@@ -1185,6 +1186,16 @@ const exportAsSVG = (config, metadata) => {
     const url = URL.createObjectURL(blob);
     downloadFile(url, metadata.fileName || 'aggregate-chart-export.svg');
 };
+const downloadSvg = (svgElement) => {
+    const serializer = new XMLSerializer();
+    let svgString = serializer.serializeToString(svgElement);
+    if (!svgString.includes('xmlns')) {
+        svgString = svgString.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    return downloadFile(url, 'chart.svg');
+};
 
 class ChartConfigurationDirective {
     constructor() {
@@ -3434,7 +3445,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon class=\"is-ml-1 | compact-header--btn__icon\" name=\"chevron-down\" aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left] aside{left:0}:host-context[drawer-position=left] aside .shell__menuContent{left:0}:host-context[drawer-position=left] aside .shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{right:0;order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -3451,7 +3462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         '[class]': 'hostClass()',
                         '[attr.drawer-position]': 'position()',
                         '[attr.drawer-state]': 'menuState()'
-                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
+                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon class=\"is-ml-1 | compact-header--btn__icon\" name=\"chevron-down\" aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=left] aside{left:0}:host-context[drawer-position=left] aside .shell__menuContent{left:0}:host-context[drawer-position=left] aside .shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{right:0;order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{background:#dbe3ea}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
                 type: HostListener,
                 args: ['window:mouseup']
@@ -6381,22 +6392,34 @@ const mergeDataWithHeaders = (data, headers) => ({
     ...data,
     ...Object.fromEntries(pickHeaderKeys.map(key => [key, headers?.get(key)]).filter(([_key, value]) => !isEmpty(value)))
 });
+const nodesByType = (nodes, nodeType) => (nodes?.[nodeType] || []).slice();
+const nodeIds = (nodes, nodeType) => nodesByType(nodes, nodeType).map(node => node.id);
+const nodeById = (nodes, nodeType, id) => nodesByType(nodes, nodeType).filter(node => !id || node.id === id);
+const nodesByState = (nodes, nodeType, dataState, id) => nodeById(nodes, nodeType, id)
+    .map(v => v[dataState])
+    .filter(Boolean);
 class HeNodeStoreService {
     constructor() {
         this.nodeService = inject(HeNodeService);
         this._nodesLoadRequests = {};
-        this._nodes = {};
-        this._nodes$ = new ReplaySubject(1);
+        this.nodes = signal({}, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.sortedNodes = computed(() => Object.fromEntries(Object.entries(this.nodes()).map(([nodeKey, values]) => [nodeKey, sortNodes(values)])), ...(ngDevMode ? [{ debugName: "sortedNodes" }] : []));
     }
     findNodeIndex(node, params = {}) {
-        const nodes = this._nodes?.[node['@type']] || [];
+        const nodes = nodesByType(this.nodes(), node['@type']);
         return nodes.findIndex(n => n.type === node['@type'] && n.id === nodeRequestId(node, params));
     }
+    updateNodeList(nodeType, newValues) {
+        const nodes = { ...this.nodes() };
+        nodes[nodeType] = newValues;
+        this.nodes.set(nodes);
+    }
     loadNode(node, params = {}, dataTransform = data => data) {
         const id = nodeRequestId(node, params);
+        const nodeType = node['@type'];
         const aggregated = 'aggregated' in node ? node.aggregated : isAggregated(node['@id']);
-        const dataStates = nodeTypeDataStates(node['@type'], aggregated);
-        const index = this._nodesLoadRequests[node['@type']].length;
+        const dataStates = nodeTypeDataStates(nodeType, aggregated);
+        const index = this._nodesLoadRequests[nodeType].length;
         const request = forkJoin(dataStates.reduce((prev, dataState) => ({
             ...prev,
             [dataState]: this.nodeService.getWithHeaders$({ ...node, dataState }, params).pipe(map(({ data, headers }) => mergeDataWithHeaders(dataTransform(data), headers)), catchError(() => of(undefined)))
@@ -6405,18 +6428,18 @@ class HeNodeStoreService {
             values[dataState] || values[DataState.original] || node
         ]))), map(values => ({
             index,
-            type: node['@type'],
+            type: nodeType,
             id,
             ...values
         })));
-        this._nodesLoadRequests[node['@type']].push({
+        this._nodesLoadRequests[nodeType].push({
             id,
             request
         });
         request.subscribe(data => {
-            this._nodes[node['@type']] = this._nodes[node['@type']] || [];
-            this._nodes[node['@type']][index] = data;
-            this._nodes$.next(this._nodes);
+            const nodesList = nodesByType(this.nodes(), nodeType);
+            nodesList[index] = data;
+            this.updateNodeList(nodeType, nodesList);
         });
         return request;
     }
@@ -6430,7 +6453,6 @@ class HeNodeStoreService {
      */
     addNode(node, params = {}, dataTransform) {
         this._nodesLoadRequests[node['@type']] = this._nodesLoadRequests[node['@type']] || [];
-        this._nodes[node['@type']] = this._nodes[node['@type']] || [];
         const existingRequest = this._nodesLoadRequests[node['@type']].find(({ id }) => id === nodeRequestId(node, params));
         return existingRequest ? existingRequest.request : this.loadNode(node, params, dataTransform);
     }
@@ -6438,10 +6460,9 @@ class HeNodeStoreService {
         const requests = this._nodesLoadRequests[nodeType].slice();
         requests.splice(index, 1);
         this._nodesLoadRequests[nodeType] = requests;
-        const nodes = this._nodes[nodeType].slice();
-        nodes.splice(index, 1);
-        this._nodes[nodeType] = nodes;
-        this._nodes$.next(this._nodes);
+        const nodesList = nodesByType(this.nodes(), nodeType);
+        nodesList.splice(index, 1);
+        this.updateNodeList(nodeType, nodesList);
     }
     removeNode(node, params = {}) {
         const index = this.findNodeIndex(node, params);
@@ -6449,23 +6470,13 @@ class HeNodeStoreService {
     }
     clearNodes() {
         this._nodesLoadRequests = {};
-        this._nodes = {};
-        this._nodes$.next(this._nodes);
-    }
-    nodes$() {
-        return this._nodes$.asObservable();
-    }
-    sortedNodes$() {
-        return this.nodes$().pipe(map(nodes => Object.fromEntries(Object.entries(nodes).map(([nodeKey, values]) => [nodeKey, sortNodes(values)]))));
-    }
-    ids$(nodeType) {
-        return this.nodes$().pipe(mergeMap(values => values[nodeType]), map(({ id }) => id), toArray());
+        this.nodes.set({});
     }
-    find$(nodeType, id) {
-        return this.nodes$().pipe(map(values => (values[nodeType] || []).filter(node => !id || node.id === id)));
+    nodeIds(nodeType) {
+        return nodeIds(this.nodes(), nodeType);
     }
-    findByState$(nodeType, dataState, id) {
-        return this.find$(nodeType, id).pipe(map(values => values.map(v => v[dataState]).filter(Boolean)));
+    findByState(nodeType, dataState, id) {
+        return nodesByState(this.nodes(), nodeType, dataState, id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeNodeStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HeNodeStoreService, providedIn: 'root' }); }
@@ -7631,6 +7642,35 @@ const groupdLogsByKey = (node, nodeKey, logs, originalValue, recalculatedValue)
         });
     };
 };
+const groupsLogsByFields = (node, logs, originalValue, recalculatedValue) => {
+    const nodeType$1 = nodeType(node);
+    return (key) => {
+        const keyLogs = get(logs, key, {});
+        const original = originalValue?.[key];
+        const recalculated = recalculatedValue?.[key];
+        const hasData = !!original || !!recalculated || Object.keys(keyLogs).length > 0;
+        const configModelsData = { nodeType: nodeType$1, key };
+        const configModels = unique([...(keyLogs.models || []).filter(isModelLog(keyLogs))]).map(configModelWithDocs(configModelsData));
+        const isRequired = !Object.values(keyLogs)
+            .filter(v => typeof v === 'object' && !Array.isArray(v) && !v.isKey)
+            .every(v => v.runRequired === false);
+        return dataWithConfigModelLogs(keyLogs)({
+            blankNode: false,
+            isOpen: true,
+            canOpen: false,
+            key,
+            configModels,
+            originalValue: original,
+            recalculatedValue: recalculated,
+            isOriginal: !isUndefined(original),
+            isRecalculated: isRecalculated$1(key)(node),
+            hasData,
+            isRequired,
+            logs: keyLogs,
+            allParallel: false
+        });
+    };
+};
 const modelCount = (blankNodeLogs) => Math.max.apply(Math.max, [
     0,
     ...blankNodeLogs.flatMap(v => [
@@ -7938,7 +7978,7 @@ class NodeLogsModelsComponent {
         this.engineService = inject(HeEngineService);
         this.guideEnabled = inject(GUIDE_ENABLED);
         this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-        this.nodeKey = input.required(...(ngDevMode ? [{ debugName: "nodeKey" }] : []));
+        this.nodeKey = input(...(ngDevMode ? [undefined, { debugName: "nodeKey" }] : []));
         this.originalValues = input([], ...(ngDevMode ? [{ debugName: "originalValues" }] : []));
         this.recalculatedValues = input([], ...(ngDevMode ? [{ debugName: "recalculatedValues" }] : []));
         this.terms = input([], ...(ngDevMode ? [{ debugName: "terms" }] : []));
@@ -7958,6 +7998,10 @@ class NodeLogsModelsComponent {
         this.isSystemBoundary = isSystemBoundary;
         this.showLegend = signal(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
         this.onlyRequired = signal(true, ...(ngDevMode ? [{ debugName: "onlyRequired" }] : []));
+        this.schemaType = computed(() => (this.originalValues()?.[0]?.['@type'] ||
+            this.originalValues()?.[0]?.type ||
+            this.recalculatedValues()?.[0]?.['@type'] ||
+            this.recalculatedValues()?.[0]?.type), ...(ngDevMode ? [{ debugName: "schemaType" }] : []));
         this.filteredType = computed(() => this.filterTermTypesLabel() || this.filterTermTypes()?.map(termTypeLabel).join(' & '), ...(ngDevMode ? [{ debugName: "filteredType" }] : []));
         this.functionalUnit = computed(() => 'functionalUnit' in this.node()
             ? functionalUnit[NodeType.Cycle](this.node())
@@ -8047,7 +8091,9 @@ class NodeLogsModelsComponent {
                 ? this.allTerms()
                     .map(groupLogsByTerm(this.node(), this.logs(), this.config(), this.originalValues(), this.recalculatedValues(), this.nodeKey(), this.termsGrouping()))
                     .filter(shouldShowBlankNode)
-                : computeKeys(this.originalValues(), this.recalculatedValues()).map(groupdLogsByKey(this.node(), this.nodeKey(), this.logs(), this.originalValues(), this.recalculatedValues())), ...(ngDevMode ? [{ debugName: "allBlankNodes" }] : []));
+                : this.schemaType()
+                    ? computeKeys(this.originalValues(), this.recalculatedValues()).map(groupdLogsByKey(this.node(), this.nodeKey(), this.logs(), this.originalValues(), this.recalculatedValues()))
+                    : computeKeys(this.originalValues(), this.recalculatedValues()).map(groupsLogsByFields(this.node(), this.logs(), this.originalValues(), this.recalculatedValues())), ...(ngDevMode ? [{ debugName: "allBlankNodes" }] : []));
         this.blankNodes = computed(() => orderBlankNodes(this.allBlankNodes().filter(log => !('term' in log) ||
             filterBlankNode(log, this.term(), this.filterTermTypes(), this.onlyRequired())), this.nodeKey()), ...(ngDevMode ? [{ debugName: "blankNodes" }] : []));
         this.methodModelsCount = computed(() => this.allBlankNodes()?.length && 'term' in this.allBlankNodes()[0]
@@ -8095,6 +8141,7 @@ class NodeLogsModelsComponent {
             !this.inputGroupsResource.hasValue(),
             this.inputGroupsResource.isLoading()
         ].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.isNumber = (value) => typeof value === 'number';
     }
     suggestByTerm(term) {
         return this.allTerms()
@@ -8139,7 +8186,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: "20.3.13", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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-mb-2\">\n  <ng-content />\n</div>\n\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-bordered\" [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 is-pb-1\">\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 class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>\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              </span>\n            </div>\n          </th>\n        }\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Original</span>\n          </div>\n        </th>\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Recalculated</span>\n          </div>\n        </th>\n        @if (isBlankNodes()) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Difference</span>\n            </div>\n          </th>\n        }\n        @for (c of methodModelsCount() | times; track i; let i = $index) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Model {{ i + 1 }}</span>\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td class=\"has-border-right 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-border-right 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\"\n            [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\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            </div>\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right\">\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 class=\"has-border-right\">\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 class=\"has-border-right\">\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=\"has-border-right 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 class=\"has-border-right\"></td>\n              }\n              <td class=\"has-border-right\">\n                @if (subValue.originalValue !== null) {\n                  <span>\n                    {{ subValue.originalValue | precision: 3 | default: '-' }}\n                  </span>\n                } @else {\n                  -\n                }\n              </td>\n              <td class=\"has-border-right\">\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 class=\"has-border-right\">-</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\">\n  <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n      @for (status of LogStatus | keyvalue; track status.value) {\n        @if (logIcon[status.value]) {\n          <span class=\"is-flex is-align-items-center is-gap-8\">\n            <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n            <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n          </span>\n        }\n      }\n    </div>\n\n    @if (filteredType()) {\n      <div class=\"field is-relative\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          [(ngModel)]=\"onlyRequired\"\n          [disabled]=\"!!term()\"\n          id=\"onlyRequired\" />\n        <label class=\"is-size-7\" for=\"onlyRequired\">\n          <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\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 class=\"has-border-right\">\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 class=\"has-border-right\">\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td class=\"has-border-right\">\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 class=\"has-border-right\">-</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  @let extraColumns = methodModelsCount() - 1;\n\n  <ng-template #notInSystemBoundary>\n    <td class=\"has-border-right\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td class=\"has-border-right\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>all succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>some failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"has-border-right 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  <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n    <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\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      <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n        <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n        @if (model.logs?.methodTier || model.model?.methodTier) {\n          <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n        }\n      </span>\n    </div>\n\n    <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n      @if (model.showLogs) {\n        <span\n          class=\"is-nowrap is-clickable\"\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 class=\"has-text-link\">Logs</span>\n        </span>\n      }\n\n      @if (model.model) {\n        @if (model.showLogs) {\n          <div class=\"vertical-divider\"></div>\n        }\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      }\n    </div>\n  </div>\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}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::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: "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: "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"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: false, 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-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n\n  @if (!isExternal && !loading() && logsUrl() && 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  }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n  <p class=\"is-my-2\">\n    <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n    <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n  </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [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 is-pb-1\">\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 class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>\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              </span>\n            </div>\n          </th>\n        }\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Original</span>\n          </div>\n        </th>\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Recalculated</span>\n          </div>\n        </th>\n        @if (isBlankNodes()) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Difference</span>\n            </div>\n          </th>\n        }\n        @for (c of methodModelsCount() | times; track i; let i = $index) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Model {{ i + 1 }}</span>\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td class=\"has-border-right 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-border-right 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\"\n            [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\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                } @else {\n                  <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </div>\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right\">\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 class=\"has-border-right\">\n            <ng-template #originalValueContent>\n              <span>\n                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n              </span>\n            </ng-template>\n\n            @if (blankNode.allParallel) {\n              @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      valueContent;\n                      context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n                    \" />\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                  <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n                </span>\n              </span>\n            }\n          </td>\n          <td class=\"has-border-right\">\n            @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        valueContent;\n                        context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n                      \" />\n                  </div>\n                }\n              } @else {\n                <span>\n                  <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n                </span>\n              }\n            } @else if ($any(blankNode).configModels?.length) {\n              not recalculated\n            } @else {\n              -\n            }\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right 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 class=\"has-border-right\"></td>\n              }\n              <td class=\"has-border-right\">\n                @if (subValue.originalValue !== null) {\n                  <span>\n                    <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n                  </span>\n                } @else {\n                  -\n                }\n              </td>\n              <td class=\"has-border-right\">\n                @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                  <span>\n                    <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n                  </span>\n                } @else {\n                  not recalculated\n                }\n              </td>\n              @if (isBlankNodes()) {\n                <td class=\"has-border-right\">-</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\">\n  <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n      @for (status of LogStatus | keyvalue; track status.value) {\n        @if (logIcon[status.value]) {\n          <span class=\"is-flex is-align-items-center is-gap-8\">\n            <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n            <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n          </span>\n        }\n      }\n    </div>\n\n    @if (filteredType()) {\n      <div class=\"field is-relative\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          [(ngModel)]=\"onlyRequired\"\n          [disabled]=\"!!term()\"\n          id=\"onlyRequired\" />\n        <label class=\"is-size-7\" for=\"onlyRequired\">\n          <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #valueContent let-value=\"value\">\n  @if (isNumber(value)) {\n    {{ value | precision: 3 | default: '-' }}\n  } @else {\n    {{ value | default: '-' }}\n  }\n</ng-template>\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 class=\"has-border-right\">\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 class=\"has-border-right\">\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td class=\"has-border-right\">\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                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n              </span>\n            </span>\n          } @else {\n            <span>\n              <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td class=\"has-border-right\">-</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  @let extraColumns = methodModelsCount() - 1;\n\n  <ng-template #notInSystemBoundary>\n    <td class=\"has-border-right\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td class=\"has-border-right\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>all succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>some failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"has-border-right 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  <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n    <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\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      <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n        <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n        @if (model.logs?.methodTier || model.model?.methodTier) {\n          <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n        }\n      </span>\n    </div>\n\n    <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n      @if (model.showLogs) {\n        <span\n          class=\"is-nowrap is-clickable\"\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 class=\"has-text-link\">Logs</span>\n        </span>\n      }\n\n      @if (model.model) {\n        @if (model.showLogs) {\n          <div class=\"vertical-divider\"></div>\n        }\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      }\n    </div>\n  </div>\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}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::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: "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: "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"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { 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: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
@@ -8164,8 +8211,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         NodeLogsModelsLogsStatusComponent,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], template: "<div class=\"is-mb-2\">\n  <ng-content />\n</div>\n\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-bordered\" [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 is-pb-1\">\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 class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>\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              </span>\n            </div>\n          </th>\n        }\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Original</span>\n          </div>\n        </th>\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Recalculated</span>\n          </div>\n        </th>\n        @if (isBlankNodes()) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Difference</span>\n            </div>\n          </th>\n        }\n        @for (c of methodModelsCount() | times; track i; let i = $index) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Model {{ i + 1 }}</span>\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td class=\"has-border-right 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-border-right 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\"\n            [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\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            </div>\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right\">\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 class=\"has-border-right\">\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 class=\"has-border-right\">\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=\"has-border-right 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 class=\"has-border-right\"></td>\n              }\n              <td class=\"has-border-right\">\n                @if (subValue.originalValue !== null) {\n                  <span>\n                    {{ subValue.originalValue | precision: 3 | default: '-' }}\n                  </span>\n                } @else {\n                  -\n                }\n              </td>\n              <td class=\"has-border-right\">\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 class=\"has-border-right\">-</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\">\n  <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n      @for (status of LogStatus | keyvalue; track status.value) {\n        @if (logIcon[status.value]) {\n          <span class=\"is-flex is-align-items-center is-gap-8\">\n            <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n            <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n          </span>\n        }\n      }\n    </div>\n\n    @if (filteredType()) {\n      <div class=\"field is-relative\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          [(ngModel)]=\"onlyRequired\"\n          [disabled]=\"!!term()\"\n          id=\"onlyRequired\" />\n        <label class=\"is-size-7\" for=\"onlyRequired\">\n          <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\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 class=\"has-border-right\">\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 class=\"has-border-right\">\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            {{ subValue.originalValue | precision: 3 | default: '-' }}\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td class=\"has-border-right\">\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 class=\"has-border-right\">-</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  @let extraColumns = methodModelsCount() - 1;\n\n  <ng-template #notInSystemBoundary>\n    <td class=\"has-border-right\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td class=\"has-border-right\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>all succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>some failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"has-border-right 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  <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n    <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\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      <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n        <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n        @if (model.logs?.methodTier || model.model?.methodTier) {\n          <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n        }\n      </span>\n    </div>\n\n    <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n      @if (model.showLogs) {\n        <span\n          class=\"is-nowrap is-clickable\"\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 class=\"has-text-link\">Logs</span>\n        </span>\n      }\n\n      @if (model.model) {\n        @if (model.showLogs) {\n          <div class=\"vertical-divider\"></div>\n        }\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      }\n    </div>\n  </div>\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}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::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"] }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: true }] }], originalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValues", required: false }] }], recalculatedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "recalculatedValues", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], filterTermTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypesLabel", required: false }] }], logsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "logsKey", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }] } });
+                    ], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n  <div>\n    <ng-content />\n  </div>\n\n  @if (!isExternal && !loading() && logsUrl() && 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  }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n  <p class=\"is-my-2\">\n    <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n    <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n  </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [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 is-pb-1\">\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 class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>\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              </span>\n            </div>\n          </th>\n        }\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Original</span>\n          </div>\n        </th>\n        <th class=\"has-border-right\">\n          <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n            <span>Recalculated</span>\n          </div>\n        </th>\n        @if (isBlankNodes()) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Difference</span>\n            </div>\n          </th>\n        }\n        @for (c of methodModelsCount() | times; track i; let i = $index) {\n          <th class=\"has-border-right\">\n            <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n              <span>Model {{ i + 1 }}</span>\n            </div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr>\n          <td class=\"has-border-right 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-border-right 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\"\n            [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n            <div class=\"is-flex is-align-items-flex-start is-gap-4\">\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                } @else {\n                  <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n                    <span>{{ $any(blankNode).key | keyToLabel }}</span>\n                  </a>\n                }\n              }\n            </div>\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right\">\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 class=\"has-border-right\">\n            <ng-template #originalValueContent>\n              <span>\n                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n              </span>\n            </ng-template>\n\n            @if (blankNode.allParallel) {\n              @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      valueContent;\n                      context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n                    \" />\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                  <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n                </span>\n              </span>\n            }\n          </td>\n          <td class=\"has-border-right\">\n            @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n                  <div>\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        valueContent;\n                        context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n                      \" />\n                  </div>\n                }\n              } @else {\n                <span>\n                  <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n                </span>\n              }\n            } @else if ($any(blankNode).configModels?.length) {\n              not recalculated\n            } @else {\n              -\n            }\n          </td>\n          @if (isBlankNodes()) {\n            <td class=\"has-border-right 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 class=\"has-border-right\"></td>\n              }\n              <td class=\"has-border-right\">\n                @if (subValue.originalValue !== null) {\n                  <span>\n                    <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n                  </span>\n                } @else {\n                  -\n                }\n              </td>\n              <td class=\"has-border-right\">\n                @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n                  <span>\n                    <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n                  </span>\n                } @else {\n                  not recalculated\n                }\n              </td>\n              @if (isBlankNodes()) {\n                <td class=\"has-border-right\">-</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\">\n  <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n    <div\n      class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n      @for (status of LogStatus | keyvalue; track status.value) {\n        @if (logIcon[status.value]) {\n          <span class=\"is-flex is-align-items-center is-gap-8\">\n            <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n            <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n          </span>\n        }\n      }\n    </div>\n\n    @if (filteredType()) {\n      <div class=\"field is-relative\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          [(ngModel)]=\"onlyRequired\"\n          [disabled]=\"!!term()\"\n          id=\"onlyRequired\" />\n        <label class=\"is-size-7\" for=\"onlyRequired\">\n          <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #valueContent let-value=\"value\">\n  @if (isNumber(value)) {\n    {{ value | precision: 3 | default: '-' }}\n  } @else {\n    {{ value | default: '-' }}\n  }\n</ng-template>\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 class=\"has-border-right\">\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 class=\"has-border-right\">\n        @if (!isEmpty(subValue.originalValue)) {\n          <span>\n            <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n          </span>\n        } @else {\n          -\n        }\n      </td>\n      <td class=\"has-border-right\">\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                <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n              </span>\n            </span>\n          } @else {\n            <span>\n              <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n            </span>\n          }\n        } @else if (!isEmpty(subValue.originalValue)) {\n          not recalculated\n        } @else {\n          -\n        }\n      </td>\n      @if (isBlankNodes()) {\n        <td class=\"has-border-right\">-</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  @let extraColumns = methodModelsCount() - 1;\n\n  <ng-template #notInSystemBoundary>\n    <td class=\"has-border-right\">\n      <span>Not in HESTIA system boundary</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  </ng-template>\n\n  @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n    <td class=\"has-border-right\">\n      <span>Expand to see logs (</span>\n      @let key = subValuesKey(data, 'sub-values');\n      @if (hasCompleteSuccess(data)) {\n        <span>all succeeded</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n      } @else {\n        <span>some failed</span>\n        <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n      }\n      <span>)</span>\n    </td>\n    @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n      <td class=\"has-border-right\"></td>\n    }\n  } @else if (isSystemBoundary(data)) {\n    @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n      <td class=\"has-border-right 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  <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n    <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\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      <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n        <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n        @if (model.logs?.methodTier || model.model?.methodTier) {\n          <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n        }\n      </span>\n    </div>\n\n    <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n      @if (model.showLogs) {\n        <span\n          class=\"is-nowrap is-clickable\"\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 class=\"has-text-link\">Logs</span>\n        </span>\n      }\n\n      @if (model.model) {\n        @if (model.showLogs) {\n          <div class=\"vertical-divider\"></div>\n        }\n        <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n      }\n    </div>\n  </div>\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}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::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"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], originalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValues", required: false }] }], recalculatedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "recalculatedValues", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], filterTermTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypesLabel", required: false }] }], logsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "logsKey", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }] } });
 
 var View$4;
 (function (View) {
@@ -8197,9 +8244,8 @@ class CyclesCompletenessComponent {
         }), ...(ngDevMode ? [{ debugName: "showView" }] : []));
         this.views = computed(() => Object.values(View$4).filter(view => this.showView()[view]) ?? [], ...(ngDevMode ? [{ debugName: "views" }] : []));
         this.selectedView = signal(View$4.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
-        this.originalCycles = toSignal(this.nodeStoreService.findByState$(NodeType.Cycle, DataState.original));
-        this._allCycles = toSignal(this.nodeStoreService.find$(NodeType.Cycle));
-        this.cycles = computed(() => this._allCycles()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "cycles" }] : []));
+        this.originalCycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, DataState.original), ...(ngDevMode ? [{ debugName: "originalCycles" }] : []));
+        this.cycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, this.dataState()), ...(ngDevMode ? [{ debugName: "cycles" }] : []));
         this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
         this.ogirinalSelectedCycle = computed(() => this.originalCycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedCycle" }] : []));
         this.selectedCycle = computed(() => this.cycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "selectedCycle" }] : []));
@@ -8314,11 +8360,11 @@ class CyclesEmissionsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: 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: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: 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: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
 
 class CyclesFunctionalUnitMeasureComponent {
@@ -8338,9 +8384,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 var View$3;
 (function (View) {
     View["table"] = "Table";
+    View["logs"] = "Recalculations logs";
 })(View$3 || (View$3 = {}));
 const viewIcon$3 = {
-    [View$3.table]: 'table'
+    [View$3.table]: 'table',
+    [View$3.logs]: 'calculator'
 };
 const keys = [
     'startDate',
@@ -8355,6 +8403,7 @@ const keys = [
     'otherSitesArea',
     'harvestedArea'
 ];
+const getCycleKeys = (cycle) => Object.fromEntries(keys.map(key => [key, cycle[key]]));
 const headerKeys = ['cycle.id', 'cycle.@id', ...keys.map(key => `cycle.${key}`)];
 class CyclesMetadataComponent {
     constructor() {
@@ -8364,22 +8413,35 @@ class CyclesMetadataComponent {
         this.schemaBaseUrl = schemaBaseUrl();
         this.defaultLabel = defaultLabel;
         this.keyToLabel = keyToLabel;
+        this.NodeType = NodeType;
         this.View = View$3;
         this.viewIcon = viewIcon$3;
         this.showView = computed(() => ({
-            [View$3.table]: true
+            [View$3.table]: true,
+            [View$3.logs]: !this.isOriginal() && this.hasRecalculatedNodes()
         }), ...(ngDevMode ? [{ debugName: "showView" }] : []));
         this.views = computed(() => Object.values(View$3).filter(view => this.showView()[view]) ?? [], ...(ngDevMode ? [{ debugName: "views" }] : []));
         this.selectedView = signal(View$3.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
-        this._allCycles = toSignal(this.nodeStoreService.find$(NodeType.Cycle));
-        this.cycles = computed(() => this._allCycles()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "cycles" }] : []));
+        this.originalCycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, DataState.original), ...(ngDevMode ? [{ debugName: "originalCycles" }] : []));
+        this.cycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, this.dataState()), ...(ngDevMode ? [{ debugName: "cycles" }] : []));
         this.hasData = computed(() => this.cycles().length, ...(ngDevMode ? [{ debugName: "hasData" }] : []));
         this.isOriginal = computed(() => this.dataState() === DataState.original, ...(ngDevMode ? [{ debugName: "isOriginal" }] : []));
+        this.hasRecalculatedNodes = computed(() => this.cycles().some(({ aggregated }) => !aggregated), ...(ngDevMode ? [{ debugName: "hasRecalculatedNodes" }] : []));
+        this.showSwitchToRecalculated = computed(() => this.isOriginal() && this.hasRecalculatedNodes(), ...(ngDevMode ? [{ debugName: "showSwitchToRecalculated" }] : []));
+        this.showSelectCycle = computed(() => [View$3.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectCycle" }] : []));
+        this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+        this.ogirinalSelectedCycle = computed(() => this.originalCycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedCycle" }] : []));
+        this.selectedCycle = computed(() => this.cycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "selectedCycle" }] : []));
+        this.selectedOriginalValues = computed(() => getCycleKeys(this.ogirinalSelectedCycle()), ...(ngDevMode ? [{ debugName: "selectedOriginalValues" }] : []));
+        this.selectedRecalculatedValues = computed(() => getCycleKeys(this.selectedCycle()), ...(ngDevMode ? [{ debugName: "selectedRecalculatedValues" }] : []));
         this.keys = computed(() => keys.filter(key => this.cycles().some(cycle => Object.keys(cycle).includes(key))), ...(ngDevMode ? [{ debugName: "keys" }] : []));
     }
     trackById(_index, item) {
         return item['@id'];
     }
+    selectIndex({ target: { value } }) {
+        this.selectedIndex.set(+value);
+    }
     showDownload() {
         const instance = this.modalService.open(NodeCsvExportConfirmComponent);
         const component = instance.componentInstance;
@@ -8389,18 +8451,20 @@ class CyclesMetadataComponent {
         component.headerKeys.set(headerKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n  @if (selectedView() === View.table) {\n    <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n      <he-svg-icon name=\"download\" />\n    </button>\n  }\n\n  @if (views()?.length > 1) {\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            <he-svg-icon\n              name=\"checkmark\"\n              aria-hidden=\"true\"\n              class=\"is-hidden-mobile\"\n              [class.is-hidden-tablet]=\"selectedView() !== view\" />\n            <he-svg-icon\n              [name]=\"viewIcon[view]\"\n              aria-hidden=\"true\"\n              [class.is-hidden-tablet]=\"selectedView() === view\" />\n            <span class=\"is-hidden-mobile\">{{ view }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 (key of keys(); track key) {\n                <th [attr.title]=\"key\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n                    {{ keyToLabel(key) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of keys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ cycle[key] | default: '-' }}\n                    </span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No data</span>\n      </div>\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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: 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: "pipe", type: DefaultPipe, name: "default" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 (key of keys(); track key) {\n                <th [attr.title]=\"key\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n                    {{ keyToLabel(key) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of keys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ cycle[key] | default: '-' }}\n                    </span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No data.</span>\n        @if (showSwitchToRecalculated()) {\n          <span>\n            Switch to\n            <code>recalculated</code>\n            version.\n          </span>\n        }\n      </div>\n    }\n  }\n  @case (View.logs) {\n    <ng-container *ngTemplateOutlet=\"selectView\" />\n\n    @if (selectedCycle()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedCycle()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </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"] }, { 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: 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: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "pipe", type: DefaultPipe, name: "default" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesMetadataComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-cycles-metadata', imports: [
+                        NgTemplateOutlet,
                         HESvgIconComponent,
                         DataTableComponent,
                         NodeLinkComponent,
                         BlankNodeStateComponent,
                         BlankNodeStateNoticeComponent,
-                        DefaultPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n  @if (selectedView() === View.table) {\n    <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n      <he-svg-icon name=\"download\" />\n    </button>\n  }\n\n  @if (views()?.length > 1) {\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            <he-svg-icon\n              name=\"checkmark\"\n              aria-hidden=\"true\"\n              class=\"is-hidden-mobile\"\n              [class.is-hidden-tablet]=\"selectedView() !== view\" />\n            <he-svg-icon\n              [name]=\"viewIcon[view]\"\n              aria-hidden=\"true\"\n              [class.is-hidden-tablet]=\"selectedView() === view\" />\n            <span class=\"is-hidden-mobile\">{{ view }}</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 (key of keys(); track key) {\n                <th [attr.title]=\"key\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n                    {{ keyToLabel(key) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of keys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ cycle[key] | default: '-' }}\n                    </span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No data</span>\n      </div>\n    }\n  }\n}\n" }]
+                        DefaultPipe,
+                        NodeLogsModelsComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (selectedView()) {\n  @case (View.table) {\n    @if (hasData()) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 (key of keys(); track key) {\n                <th [attr.title]=\"key\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n                    {{ keyToLabel(key) }}\n                  </a>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n              <tr>\n                <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                  <he-node-link [node]=\"cycle\">\n                    <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                  </he-node-link>\n                </td>\n                @for (key of keys(); track key) {\n                  <td class=\"is-nowrap\">\n                    <span>\n                      {{ cycle[key] | default: '-' }}\n                    </span>\n                    <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </he-data-table>\n      <he-blank-node-state-notice [dataState]=\"dataState()\" />\n    } @else {\n      <div class=\"panel-block\">\n        <span>No data.</span>\n        @if (showSwitchToRecalculated()) {\n          <span>\n            Switch to\n            <code>recalculated</code>\n            version.\n          </span>\n        }\n      </div>\n    }\n  }\n  @case (View.logs) {\n    <ng-container *ngTemplateOutlet=\"selectView\" />\n\n    @if (selectedCycle()) {\n      <he-node-logs-models\n        class=\"is-mt-2\"\n        [node]=\"selectedCycle()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </div>\n    </div>\n  }\n</ng-template>\n" }]
         }], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
 // TODO: compute from the list of unique properties
@@ -8648,11 +8712,11 @@ class CyclesNodesTimelineComponent {
         }), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />\n\n<div class=\"chart-area-border\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-nodes-timeline', imports: [ChartComponent], template: "<ng-content />\n\n<div class=\"chart-area-border\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-cycles-nodes-timeline', imports: [ChartComponent], template: "<ng-content />\n\n<div class=\"chart-area-border is-mt-3\">\n  <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: true }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }] } });
 
 class TermsUnitsDescriptionComponent {
@@ -8752,9 +8816,8 @@ class CyclesNodesComponent {
         }), ...(ngDevMode ? [{ debugName: "showView" }] : []));
         this.views = computed(() => nodeKeyViews$2[this.selectedNodeKey()]?.filter(view => this.showView()[view]) ?? [], ...(ngDevMode ? [{ debugName: "views" }] : []));
         this.selectedView = signal(View$2.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
-        this._allNodes = toSignal(this.nodeStoreService.find$(NodeType.Cycle));
-        this.originalNodes = computed(() => this._allNodes()?.map(data => data[DataState.original]) || [], ...(ngDevMode ? [{ debugName: "originalNodes" }] : []));
-        this.currentNodes = computed(() => this._allNodes()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "currentNodes" }] : []));
+        this.originalNodes = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, DataState.original), ...(ngDevMode ? [{ debugName: "originalNodes" }] : []));
+        this.currentNodes = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, this.dataState()), ...(ngDevMode ? [{ debugName: "currentNodes" }] : []));
         // can be Cycle or Transformation
         this.originalCycles = computed(() => this.nodeKeyGroup()
             ? filterGroupNodesByTerm(this.nodeKeyGroup(), this.originalNodes(), this.selectedGroup())
@@ -8849,7 +8912,7 @@ class CyclesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 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                    @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          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-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        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}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"] }, { 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: 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: ["values", "maxDate", "minDate"] }, { 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: "20.3.13", 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@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 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                    @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          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-m-0\">\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        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}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"] }, { 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: 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: ["values", "maxDate", "minDate"] }, { 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: "20.3.13", ngImport: i0, type: CyclesNodesComponent, decorators: [{
             type: Component$1,
@@ -8875,7 +8938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         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@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 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                    @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          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-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        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}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@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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 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                    @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          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-m-0\">\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        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}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: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], nodeKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeys", required: true }] }], nodeKeyGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeyGroup", required: false }] }] } });
 
 class CyclesResultComponent {
@@ -9726,36 +9789,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
 class NodeSelectComponent {
     constructor() {
         this.nodeStoreService = inject(HeNodeStoreService);
-        this._nodes = toSignal(this.nodeStoreService.sortedNodes$().pipe(startWith({})));
+        this._nodes = this.nodeStoreService.sortedNodes;
         this.nodes = computed(() => this._nodes()[this.selectedNodeType()] ?? [], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
         this._nodeTypes = computed(() => Object.keys(this._nodes()).filter((key) => this._nodes()[key].length > 0), ...(ngDevMode ? [{ debugName: "_nodeTypes" }] : []));
         this.selectedNodeType = model(...(ngDevMode ? [undefined, { debugName: "selectedNodeType" }] : []));
         this.selectedNodeId = model('', ...(ngDevMode ? [{ debugName: "selectedNodeId" }] : []));
         this.selectedDataState = model(DataState.original, ...(ngDevMode ? [{ debugName: "selectedDataState" }] : []));
+        this.selectFirstId = input(true, ...(ngDevMode ? [{ debugName: "selectFirstId" }] : []));
         this.enableTypes = input(...(ngDevMode ? [undefined, { debugName: "enableTypes" }] : []));
+        this.enableNodeType = input(true, ...(ngDevMode ? [{ debugName: "enableNodeType" }] : []));
         this.enableDataState = input(true, ...(ngDevMode ? [{ debugName: "enableDataState" }] : []));
         this.showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
         this.direction = input('row', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        this.nodeSelected = output();
         this.nodeTypes = computed(() => this.enableTypes()?.length
             ? this._nodeTypes().filter(nodeType => this.enableTypes()?.includes(nodeType))
             : this._nodeTypes(), ...(ngDevMode ? [{ debugName: "nodeTypes" }] : []));
         this.nodeIds = computed(() => this.nodes().map(({ id }) => id) ?? [], ...(ngDevMode ? [{ debugName: "nodeIds" }] : []));
         this.dataStates = computed(() => allowedDataStates(this.selectedNodeType()) || [DataState.original], ...(ngDevMode ? [{ debugName: "dataStates" }] : []));
         this.selectedNode = computed(() => this.nodes().find(({ id }) => id === this.selectedNodeId())?.[this.selectedDataState()], ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
-        effect(() => this.selectedNodeId.set(this.nodes()?.filter(Boolean)?.[0]?.id));
+        effect(() => this.selectFirstId() && this.selectedNodeId.set(this.nodes()?.filter(Boolean)?.[0]?.id));
         effect(() => {
             if ([this.selectedNodeType(), this.selectedNodeId(), !this.dataStates().includes(this.selectedDataState())].every(Boolean)) {
                 this.selectedDataState.set(DataState.original);
             }
         });
+        effect(() => !!this.selectedNode() && this.nodeSelected.emit(this.selectedNode()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NodeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNodeType: "selectedNodeTypeChange", selectedNodeId: "selectedNodeIdChange", selectedDataState: "selectedDataStateChange" }, exportAs: ["heNodeSelect"], ngImport: i0, template: "<div\n  class=\"is-flex is-justify-content-space-between is-flex-direction-{{ direction() }}\"\n  [class.is-gap-4]=\"direction() === 'column'\"\n  [class.is-gap-8]=\"direction() === 'row'\">\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">Node Type</div>\n    }\n\n    <div class=\"field is-m-0\">\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>\n  </div>\n\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">HESTIA ID</div>\n    }\n\n    <div class=\"field is-m-0\">\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    </div>\n  </div>\n\n  @if (enableDataState()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Data State</div>\n      }\n\n      <div class=\"field is-m-0\">\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      </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: "20.3.13", 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 }, selectFirstId: { classPropertyName: "selectFirstId", publicName: "selectFirstId", isSignal: true, isRequired: false, transformFunction: null }, enableTypes: { classPropertyName: "enableTypes", publicName: "enableTypes", isSignal: true, isRequired: false, transformFunction: null }, enableNodeType: { classPropertyName: "enableNodeType", publicName: "enableNodeType", isSignal: true, isRequired: false, transformFunction: null }, enableDataState: { classPropertyName: "enableDataState", publicName: "enableDataState", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedNodeType: "selectedNodeTypeChange", selectedNodeId: "selectedNodeIdChange", selectedDataState: "selectedDataStateChange", nodeSelected: "nodeSelected" }, exportAs: ["heNodeSelect"], ngImport: i0, template: "<div\n  class=\"is-flex is-justify-content-space-between is-flex-direction-{{ direction() }}\"\n  [class.is-gap-4]=\"direction() === 'column'\"\n  [class.is-gap-8]=\"direction() === 'row'\">\n  @if (enableNodeType()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Node Type</div>\n      }\n\n      <div class=\"field is-m-0\">\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>\n    </div>\n  }\n\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">HESTIA ID</div>\n    }\n\n    <div class=\"field is-m-0\">\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    </div>\n  </div>\n\n  @if (enableDataState()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Data State</div>\n      }\n\n      <div class=\"field is-m-0\">\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      </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: "20.3.13", ngImport: i0, type: NodeSelectComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-select', exportAs: 'heNodeSelect', imports: [FormsModule, KeyToLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"is-flex is-justify-content-space-between is-flex-direction-{{ direction() }}\"\n  [class.is-gap-4]=\"direction() === 'column'\"\n  [class.is-gap-8]=\"direction() === 'row'\">\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">Node Type</div>\n    }\n\n    <div class=\"field is-m-0\">\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>\n  </div>\n\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">HESTIA ID</div>\n    }\n\n    <div class=\"field is-m-0\">\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    </div>\n  </div>\n\n  @if (enableDataState()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Data State</div>\n      }\n\n      <div class=\"field is-m-0\">\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      </div>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { selectedNodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeType", required: false }] }, { type: i0.Output, args: ["selectedNodeTypeChange"] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }, { type: i0.Output, args: ["selectedNodeIdChange"] }], selectedDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDataState", required: false }] }, { type: i0.Output, args: ["selectedDataStateChange"] }], enableTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTypes", required: false }] }], enableDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataState", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
+            args: [{ selector: 'he-node-select', exportAs: 'heNodeSelect', imports: [FormsModule, KeyToLabelPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"is-flex is-justify-content-space-between is-flex-direction-{{ direction() }}\"\n  [class.is-gap-4]=\"direction() === 'column'\"\n  [class.is-gap-8]=\"direction() === 'row'\">\n  @if (enableNodeType()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Node Type</div>\n      }\n\n      <div class=\"field is-m-0\">\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>\n    </div>\n  }\n\n  <div>\n    @if (showLabel()) {\n      <div class=\"has-text-secondary is-size-7 is-mb-1\">HESTIA ID</div>\n    }\n\n    <div class=\"field is-m-0\">\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    </div>\n  </div>\n\n  @if (enableDataState()) {\n    <div>\n      @if (showLabel()) {\n        <div class=\"has-text-secondary is-size-7 is-mb-1\">Data State</div>\n      }\n\n      <div class=\"field is-m-0\">\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      </div>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { selectedNodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeType", required: false }] }, { type: i0.Output, args: ["selectedNodeTypeChange"] }], selectedNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeId", required: false }] }, { type: i0.Output, args: ["selectedNodeIdChange"] }], selectedDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDataState", required: false }] }, { type: i0.Output, args: ["selectedDataStateChange"] }], selectFirstId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectFirstId", required: false }] }], enableTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTypes", required: false }] }], enableNodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableNodeType", required: false }] }], enableDataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataState", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
 
 class EngineModelsStageComponent {
     constructor() {
@@ -9844,11 +9911,10 @@ class EngineModelsStageDeepComponent {
             stream: ({ params: { node } }) => from(relatedNodesByType[node['@type']] ?? []).pipe(mergeMap(nodeType => this.nodeService.getRelated$(node, nodeType).pipe(mergeMap(({ results }) => results))), toArray(), map(values => unique([...values, ...(nestedNodesByType[node['@type']]?.(node)?.flat()?.filter(Boolean) ?? [])])))
         });
         this.nodesLength = computed(() => this.relatedNodesResource.value()?.length ?? 0, ...(ngDevMode ? [{ debugName: "nodesLength" }] : []));
-        this.nodes = toSignal(this.nodeStoreService.nodes$());
         this.nodesResource = rxResource({
             params: () => ({
                 relatedNodes: this.relatedNodesResource.value(),
-                nodes: this.nodes()
+                nodes: this.nodeStoreService.nodes()
             }),
             stream: ({ params: { relatedNodes, nodes } }) => relatedNodes?.length > 0
                 ? from(relatedNodes).pipe(mergeMap(node => this.findNode(nodes, node)), filter(v => !!v), distinct(node => jsonldPath(node['@type'], node['@id'])), toArray())
@@ -11362,8 +11428,8 @@ class SitesMapsComponent {
         this.options = {
             styles: []
         };
-        this.originalSites = toSignal(this.nodeStoreService.findByState$(NodeType.Site, DataState.original));
-        this.nodes = computed(() => (this._mapReady() ? [...(this.sites() || []), ...(this.originalSites() || [])] : []), ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.originalSites = computed(() => this.nodeStoreService.findByState(NodeType.Site, DataState.original), ...(ngDevMode ? [{ debugName: "originalSites" }] : []));
+        this.nodes = computed(() => this._mapReady() ? [...(this.sites() || []), ...(this.originalSites() || [])] : [], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
         this.markers = computed(() => this.nodes().map(siteMarker).filter(Boolean), ...(ngDevMode ? [{ debugName: "markers" }] : []));
         this._sitePolygons = computed(() => this.nodes().flatMap(sitePolygon).filter(Boolean), ...(ngDevMode ? [{ debugName: "_sitePolygons" }] : []));
         this.sitePolygons = computed(() => this._sitePolygons().map(polygon => polygonToMap(polygon)), ...(ngDevMode ? [{ debugName: "sitePolygons" }] : []));
@@ -12465,12 +12531,19 @@ const mergedNodes = (selection, { tooltipOperator, zone }) => {
         .call(setNodeSize)
         .attr('stroke', ({ data }) => nodeBorderColours[data.type])
         .attr('fill', d => nodeColours[d.data.type])
+        .attr('stroke-width', '2')
+        .attr('rx', '3px')
+        .attr('ry', '3px')
         .style('user-select', window.innerWidth < 768 ? 'none' : null);
     selection.filter(d => !d.data.group && d.data.id !== nonLCAIndicatorsId).call(addTooltip, { tooltipOperator, zone });
     selection
         .selectAll('.node-label')
         .attr('y', d => (d.data.showBar ? lineHeight / 2 + nodePadding / 2 : 0))
-        .attr('x', nodeWidth / 2);
+        .attr('x', nodeWidth / 2)
+        .attr('font-weight', 'bold')
+        .attr('fill', '#4a4a4a')
+        .attr('text-anchor', 'middle')
+        .attr('alignment-baseline', 'central');
     const groups = selection.filter(d => d.data.group);
     groups
         .selectAll('.group-border')
@@ -12480,43 +12553,76 @@ const mergedNodes = (selection, { tooltipOperator, zone }) => {
         .attr('opacity', d => (d._greyed && d._groupOpen ? greyedOpacity : d._groupOpen ? 1 : 0))
         .attr('height', d => Math.abs(d.parent._groupChildren.length - d.parent.children.length) * (nodeHeight * nodeSpacingFactor) +
         nodePadding +
-        (lineHeight + nodePadding * 2) / 2);
+        (lineHeight + nodePadding * 2) / 2)
+        .attr('fill', 'none')
+        .attr('stroke-dasharray', '2, 5')
+        .attr('stroke', '#b5b5b5')
+        .attr('stroke-width', '1');
     groups
         .selectAll('.group-label')
         .attr('width', nodeWidth)
         .attr('y', nodeHeight / 3)
         .attr('x', nodeWidth / 2)
         .text(d => d.data.label)
-        .attr('opacity', d => (d._groupOpen ? 0 : d._greyed ? greyedOpacity : 1));
+        .attr('opacity', d => (d._groupOpen ? 0 : d._greyed ? greyedOpacity : 1))
+        .attr('fill', '#4a4a4a')
+        .attr('text-anchor', 'middle')
+        .attr('alignment-baseline', 'central')
+        .attr('font-weight', 'bold');
     groups
         .selectAll('.group-button-border')
         .attr('width', nodeWidth)
         .attr('x', 0)
         .attr('y', 0)
-        .attr('height', d => (d._groupOpen ? '0' : '45'));
+        .attr('height', d => (d._groupOpen ? '0' : '45'))
+        .attr('fill', 'none')
+        .attr('stroke-dasharray', '2, 5')
+        .attr('stroke', '#b5b5b5')
+        .attr('stroke-width', '1');
     groups
         .selectAll('.group-button')
         .call(setGroupButtonXY)
         .style('pointer-events', d => (d._greyed ? 'none' : 'auto'))
         .style('stroke-opacity', d => (d._greyed ? greyedOpacity : 1))
-        .attr('fill', d => nodeColours[d.data.type]);
+        .style('display', 'none') // do not show on export
+        .attr('fill', d => nodeColours[d.data.type])
+        .attr('rx', '3px')
+        .attr('ry', '3px');
     groups
         .selectAll('.group-button-text')
         .text(d => (d._groupOpen ? 'Hide' : 'Show'))
+        .style('display', 'none') // do not show on export
         .attr('x', d => (d._groupOpen ? nodeWidth / 2 : nodeWidth / 2))
         .attr('y', d => (d._groupOpen ? nodeMargin + lineHeight + lineHeight / 2 : nodeHeight / 3 + groupButtonHeight - 4))
-        .attr('font-size', () => `${fontSize * 1.3}px`);
+        .attr('font-size', () => `${fontSize * 1.3}px`)
+        .attr('fill', '#4a4a4a')
+        .attr('text-anchor', 'middle')
+        .attr('alignment-baseline', 'central');
     selection.selectAll('.sibling-mask').remove();
     selection
         .filter(d => d._greyed && !d.data.group)
         .append('rect')
         .classed('node-openable', d => !!d.height)
         .classed('sibling-mask mask-openable', true)
+        .attr('fill', 'rgba(250, 250, 250)')
+        .attr('stroke', 'rgba(250, 250, 250)')
+        .attr('fill-opacity', '0.8')
+        .attr('stroke-opacity', '0.9')
+        .attr('stroke-width', '2')
+        .attr('rx', '3px')
+        .attr('ry', '3px')
         .call(setNodeSize);
     selection
         .filter(d => d._greyed && d.data.group)
         .append('rect')
         .classed('sibling-mask', true)
+        .attr('fill', 'rgba(250, 250, 250)')
+        .attr('stroke', 'rgba(250, 250, 250)')
+        .attr('fill-opacity', '0.8')
+        .attr('stroke-opacity', '0.9')
+        .attr('stroke-width', '2')
+        .attr('rx', '3px')
+        .attr('ry', '3px')
         .call(setGroupButtonXY);
     return selection;
 };
@@ -12539,7 +12645,6 @@ const enterNodes = (selection) => {
     const groups = selection.filter(d => d.data.group);
     groups.append('rect').attr('class', 'group-border');
     groups.append('text').attr('class', 'group-label');
-    // groups.append('line').attr('class', 'group-line');
     groups.append('rect').attr('class', 'group-button-border');
     groups.append('rect').attr('class', 'group-button');
     groups.append('text').attr('class', 'group-button-text');
@@ -12549,6 +12654,7 @@ const enterNodes = (selection) => {
         .append('rect')
         .classed('bar-background', true)
         .attr('width', nodeContentWidth)
+        .attr('fill', 'white')
         .call(formatBar);
     withBar
         .append('path')
@@ -12565,7 +12671,9 @@ const enterNodes = (selection) => {
         .attr('x', d => d.data.fraction === 0
         ? nodeWidth / 2
         : fractionWidth(d.data) + nodePadding + (d.data.fraction > fractionCutoff ? -4 : 4))
-        .attr('y', nodeHeight - nodePadding - barHeight / 2);
+        .attr('y', nodeHeight - nodePadding - barHeight / 2)
+        .attr('fill', '#4a4a4a')
+        .attr('alignment-baseline', 'central');
     return selection;
 };
 const mergedLinks = (selection, { togglingGroup, switchingSelection }) => selection
@@ -12875,7 +12983,12 @@ class HierarchyChartComponent {
         this.node.selectAll('.group-button').on('click', this.handleGroupButtonClick.bind(this));
         this.link = this.link
             .data(links, d => `${d.source.parent?.parent?.data.id}-${d.source.parent?.data.id}-${d.source.data.id}-${d.target.data.id}`)
-            .join(enter => enter.append('path').classed('link-path', true).attr('opacity', 0), update => update, exit => exit
+            .join(enter => enter
+            .append('path')
+            .classed('link-path', true)
+            .attr('opacity', 0)
+            .attr('fill', 'none')
+            .attr('stroke', '#b5b5b5'), update => update, exit => exit
             .transition()
             .duration(linkDuration / 2)
             .delay(d => {
@@ -12935,12 +13048,15 @@ class HierarchyChartComponent {
     resetZoom() {
         this.zoomToFit();
     }
+    downloadSvg() {
+        return downloadSvg(this.chart().nativeElement);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | zoom-controls\">\n      <div class=\"is-flex is-flex-direction-column is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <!-- <button class=\"button is-small\" (click)=\"resetZoom()\">\n          <he-svg-icon name=\"collapse\" size=\"20\" />\n        </button> -->\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{rx:3px;ry:3px;fill-opacity:.3;stroke-opacity:.3;pointer-events:auto;stroke-width:2}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button{rx:3px;ry:3px;cursor:pointer;pointer-events:auto}:host ::ng-deep .group-button-text{fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line,:host ::ng-deep .group-button-border{stroke-dasharray:2,5;stroke:#b5b5b5;stroke-width:1;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#0a0a0a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{fill:#4a4a4a;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:3px;ry:3px;stroke-width:2;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#fff}:host ::ng-deep .link-path{fill:none;stroke:#b5b5b5}\n"], dependencies: [{ 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: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | zoom-controls\">\n      <div class=\"is-flex is-flex-direction-column is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"downloadSvg()\">\n          <he-svg-icon name=\"download\" size=\"20\" />\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer;pointer-events:auto}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}\n"], dependencies: [{ 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: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HierarchyChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | zoom-controls\">\n      <div class=\"is-flex is-flex-direction-column is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <!-- <button class=\"button is-small\" (click)=\"resetZoom()\">\n          <he-svg-icon name=\"collapse\" size=\"20\" />\n        </button> -->\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{rx:3px;ry:3px;fill-opacity:.3;stroke-opacity:.3;pointer-events:auto;stroke-width:2}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button{rx:3px;ry:3px;cursor:pointer;pointer-events:auto}:host ::ng-deep .group-button-text{fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line,:host ::ng-deep .group-button-border{stroke-dasharray:2,5;stroke:#b5b5b5;stroke-width:1;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#0a0a0a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{fill:#4a4a4a;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:3px;ry:3px;stroke-width:2;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#fff}:host ::ng-deep .link-path{fill:none;stroke:#b5b5b5}\n"] }]
+            args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | zoom-controls\">\n      <div class=\"is-flex is-flex-direction-column is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"downloadSvg()\">\n          <he-svg-icon name=\"download\" size=\"20\" />\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer;pointer-events:auto}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chart: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], zoomContainer: [{ type: i0.ViewChild, args: ['zoomContainer', { isSignal: true }] }], chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
 
 const filterTermTypes$1 = [
@@ -13362,11 +13478,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         text && setTimeout(() => this.tooltip().open({ data: text }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@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 if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</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\">\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\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg()\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\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\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\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\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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.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: "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: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@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 if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</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\">\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\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\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\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\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\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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.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: "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: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, NgbDropdownModule, BarChartComponent], template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@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 if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</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\">\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\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg()\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\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\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\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\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, NgbDropdownModule, BarChartComponent], template: "<div class=\"is-mb-3\">\n  <ng-content />\n</div>\n\n@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 if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</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\">\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\n    <div class=\"is-flex is-justify-content-space-between w-100\">\n      <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-controls=\"download-menu\">\n          <span class=\"is-pr-1 is-align-middle\">Download</span>\n          <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n        </button>\n        <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n          <div class=\"dropdown-content\">\n            <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n              <he-svg-icon size=\"20\" name=\"chart\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n            </a>\n\n            <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n              <he-svg-icon size=\"20\" name=\"table\" />\n              <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n            </a>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\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\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\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\n<div\n  class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n  @for (value of values(); track trackByLog(value)) {\n    @if (value.subLogs?.length) {\n      <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n        {{ value.subLogs.length }} others grouped together\n      </span>\n    }\n\n    <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n      <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n      @if (value.subLogs?.length) {\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (subValue of value.subLogs; track trackByLog(subValue)) {\n            <span class=\"is-size-7\">{{ subValue.name }}</span>\n          }\n        </div>\n      } @else {\n        <span class=\"is-size-7\">{{ value.name }}</span>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -13377,7 +13493,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.nodeStoreService = inject(HeNodeStoreService);
         this.key = input('impacts', ...(ngDevMode ? [{ debugName: "key" }] : []));
         this.filterTermTypes = input([], ...(ngDevMode ? [{ debugName: "filterTermTypes" }] : []));
-        this.impactAssessments = toSignal(this.nodeStoreService.findByState$(NodeType.ImpactAssessment, DataState.recalculated));
+        this.impactAssessments = computed(() => this.nodeStoreService.findByState(NodeType.ImpactAssessment, DataState.recalculated), ...(ngDevMode ? [{ debugName: "impactAssessments" }] : []));
         this.indicatorPerImpactAssessment = computed(() => groupNodesByTerm(this.impactAssessments(), this.key()), ...(ngDevMode ? [{ debugName: "indicatorPerImpactAssessment" }] : []));
         this.terms = computed(() => Object.values(this.indicatorPerImpactAssessment() ?? {})
             .filter(({ term, values }) => termAllowed$1(this.filterTermTypes(), term) &&
@@ -13435,11 +13551,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: 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: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: 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: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg()\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <button\n    class=\"button is-small is-ghost\"\n    (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\"\n    ngbTooltip=\"Download Chart (SVG)\"\n    placement=\"right\">\n    <he-svg-icon name=\"download\" />\n  </button>\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart\n    #chart=\"barChart\"\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [config]=\"chartConfig()\"\n    [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
 
 var View$1;
@@ -13506,10 +13622,9 @@ class ImpactAssessmentsProductsComponent {
         }), ...(ngDevMode ? [{ debugName: "showView" }] : []));
         this.views = computed(() => nodeKeyViews$1[this.nodeKey()]?.filter(view => this.showView()[view]) ?? [], ...(ngDevMode ? [{ debugName: "views" }] : []));
         this.selectedView = signal(View$1.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
-        this.cycles = toSignal(this.nodeStoreService.findByState$(NodeType.Cycle, DataState.original));
-        this.originalImpactAssessments = toSignal(this.nodeStoreService.findByState$(NodeType.ImpactAssessment, DataState.original));
-        this._allImpactAssessments = toSignal(this.nodeStoreService.find$(NodeType.ImpactAssessment));
-        this.impactAssessments = computed(() => this._allImpactAssessments()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "impactAssessments" }] : []));
+        this.cycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, DataState.original), ...(ngDevMode ? [{ debugName: "cycles" }] : []));
+        this.originalImpactAssessments = computed(() => this.nodeStoreService.findByState(NodeType.ImpactAssessment, DataState.original), ...(ngDevMode ? [{ debugName: "originalImpactAssessments" }] : []));
+        this.impactAssessments = computed(() => this.nodeStoreService.findByState(NodeType.ImpactAssessment, this.dataState()), ...(ngDevMode ? [{ debugName: "impactAssessments" }] : []));
         this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
         this.ogirinalSelectedImpactAssessment = computed(() => this.originalImpactAssessments()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedImpactAssessment" }] : []));
         this.selectedImpactAssessment = computed(() => this.impactAssessments()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "selectedImpactAssessment" }] : []));
@@ -13581,7 +13696,7 @@ class ImpactAssessmentsProductsComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\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    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\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</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\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      </div>\n    </div>\n  }\n</ng-template>\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", styles: [":host{display:block}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"] }, { 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: "20.3.13", 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: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\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    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\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 #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\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</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\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      </div>\n    </div>\n  }\n</ng-template>\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", styles: [":host{display:block}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"] }, { 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: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -13605,7 +13720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         EllipsisPipe,
                         PrecisionPipe,
                         KeyToLabelPipe
-                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\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    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\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</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\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      </div>\n    </div>\n  }\n</ng-template>\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", styles: [":host{display:block}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: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\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    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\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 #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\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</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\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      </div>\n    </div>\n  }\n</ng-template>\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", styles: [":host{display:block}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: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], enableFilterMethodModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFilterMethodModel", required: false }] }] } });
 
 const hasValidationError = (errors = [], level) => {
@@ -14067,9 +14182,8 @@ class SitesNodesComponent {
         }), ...(ngDevMode ? [{ debugName: "showView" }] : []));
         this.views = computed(() => nodeKeyViews[this.nodeKey()]?.filter(view => this.showView()[view]) ?? [], ...(ngDevMode ? [{ debugName: "views" }] : []));
         this.selectedView = signal(View.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
-        this.originalSites = toSignal(this.nodeStoreService.findByState$(NodeType.Site, DataState.original));
-        this._allSites = toSignal(this.nodeStoreService.find$(NodeType.Site));
-        this.sites = computed(() => this._allSites()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "sites" }] : []));
+        this.originalSites = computed(() => this.nodeStoreService.findByState(NodeType.Site, DataState.original), ...(ngDevMode ? [{ debugName: "originalSites" }] : []));
+        this.sites = computed(() => this.nodeStoreService.findByState(NodeType.Site, this.dataState()), ...(ngDevMode ? [{ debugName: "sites" }] : []));
         this.showSelectSite = computed(() => [View.chart, View.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectSite" }] : []));
         this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
         this.ogirinalSelectedSite = computed(() => this.originalSites()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedSite" }] : []));
@@ -14120,7 +14234,7 @@ class SitesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></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=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></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=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\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 #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\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", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, decorators: [{
             type: Component$1,
@@ -14143,7 +14257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         PrecisionPipe,
                         CapitalizePipe,
                         SitesManagementChartComponent
-                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></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=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\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          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\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", styles: [":host{display:block}\n"] }]
+                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [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]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></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=\"is-flex is-flex-wrap-wrap is-gap-8\">\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        </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    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n\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 #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\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              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\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      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\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", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], enableChart: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableChart", required: false }] }] } });
 
 class TermsPropertyContentComponent {
@@ -14206,5 +14320,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map