@hestia-earth/ui-components 0.41.36 → 0.41.38

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

@@ -2314,7 +2314,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", 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 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\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()\" [secondaryLinks]=\"secondaryLinks()\">\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>.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>.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{padding:.5rem 1rem;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}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", "secondaryLinks", "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: "21.0.6", 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 }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", 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 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\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        [class.is-pr-3]=\"position() === 'right'\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\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>.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>.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{padding:.5rem 1rem;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}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", "secondaryLinks", "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: "21.0.6", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -2331,7 +2331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[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=\"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 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\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()\" [secondaryLinks]=\"secondaryLinks()\">\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>.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>.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{padding:.5rem 1rem;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}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 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\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        [class.is-pr-3]=\"position() === 'right'\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\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>.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>.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{padding:.5rem 1rem;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}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 }] }], secondaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLinks", 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']
@@ -5404,7 +5404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-const noValues = ['None'];
+const noValues = ['None', null, undefined];
 class SortByPipe {
     transform(value, key, orders = ['asc']) {
         const keys = Array.isArray(key) ? key : [key];
@@ -8720,6 +8720,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['class.is-none']
             }] } });
 
+const commonKeys = ['term', 'contribution', 'value', 'coefficient'];
+class NodeLogsModelsContributionsComponent {
+    constructor() {
+        this.nodeService = inject(HeNodeService);
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.nodeKey = input(...(ngDevMode ? [undefined, { debugName: "nodeKey" }] : []));
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.isArray = (v) => Array.isArray(v);
+        this.contributionNodeKey = computed(() => (this.nodeKey() === 'impacts'
+            ? 'emissionsResourceUse'
+            : this.nodeKey() === 'endpoints'
+                ? 'impacts'
+                : undefined), ...(ngDevMode ? [{ debugName: "contributionNodeKey" }] : []));
+        this.contributionIndicators = computed(() => (this.node()[this.contributionNodeKey()] ?? []), ...(ngDevMode ? [{ debugName: "contributionIndicators" }] : []));
+        this.contributionResource = rxResource({
+            params: () => ({ node: this.node() }),
+            stream: ({ params: { node } }) => this.nodeService.getContributions$(node)
+        });
+        this.contributions = computed(() => this.contributionResource.value() ?? {}, ...(ngDevMode ? [{ debugName: "contributions" }] : []));
+        this.loading = this.contributionResource.isLoading;
+        this.modelTermId = computed(() => this.model()?.model?.term || this.model()?.config?.value, ...(ngDevMode ? [{ debugName: "modelTermId" }] : []));
+        this.modelMethodId = computed(() => this.model()?.model?.model || this.model()?.config?.model, ...(ngDevMode ? [{ debugName: "modelMethodId" }] : []));
+        this.rows = computed(() => this.contributionIndicators().map((indicator, index) => {
+            const contribution = this.contributions()?.[this.contributionNodeKey()]?.[index]?.[this.modelTermId()]?.[this.modelMethodId()];
+            return {
+                ...Object.fromEntries(Object.entries(indicator).map(([key, value]) => [key, valueToString(value)])),
+                contribution: contribution || (indicator.value === 0 ? 0 : null),
+                coefficient: contribution ? toPrecision(contribution / indicator.value) : null
+            };
+        }), ...(ngDevMode ? [{ debugName: "rows" }] : []));
+        this.columns = computed(() => [
+            ...commonKeys,
+            ...unique(this.rows()
+                .map(row => Object.keys(row))
+                .flat()).filter(v => ![...ignoreKeys$2, ...commonKeys].includes(v))
+        ], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.sortBy = signal('contribution', ...(ngDevMode ? [{ debugName: "sortBy" }] : []));
+        this.sortOrder = signal('desc', ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
+    }
+    trackByRow(row) {
+        return JSON.stringify(row);
+    }
+    toggleSort(sortBy) {
+        const sortOrder = this.sortOrder() === 'asc' ? 'desc' : 'asc';
+        this.sortBy.set(sortBy);
+        this.sortOrder.set(sortOrder);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsContributionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeLogsModelsContributionsComponent, isStandalone: true, selector: "he-node-logs-models-contributions", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (loading()) {\n  <div class=\"is-my-3 has-text-center\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" />\n  </div>\n}\n\n<div class=\"table-container\">\n  <table class=\"table is-dark is-fullwidth\">\n    <tbody>\n      <tr>\n        <td class=\"has-border-right\">Contribution details</td>\n        <td>\n          @if (rows().length && columns().length) {\n            <table class=\"table is-dark is-bordered is-striped\">\n              @let sorting = $any({});\n              <thead>\n                <tr>\n                  @for (header of columns(); track header) {\n                    <th class=\"has-text-white\">\n                      <div class=\"is-nowrap\">\n                        {{ header }}\n                        <ng-container *ngTemplateOutlet=\"sortColumn; context: { column: header }\" />\n                      </div>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of rows() | sortBy: sortBy() : sortOrder(); track trackByRow(row)) {\n                  <tr>\n                    @for (header of columns(); track header) {\n                      <td>\n                        <ng-container *ngTemplateOutlet=\"tableRow; context: { value: row[header] }\" />\n                        @if (header === 'coefficient' && row.value === 0) {\n                          <sup class=\"is-pl-1\">*</sup>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n\n          <p class=\"is-size-7 is-italic has-text-white\">\n            <sup>*</sup>\n            Contributions with\n            <code>value=0</code>\n            are not stored and coefficient will appear as\n            <code>-</code>\n            . Please see the \"Missing Coefficients\" list for more details.\n          </p>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #tableRow let-value=\"value\">\n  <div [innerHTML]=\"value | default: '-'\"></div>\n</ng-template>\n\n<ng-template #sortColumn let-column=\"column\">\n  <a class=\"is-p-1 has-text-white\" (click)=\"toggleSort(column)\">\n    @if (sortBy() === column) {\n      @if (sortOrder() === 'asc') {\n        <he-svg-icon name=\"sort-caret-up-filled\" size=\"16\" />\n      } @else {\n        <he-svg-icon name=\"sort-caret-down-filled\" size=\"16\" />\n      }\n    } @else {\n      <he-svg-icon name=\"sort-caret-stacked-filled-stacked\" size=\"16\" />\n    }\n  </a>\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: "pipe", type: SortByPipe, name: "sortBy" }, { kind: "pipe", type: DefaultPipe, name: "default" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsContributionsComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-node-logs-models-contributions', imports: [NgTemplateOutlet, HESvgIconComponent, SortByPipe, DefaultPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading()) {\n  <div class=\"is-my-3 has-text-center\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" />\n  </div>\n}\n\n<div class=\"table-container\">\n  <table class=\"table is-dark is-fullwidth\">\n    <tbody>\n      <tr>\n        <td class=\"has-border-right\">Contribution details</td>\n        <td>\n          @if (rows().length && columns().length) {\n            <table class=\"table is-dark is-bordered is-striped\">\n              @let sorting = $any({});\n              <thead>\n                <tr>\n                  @for (header of columns(); track header) {\n                    <th class=\"has-text-white\">\n                      <div class=\"is-nowrap\">\n                        {{ header }}\n                        <ng-container *ngTemplateOutlet=\"sortColumn; context: { column: header }\" />\n                      </div>\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (row of rows() | sortBy: sortBy() : sortOrder(); track trackByRow(row)) {\n                  <tr>\n                    @for (header of columns(); track header) {\n                      <td>\n                        <ng-container *ngTemplateOutlet=\"tableRow; context: { value: row[header] }\" />\n                        @if (header === 'coefficient' && row.value === 0) {\n                          <sup class=\"is-pl-1\">*</sup>\n                        }\n                      </td>\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          }\n\n          <p class=\"is-size-7 is-italic has-text-white\">\n            <sup>*</sup>\n            Contributions with\n            <code>value=0</code>\n            are not stored and coefficient will appear as\n            <code>-</code>\n            . Please see the \"Missing Coefficients\" list for more details.\n          </p>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<ng-template #tableRow let-value=\"value\">\n  <div [innerHTML]=\"value | default: '-'\"></div>\n</ng-template>\n\n<ng-template #sortColumn let-column=\"column\">\n  <a class=\"is-p-1 has-text-white\" (click)=\"toggleSort(column)\">\n    @if (sortBy() === column) {\n      @if (sortOrder() === 'asc') {\n        <he-svg-icon name=\"sort-caret-up-filled\" size=\"16\" />\n      } @else {\n        <he-svg-icon name=\"sort-caret-down-filled\" size=\"16\" />\n      }\n    } @else {\n      <he-svg-icon name=\"sort-caret-stacked-filled-stacked\" size=\"16\" />\n    }\n  </a>\n</ng-template>\n" }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }] } });
+
 const groupTerms = (terms) => terms.reduce((prev, curr) => ({ ...prev, [curr['@id']]: curr }), {});
 const logIcon = {
     [LogStatus.success]: 'checkmark',
@@ -8828,6 +8883,7 @@ class NodeLogsModelsComponent {
         this.isEmpty = isEmpty;
         this.schemaBaseUrl = schemaBaseUrl();
         this.isExternal = isExternal();
+        this.NodeType = NodeType;
         this.CycleFunctionalUnit = CycleFunctionalUnit;
         this.EmissionMethodTier = EmissionMethodTier;
         this.LogStatus = LogStatus;
@@ -8837,6 +8893,7 @@ class NodeLogsModelsComponent {
         this.isInSystemBoundary = isInSystemBoundary;
         this.showLegend = signal(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
         this.onlyRequired = signal(true, ...(ngDevMode ? [{ debugName: "onlyRequired" }] : []));
+        this.showContributionsLogs = signal(false, ...(ngDevMode ? [{ debugName: "showContributionsLogs" }] : []));
         this.schemaType = computed(() => valuesSchemaType(this.originalValues()) || valuesSchemaType(this.recalculatedValues()), ...(ngDevMode ? [{ debugName: "schemaType" }] : []));
         this.filteredType = computed(() => this.filterTermTypesLabel() || this.filterTermTypes()?.map(termTypeLabel).join(' & '), ...(ngDevMode ? [{ debugName: "filteredType" }] : []));
         this.functionalUnit = computed(() => 'functionalUnit' in this.node()
@@ -9023,7 +9080,7 @@ class NodeLogsModelsComponent {
         return subValues.every(v => v.configModels.some(vv => [LogStatus.success, LogStatus.notRequired, LogStatus.dataProvided].includes(vv.status)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, cycle: { classPropertyName: "cycle", publicName: "cycle", 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                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\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(undefined)\">\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=\"100\">\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=\"100\">\n            <p class=\"is-p-1\">\n              @if (noDataMessage()) {\n                <span>{{ noDataMessage() }}</span>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n              }\n            </p>\n          </td>\n        </tr>\n      }\n      @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n        @let configModels = $any(blankNode).configModels;\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 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.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of 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 (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 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\">{{ status.value | capitalize }}</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>Only show {{ filteredType() }} included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n  <span>No original data was provided and no gap filling occurred</span>\n  @if (term() && !isInSystemBoundary(term()['@id'])) {\n    <span class=\"is-pl-1\">as</span>\n    <i class=\"is-px-1\">{{ term().name }}</i>\n    <span>is not in the HESTIA system boundary</span>\n  }\n  <span>.</span>\n</ng-template>\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 {\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  }\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 td>div{min-height:24px}::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" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, cycle: { classPropertyName: "cycle", publicName: "cycle", 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                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\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(undefined)\">\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=\"100\">\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=\"100\">\n            <p class=\"is-p-1\">\n              @if (noDataMessage()) {\n                <span>{{ noDataMessage() }}</span>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n              }\n            </p>\n          </td>\n        </tr>\n      }\n      @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n        @let configModels = $any(blankNode).configModels;\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 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.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of 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 (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 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\">{{ status.value | capitalize }}</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>Only show {{ filteredType() }} included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n  <span>No original data was provided and no gap filling occurred</span>\n  @if (term() && !isInSystemBoundary(term()['@id'])) {\n    <span class=\"is-pl-1\">as</span>\n    <i class=\"is-px-1\">{{ term().name }}</i>\n    <span>is not in the HESTIA system boundary</span>\n  }\n  <span>.</span>\n</ng-template>\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 {\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  }\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({ model }) : 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-model=\"model\">\n  @if (showContributionsLogs()) {\n    <div class=\"has-text-right is-mb-1\">\n      <button class=\"button is-white is-small is-outlined\" (click)=\"showContributionsLogs.set(false)\">\n        Hide contributions details\n      </button>\n    </div>\n    @if (nodeType() === NodeType.ImpactAssessment) {\n      <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model\" />\n    }\n  } @else {\n    <div class=\"has-text-right is-mb-1\">\n      <button class=\"button is-white is-small is-outlined\" (click)=\"showContributionsLogs.set(true)\">\n        Show contributions details\n      </button>\n    </div>\n    <he-node-logs-models-logs [logs]=\"model.logs\" />\n  }\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 td>div{min-height:24px}::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: NodeLogsModelsContributionsComponent, selector: "he-node-logs-models-contributions", inputs: ["node", "nodeKey", "model"] }, { 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" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
             type: Component$1,
@@ -9047,9 +9104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         CapitalizePipe,
                         NodeLogsModelsLogsComponent,
                         NodeLogsModelsLogsStatusComponent,
+                        NodeLogsModelsContributionsComponent,
                         HESvgIconComponent,
                         GuideOverlayComponent
-                    ], 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                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\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(undefined)\">\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=\"100\">\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=\"100\">\n            <p class=\"is-p-1\">\n              @if (noDataMessage()) {\n                <span>{{ noDataMessage() }}</span>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n              }\n            </p>\n          </td>\n        </tr>\n      }\n      @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n        @let configModels = $any(blankNode).configModels;\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 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.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of 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 (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 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\">{{ status.value | capitalize }}</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>Only show {{ filteredType() }} included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n  <span>No original data was provided and no gap filling occurred</span>\n  @if (term() && !isInSystemBoundary(term()['@id'])) {\n    <span class=\"is-pl-1\">as</span>\n    <i class=\"is-px-1\">{{ term().name }}</i>\n    <span>is not in the HESTIA system boundary</span>\n  }\n  <span>.</span>\n</ng-template>\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 {\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  }\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 td>div{min-height:24px}::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"] }]
+                    ], 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                  [resultFormatter]=\"termFormatter\"\n                  [inputFormatter]=\"termFormatter\"\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(undefined)\">\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=\"100\">\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=\"100\">\n            <p class=\"is-p-1\">\n              @if (noDataMessage()) {\n                <span>{{ noDataMessage() }}</span>\n              } @else {\n                <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n              }\n            </p>\n          </td>\n        </tr>\n      }\n      @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n        @let configModels = $any(blankNode).configModels;\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 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.isRecalculated) {\n              @if (blankNode.allParallel) {\n                @for (model of 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 (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 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\">{{ status.value | capitalize }}</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>Only show {{ filteredType() }} included in the default HESTIA system boundary</span>\n        </label>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n  <span>No original data was provided and no gap filling occurred</span>\n  @if (term() && !isInSystemBoundary(term()['@id'])) {\n    <span class=\"is-pl-1\">as</span>\n    <i class=\"is-px-1\">{{ term().name }}</i>\n    <span>is not in the HESTIA system boundary</span>\n  }\n  <span>.</span>\n</ng-template>\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 class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></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 {\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  }\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({ model }) : 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-model=\"model\">\n  @if (showContributionsLogs()) {\n    <div class=\"has-text-right is-mb-1\">\n      <button class=\"button is-white is-small is-outlined\" (click)=\"showContributionsLogs.set(false)\">\n        Hide contributions details\n      </button>\n    </div>\n    @if (nodeType() === NodeType.ImpactAssessment) {\n      <he-node-logs-models-contributions [node]=\"node()\" [nodeKey]=\"nodeKey()\" [model]=\"model\" />\n    }\n  } @else {\n    <div class=\"has-text-right is-mb-1\">\n      <button class=\"button is-white is-small is-outlined\" (click)=\"showContributionsLogs.set(true)\">\n        Show contributions details\n      </button>\n    </div>\n    <he-node-logs-models-logs [logs]=\"model.logs\" />\n  }\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 td>div{min-height:24px}::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 }] }], cycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycle", required: false }] }] } });
 
 var View$4;
@@ -9345,15 +9403,23 @@ class NodeValueDetailsComponent {
         this.nodeType = input.required(...(ngDevMode ? [{ debugName: "nodeType" }] : []));
         this.dataState = input.required(...(ngDevMode ? [{ debugName: "dataState" }] : []));
         this.dataKey = input.required(...(ngDevMode ? [{ debugName: "dataKey" }] : []));
+        this.aggregated = input(false, ...(ngDevMode ? [{ debugName: "aggregated" }] : []));
         this.nodes = computed(() => this.data()?.nodes || [], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
         this.node = computed(() => this.nodes()?.[0], ...(ngDevMode ? [{ debugName: "node" }] : []));
+        this.term = computed(() => this.node()?.term, ...(ngDevMode ? [{ debugName: "term" }] : []));
         this.type = computed(() => this.node()?.['@type'], ...(ngDevMode ? [{ debugName: "type" }] : []));
         this.type$ = toObservable(this.type);
         this.showInline = computed(() => this.nodes()?.length === 1, ...(ngDevMode ? [{ debugName: "showInline" }] : []));
         this.showDistribution = signal(undefined, ...(ngDevMode ? [{ debugName: "showDistribution" }] : []));
         this.chartDistribution = computed(() => this.showDistribution()?.distribution.flat(), ...(ngDevMode ? [{ debugName: "chartDistribution" }] : []));
         this.chartValue = computed(() => Array.isArray(this.showDistribution()?.value) ? this.showDistribution()?.value?.[0] : this.showDistribution()?.value, ...(ngDevMode ? [{ debugName: "chartValue" }] : []));
-        this.chartLabel = computed(() => `${this.node()?.term.name} in ${this.node()?.term.units}`, ...(ngDevMode ? [{ debugName: "chartLabel" }] : []));
+        this.chartLabel = computed(() => `${this.term()?.name} in ${this.term()?.units}`, ...(ngDevMode ? [{ debugName: "chartLabel" }] : []));
+        this.models = computed(() => this.aggregated() && [SchemaType.Emission, SchemaType.Indicator].includes(this.type())
+            ? findModels(this.term()?.['@id']).map(v => ({
+                name: v.model,
+                link: valueLink({ '@type': NodeType.Term, '@id': v.model })
+            }))
+            : [], ...(ngDevMode ? [{ debugName: "models" }] : []));
         combineLatest([this.type$, this.schemaKeys$])
             .pipe(filter(([type, schemaKeys]) => !!type && !!schemaKeys?.length))
             .subscribe(([type]) => {
@@ -9400,7 +9466,7 @@ class NodeValueDetailsComponent {
         this.updateKeys(selectedKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  @if (node().distribution?.length) {\n    <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n      <b>distribution</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n    <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null }, aggregated: { classPropertyName: "aggregated", publicName: "aggregated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, decorators: [{
             type: Component$1,
@@ -9408,13 +9474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgTemplateOutlet,
                         CdkDrag,
                         CdkDropList,
-                        LinkKeyValueComponent,
-                        HESvgIconComponent,
                         NgbTooltipModule,
                         NgbDropdownModule,
+                        LinkKeyValueComponent,
+                        HESvgIconComponent,
                         DistributionChartComponent
-                    ], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  @if (node().distribution?.length) {\n    <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n      <b>distribution</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n    <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeType", required: true }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: true }] }] } });
+                    ], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeType", required: true }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: true }] }], aggregated: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregated", required: false }] }] } });
 
 const isValidDate = (date) => (date || '').trim().length === 10;
 const dateRange = (startDate, endDate) => {
@@ -9712,7 +9778,7 @@ class CyclesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 cycle['@id']; let cycleIndex = $index) {\n                <tr [class.is-suggested]=\"$any(cycle).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(cycle).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ cycleIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(cycle) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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:106px;width:106px}\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", "collapsedClass"], 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", "cycle"] }, { 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: "21.0.6", 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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 cycle['@id']; let cycleIndex = $index) {\n                <tr [class.is-suggested]=\"$any(cycle).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(cycle).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ cycleIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(cycle) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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:106px;width:106px}\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", "collapsedClass"], 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", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey", "aggregated"] }, { 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: "21.0.6", ngImport: i0, type: CyclesNodesComponent, decorators: [{
             type: Component$1,
@@ -9738,7 +9804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         KeyToLabelPipe,
                         PrecisionPipe,
                         PluralizePipe
-                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 cycle['@id']; let cycleIndex = $index) {\n                <tr [class.is-suggested]=\"$any(cycle).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(cycle).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ cycleIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(cycle) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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:106px;width:106px}\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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 cycle['@id']; let cycleIndex = $index) {\n                <tr [class.is-suggested]=\"$any(cycle).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(cycle).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ cycleIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(cycle) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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:106px;width:106px}\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 {
@@ -11409,7 +11475,12 @@ const customErrorMessage = {
         .filter(Boolean)
         .join('\n'),
     'should set the depth': ({ params }) => `The value of Emission ${code(params.term['@id'])} can change significantly based on the soil depth taken into account.
-    Please consider adding ${schemaLink('Emission#depthUpper', 'depthUpper')} and ${schemaLink('Emission#depthLower', 'depthLower')} fields to the Emission.`
+    Please consider adding ${schemaLink('Emission#depthUpper', 'depthUpper')} and ${schemaLink('Emission#depthLower', 'depthLower')} fields to the Emission.`,
+    'must include practices for plantation weighting': () => `For permanent crop aggregations, we must be able to weight based on the plantation phase.
+    This means practices ${externalNodeLink({
+        '@type': NodeType.Term,
+        '@id': 'plantationLifespan'
+    })} and ${externalNodeLink({ '@type': NodeType.Term, '@id': 'plantationProductiveLifespan' })} must have values.`
 };
 const requiredPropertyError = (message, error) => {
     const field = message.split("'")[1].replace("'", '');
@@ -13029,9 +13100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+/* eslint-disable complexity */
 var ChartNodeType;
 (function (ChartNodeType) {
     ChartNodeType["midpoint"] = "midpoint";
+    ChartNodeType["category"] = "category";
     ChartNodeType["emission"] = "emission";
     ChartNodeType["endpoint"] = "endpoint";
     ChartNodeType["input"] = "input";
@@ -13041,6 +13114,7 @@ var ChartNodeType;
 const nodeBorderColours = {
     [ChartNodeType.endpoint]: '#193957',
     [ChartNodeType.midpoint]: '#249DA5',
+    [ChartNodeType.category]: '#DC7033',
     [ChartNodeType.emission]: '#498F78',
     [ChartNodeType.input]: '#FFC000',
     [ChartNodeType.operation]: '#D0CABA'
@@ -13048,6 +13122,7 @@ const nodeBorderColours = {
 const nodeColours = {
     [ChartNodeType.endpoint]: '#DBE3EA',
     [ChartNodeType.midpoint]: '#D3EBED',
+    [ChartNodeType.category]: '#FFDEC0',
     [ChartNodeType.emission]: '#D5F3D8',
     [ChartNodeType.input]: '#FFE8A3',
     [ChartNodeType.operation]: '#FBF4DF'
@@ -13055,6 +13130,7 @@ const nodeColours = {
 const legend = [
     { type: ChartNodeType.endpoint, text: 'Endpoint / Single Score' },
     { type: ChartNodeType.midpoint, text: 'Characterised Indicator' },
+    { type: ChartNodeType.category, text: 'Category' },
     { type: ChartNodeType.emission, text: 'Emission / Resource Use' },
     { type: ChartNodeType.input, text: 'Input' },
     { type: ChartNodeType.operation, text: 'Operation' }
@@ -13083,6 +13159,11 @@ const sumIndicators = (data) => {
     const totalValues = data.reduce((acc, log) => {
         acc[log.indicator] = acc[log.indicator] || [];
         !isUndefined(log.weightedValue) && acc[log.indicator].push(log.weightedValue);
+        if (log.category) {
+            const categoryKey = `${log.indicator}-${log.category}`;
+            acc[categoryKey] = acc[categoryKey] || [];
+            !isUndefined(log.weightedValue) && acc[categoryKey].push(log.weightedValue);
+        }
         return acc;
     }, {});
     return Object.fromEntries(Object.entries(totalValues).map(([key, values]) => [
@@ -13094,6 +13175,8 @@ const sumIndicators = (data) => {
 const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log) => {
     const contributorType = typeMapping[terms[log.contributor]?.termType] || ChartNodeType.input;
     const indicatorType = typeMapping[terms[log.indicator]?.termType];
+    const categoryKey = log.category ? `${log.indicator}-${log.category}` : undefined;
+    const parentTotal = categoryKey ? totals[categoryKey] : totals[log.indicator];
     const contributorNode = {
         id: log.contributor,
         ...getUnitsAndLabel(terms[log.contributor], log.contributor),
@@ -13101,7 +13184,7 @@ const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log
         value: log.value,
         weightedValue: log.weightedValue,
         modelId: log.modelId,
-        fraction: safeDivide(log.weightedValue, totals[log.indicator]),
+        fraction: safeDivide(log.weightedValue, parentTotal),
         children: contributorType === ChartNodeType.emission
             ? log.inputs.map(i => ({
                 ...i,
@@ -13117,16 +13200,36 @@ const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log
             }))
             : []
     };
-    acc[log.indicator]
-        ? acc[log.indicator].children.push(contributorNode)
-        : (acc[log.indicator] = {
-            id: log.indicator,
-            ...getUnitsAndLabel(terms[log.indicator], log.indicator),
-            modelId: log.modelId,
-            type: indicatorType,
-            value: totals[log.indicator],
-            children: [contributorNode]
-        });
+    acc[log.indicator] = acc[log.indicator] || {
+        id: log.indicator,
+        ...getUnitsAndLabel(terms[log.indicator], log.indicator),
+        modelId: log.modelId,
+        type: indicatorType,
+        value: totals[log.indicator],
+        children: []
+    };
+    if (log.category) {
+        const categoryId = `cat-${log.indicator}-${log.category}`;
+        let categoryNode = acc[log.indicator].children.find(c => c.id === categoryId);
+        if (!categoryNode) {
+            categoryNode = {
+                id: categoryId,
+                label: log.category,
+                type: ChartNodeType.category,
+                units: '',
+                value: totals[categoryKey],
+                weightedValue: totals[categoryKey],
+                modelId: log.modelId,
+                fraction: safeDivide(totals[categoryKey], totals[log.indicator]),
+                children: []
+            };
+            acc[log.indicator].children.push(categoryNode);
+        }
+        categoryNode.children.push(contributorNode);
+    }
+    else {
+        acc[log.indicator].children.push(contributorNode);
+    }
     return acc;
 }, {});
 
@@ -13523,7 +13626,14 @@ class HierarchyChartComponent {
         this.nodeColours = nodeColours;
         this.expandDownload = signal(false, ...(ngDevMode ? [{ debugName: "expandDownload" }] : []));
         this.includedTypes = signal([], ...(ngDevMode ? [{ debugName: "includedTypes" }] : []));
-        this.legend = computed(() => legend.filter(({ type }) => this.includedTypes().includes(type)), ...(ngDevMode ? [{ debugName: "legend" }] : []));
+        this.legend = computed(() => {
+            const includedTypes = this.includedTypes();
+            const defaultLegend = legend.filter(({ type }) => includedTypes.includes(type));
+            const categoryLabel = this.data().find(d => d.categoryLabel)?.categoryLabel;
+            return categoryLabel
+                ? defaultLegend.map(l => (l.type === ChartNodeType.category ? { ...l, text: categoryLabel } : l))
+                : defaultLegend;
+        }, ...(ngDevMode ? [{ debugName: "legend" }] : []));
         this.totalsPerIndicator = computed(() => sumIndicators(this.data()), ...(ngDevMode ? [{ debugName: "totalsPerIndicator" }] : []));
         this.indicators = computed(() => groupIndicators(this.data(), this.terms(), this.totalsPerIndicator()), ...(ngDevMode ? [{ debugName: "indicators" }] : []));
         this.indicatorArray = computed(() => Object.values(this.indicators()), ...(ngDevMode ? [{ debugName: "indicatorArray" }] : []));
@@ -13581,7 +13691,7 @@ class HierarchyChartComponent {
         };
         effect(() => {
             if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chartRef()?.nativeElement].every(Boolean)) {
-                this.init();
+                untracked(() => this.init());
             }
         });
     }
@@ -13632,8 +13742,11 @@ class HierarchyChartComponent {
         const innerHeight = (this.root.children.length - 1) * nodeHeight * nodeSpacingFactor + nodeHeight;
         this.yMin = (nodeHeight - innerHeight) / 2 - margin.top;
         this.yTotal = innerHeight + margin.top + margin.bottom;
+        const numLayers = this.legend().length;
+        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
+        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
         this.svg
-            .attr('viewBox', [-margin.left, this.yMin, width, this.yTotal].join(' '))
+            .attr('viewBox', [-margin.left, this.yMin, totalWidth, this.yTotal].join(' '))
             .attr('font-size', `${fontSize}px`);
         this.node = this.svg.append('g').selectAll('g');
         this.link = this.svg.append('g').selectAll('path');
@@ -13648,9 +13761,12 @@ class HierarchyChartComponent {
         const tree$1 = treeLayout(root);
         const links = tree$1.links().filter(d => d.source.data.type !== ChartNodeType.root) || [];
         const nodes = tree$1.descendants().reverse();
+        const numLayers = this.legend().length;
+        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
+        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
+        const offset = Math.max(0, (totalWidth - margin.left - margin.right - chartWidth) / 2);
         nodes.forEach(d => {
-            d.y =
-                (d.depth - 1 + (Object.keys(ChartNodeType).length - 1 - this.legend().length) / 2) * (nodeWidth + layerSpacing);
+            d.y = offset + (d.depth - 1) * (nodeWidth + layerSpacing);
         });
         // By default the tree expands symmetrically upwards and downwards from the selected node.
         // We move children down to prevent expansion upwards or up to minimise expansion downwards
@@ -13677,11 +13793,12 @@ class HierarchyChartComponent {
                 previousTanslateY: translateY + previousTanslateY
             };
         };
-        const { previousYTotal: newHeight } = [2, 3, 4, 5].reduce(minimiseHeight, {
+        const depths = Array.from({ length: numLayers }, (_, i) => i + 2);
+        const { previousYTotal: newHeight } = depths.reduce(minimiseHeight, {
             previousTanslateY: 0,
             previousYTotal: this.yTotal
         });
-        this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, width, newHeight].join(' '));
+        this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, totalWidth, newHeight].join(' '));
         this.node = this.node
             .data(nodes, d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
             .join(enter => enter
@@ -13774,6 +13891,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], 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></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 | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\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  @if (tipData.modelValue) {\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  }\n  @if (tipData.terms?.length) {\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  }\n</ng-template>\n", styles: [".chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.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}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartRef: [{ type: i0.ViewChild, args: ['chart', { 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"] }] } });
 
+class CyclesEmissionsCategoryService {
+    constructor() {
+        this.data = loadResourceKey('emission-groupings.json');
+        this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
+        this.categories = Object.keys(this.data)
+            .filter(key => key.toLowerCase().endsWith('category'))
+            .map(key => ({
+            key,
+            label: this.categoryLabel(key)
+        }));
+        this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
+        this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 const filterTermTypes$1 = [
     TermTermType.resourceUse,
     TermTermType.emission,
@@ -13872,6 +14012,7 @@ class ImpactAssessmentsGraphComponent {
     constructor() {
         this.searchService = inject(HeSearchService);
         this.nodeService = inject(HeNodeService);
+        this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
         this.initialTerms = toSignal(this.searchService
             .search$(searchParams(filterTermTypes$1.map(termType => matchTermType(termType))))
             .pipe(mergeMap(({ results }) => from(results).pipe(map(term => {
@@ -13934,10 +14075,31 @@ class ImpactAssessmentsGraphComponent {
             ...(this.hasDefaultModelLogs() ? [{ '@id': defaultIndicatorsModelId, name: defaultIndicatorsModelName }] : []),
             ...unique(this.nodeLogs().map(({ modelId }) => this.allTerms()[modelId] || { '@id': modelId }))
         ], ...(ngDevMode ? [{ debugName: "models" }] : []));
-        this.chartData = computed(() => this.nodeLogs().filter(log => log.modelId ===
-            (this.selectedModelId() === defaultIndicatorsModelId
-                ? getDefaultModelId(log.indicator)
-                : this.selectedModelId())), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
+        this.categories = this.emissionCategoryService.categories;
+        this.selectedCategory = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
+        this.chartData = computed(() => {
+            const category = this.selectedCategory();
+            const categoryLabel = category ? this.emissionCategoryService.categoryLabel(category) : undefined;
+            return this.nodeLogs()
+                .filter(log => log.modelId ===
+                (this.selectedModelId() === defaultIndicatorsModelId
+                    ? getDefaultModelId(log.indicator)
+                    : this.selectedModelId()))
+                .map(log => {
+                const includeCategory = category &&
+                    [TermTermType.emission, TermTermType.resourceUse].includes(this.allTerms()[log.contributor]?.termType);
+                const categoryValue = includeCategory
+                    ? this.emissionCategoryService.emissionCategoryValue(log.contributor, category)
+                    : null;
+                return includeCategory
+                    ? {
+                        ...log,
+                        category: categoryValue || `Not available for ${categoryLabel}`,
+                        categoryLabel
+                    }
+                    : log;
+            });
+        }, ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.loading = computed(() => [this.nodeLogsResource.isLoading(), this.allTermsResource.isLoading()].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.showChart = computed(() => [!isEmpty(this.chartData()), !isEmpty(this.allTerms()), !this.loading(), !this.error(), !this.showWarnings()].every(Boolean), ...(ngDevMode ? [{ debugName: "showChart" }] : []));
         effect(() => {
@@ -13954,36 +14116,13 @@ class ImpactAssessmentsGraphComponent {
         effect(() => this.showWarnings.set(this.warnings()?.length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">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 is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</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 is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">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 is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</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 is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedCategoryId\">Disaggregation</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 is-secondary\">\n                <select [(ngModel)]=\"selectedCategory\" id=\"selectedCategoryId\" [disabled]=\"loading()\">\n                  <option [ngValue]=\"undefined\">No Disaggregation</option>\n                  @for (category of categories; track category.key) {\n                    <option [value]=\"category.key\">{{ category.label }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">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 is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</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 is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">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 is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</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 is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedCategoryId\">Disaggregation</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 is-secondary\">\n                <select [(ngModel)]=\"selectedCategory\" id=\"selectedCategoryId\" [disabled]=\"loading()\">\n                  <option [ngValue]=\"undefined\">No Disaggregation</option>\n                  @for (category of categories; track category.key) {\n                    <option [value]=\"category.key\">{{ category.label }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessments: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessments", required: false }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
-class CyclesEmissionsCategoryService {
-    constructor() {
-        this.data = loadResourceKey('emission-groupings.json');
-        this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
-        this.categories = Object.keys(this.data)
-            .filter(key => key.toLowerCase().endsWith('category'))
-            .map(key => ({
-            key,
-            label: this.categoryLabel(key)
-        }));
-        this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
-        this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 const filterTermTypes = [TermTermType.emission, TermTermType.characterisedIndicator];
 const logsTotalValue = (logs, includeNegativeValues) => sum((includeNegativeValues ? logs : logs.filter(curr => curr.value >= 0)).map(v => v.value));
 const valueRatio = (value, total) => (total === 0 ? 0 : toPrecision((value * 100) / total, 2));
@@ -14179,11 +14318,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         return [blankNodeTermId, modelId, impactTermId].join('-');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Category selected</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\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@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\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  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@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: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\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@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\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  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@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: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Category selected</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\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@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\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  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@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, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\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@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\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  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@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 }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -14319,11 +14458,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Category selected</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "config"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "config"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Category selected</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@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['@id']) {\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 is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { barChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HorizontalBarChartComponent), { isSignal: true }] }], contributionChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ContributionChartComponent), { isSignal: true }] }], 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;
@@ -14469,7 +14608,7 @@ class ImpactAssessmentsProductsComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 (impactAssessment of impactAssessments(); track impactAssessment['@id']; let impactIndex = $index) {\n                @let product = productTerm(impactAssessment);\n                <tr [class.is-suggested]=\"$any(impactAssessment).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(impactAssessment).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ impactIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ impactName(impactAssessment) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"selectedCycle()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"filterTermTypesLabel()\"\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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", "collapsedClass"], 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", "cycle"] }, { 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: "21.0.6", 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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 (impactAssessment of impactAssessments(); track impactAssessment['@id']; let impactIndex = $index) {\n                @let product = productTerm(impactAssessment);\n                <tr [class.is-suggested]=\"$any(impactAssessment).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(impactAssessment).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ impactIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ impactName(impactAssessment) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"selectedCycle()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"filterTermTypesLabel()\"\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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", "collapsedClass"], 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", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey", "aggregated"] }, { 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: "21.0.6", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -14493,7 +14632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 (impactAssessment of impactAssessments(); track impactAssessment['@id']; let impactIndex = $index) {\n                @let product = productTerm(impactAssessment);\n                <tr [class.is-suggested]=\"$any(impactAssessment).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(impactAssessment).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ impactIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ impactName(impactAssessment) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"selectedCycle()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"filterTermTypesLabel()\"\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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-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                    @let blankNodesCount = countGroupVisibleNodes(blankNodes);\n                    @if (blankNodesCount > 0) {\n                      <th [attr.colspan]=\"blankNodesCount\" [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\"></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 (impactAssessment of impactAssessments(); track impactAssessment['@id']; let impactIndex = $index) {\n                @let product = productTerm(impactAssessment);\n                <tr [class.is-suggested]=\"$any(impactAssessment).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(impactAssessment).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ impactIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ impactName(impactAssessment) }}</span>\n                      </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 is-mt-2\">\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          [cycle]=\"selectedCycle()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"filterTermTypesLabel()\"\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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) => {
@@ -15070,7 +15209,7 @@ class SitesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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-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\"></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 site['@id']; let siteIndex = $index) {\n                <tr [class.is-suggested]=\"$any(site).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(site).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ siteIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(site) }}</span>\n                      </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 is-mt-2\">\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()\" [cycles]=\"cycles()\">\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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", "collapsedClass"], 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", "cycle"] }, { 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", "cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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-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\"></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 site['@id']; let siteIndex = $index) {\n                <tr [class.is-suggested]=\"$any(site).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(site).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ siteIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(site) }}</span>\n                      </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 is-mt-2\">\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()\" [cycles]=\"cycles()\">\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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", "collapsedClass"], 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", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey", "aggregated"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site", "cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesNodesComponent, decorators: [{
             type: Component$1,
@@ -15093,7 +15232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         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-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\"></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 site['@id']; let siteIndex = $index) {\n                <tr [class.is-suggested]=\"$any(site).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(site).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ siteIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(site) }}</span>\n                      </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 is-mt-2\">\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()\" [cycles]=\"cycles()\">\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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-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\"></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 site['@id']; let siteIndex = $index) {\n                <tr [class.is-suggested]=\"$any(site).suggested\">\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span class=\"has-text-ellipsis is-ellipsis-3\">\n                        @if ($any(site).suggested) {\n                          <he-svg-icon name=\"compare\" />\n                        } @else {\n                          <span>{{ siteIndex + 1 }}.</span>\n                        }\n                        <span class=\"is-pl-1\">{{ defaultLabel(site) }}</span>\n                      </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 is-mt-2\">\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()\" [cycles]=\"cycles()\">\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 is-p-2\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          collapsedClass=\"is-p-2\"\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    [aggregated]=\"node.aggregated\" />\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 {