@hestia-earth/ui-components 0.36.18 → 0.36.20

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

@@ -11,11 +11,12 @@ import { of, zip, ReplaySubject, timer, Subject, combineLatest, pipe, fromEvent,
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
 import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, sortKeysByType, isTypeNode, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, isTypeBlankNode, typeToSchemaType, managementTermTermType } from '@hestia-earth/schema';
-import { toPrecision, isUndefined, toComma, isNumber, getPercentileValue, isEmpty, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
+import { toPrecision, isUndefined, isEmpty, toComma, isNumber, getPercentileValue, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, sum, toDashCase, diffInDays } from '@hestia-earth/utils';
 import Gradient from 'javascript-color-gradient';
 import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
-import merge from 'lodash.merge';
 import Chart, { Chart as Chart$1 } from 'chart.js';
+import canvasToSvg from 'canvas-to-svg';
+import merge from 'lodash.merge';
 import { select, selectAll } from 'd3-selection';
 import { json2csv } from 'json-2-csv';
 import { propertyValue as propertyValue$1, emptyValue } from '@hestia-earth/utils/dist/term';
@@ -202,6 +203,17 @@ const toSnakeCase = (value) => (value || '')
     .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
     .replace(/([A-Z])([A-Z][a-z])/g, '$1_$2')
     .toLowerCase();
+const downloadFile = (url, fileName) => {
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('style', 'display: none');
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    a.remove();
+    // Clean up the object URL after a short delay
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+};
 
 const HE_API_BASE_URL = new InjectionToken('HE_API_BASE_URL');
 class HeCommonService {
@@ -991,6 +1003,188 @@ const lollipopChartPlugin = settings => ({
     }
 });
 
+const defaultChartWidth = 800;
+const defaultChartHeight = 600;
+const isNonSerializableType = (value) => typeof value === 'function' || value instanceof HTMLElement || value instanceof Element || value instanceof Node;
+const setDefaultOptions = (config) => {
+    config.options = config.options || {};
+    config.options.plugins = config.options.plugins || {};
+    config.options.plugins.legend = config.options.plugins.legend || { display: false };
+    config.options.legendCallback = null;
+    config.options.tooltips = {};
+    config.options.animation = undefined;
+    config.options.responsive = false;
+    config.options.maintainAspectRatio = false;
+    config.options.devicePixelRatio = 1;
+    return config;
+};
+const modernizeChartConfig = (config) => {
+    const modernized = { ...config };
+    // For Chart.js v2, keep the configuration as-is since we're using the same version
+    setDefaultOptions(modernized);
+    return modernized;
+};
+const extractEssentialChartConfig = (config) => {
+    const essentialConfig = {
+        type: config.type,
+        data: {
+            labels: config.data?.labels || [],
+            datasets: []
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        }
+    };
+    if (config.data?.datasets) {
+        essentialConfig.data.datasets = config.data.datasets.map((dataset) => ({
+            label: dataset.label,
+            data: dataset.data || [],
+            backgroundColor: dataset.backgroundColor,
+            borderColor: dataset.borderColor,
+            borderWidth: dataset.borderWidth || 1,
+            type: dataset.type
+        }));
+    }
+    if (config.options?.plugins?.title) {
+        essentialConfig.options.plugins.title = {
+            display: config.options.plugins.title.display,
+            text: config.options.plugins.title.text
+        };
+    }
+    if (config.options?.scales) {
+        essentialConfig.options.scales = {};
+        Object.keys(config.options.scales).forEach(scaleKey => {
+            const scale = config.options.scales[scaleKey];
+            if (scale) {
+                essentialConfig.options.scales[scaleKey] = {
+                    display: scale.display !== false,
+                    title: scale.title
+                        ? {
+                            display: scale.title.display,
+                            text: scale.title.text
+                        }
+                        : undefined
+                };
+            }
+        });
+    }
+    return setDefaultOptions(essentialConfig);
+};
+const sanitizeChartConfig = (config) => {
+    try {
+        const sanitized = {
+            type: config.type,
+            data: deepCloneSerializable(config.data),
+            options: deepCloneSerializable(config.options)
+        };
+        if (sanitized.data?.datasets?.length) {
+            return modernizeChartConfig(sanitized);
+        }
+    }
+    catch (error) {
+        console.error('Sanitizing chart failed, fallback to default config');
+    }
+    return modernizeChartConfig(extractEssentialChartConfig(config));
+};
+const deepCloneSerializable = (obj, visited = new WeakSet()) => {
+    const simpleValue = getSimpleValue(obj, visited);
+    if (simpleValue !== undefined) {
+        return simpleValue.value;
+    }
+    visited.add(obj);
+    try {
+        return cloneComplexObject(obj, visited);
+    }
+    catch (error) {
+        console.warn('Error cloning object:', error);
+        return {};
+    }
+    finally {
+        visited.delete(obj);
+    }
+};
+const getSimpleValue = (obj, visited) => {
+    if (obj === null || typeof obj !== 'object') {
+        return { value: obj };
+    }
+    if (visited.has(obj)) {
+        return { value: {} };
+    }
+    const specialValue = handleSpecialTypes(obj);
+    return specialValue !== undefined ? { value: specialValue } : undefined;
+};
+const cloneComplexObject = (obj, visited) => Array.isArray(obj) ? obj.map(item => deepCloneSerializable(item, visited)) : cloneObject(obj, visited);
+const handleSpecialTypes = (obj) => isNonSerializableType(obj) || obj instanceof RegExp ? null : obj instanceof Date ? obj.toISOString() : undefined;
+const shouldSkipProperty = (key, value) => isNonSerializableType(value) || ['__ngContext__', 'chart', 'ctx', 'canvas'].includes(key) || key.startsWith('_');
+const cloneObject = (obj, visited) => {
+    const cloned = {};
+    for (const key in obj) {
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+            continue;
+        }
+        const value = obj[key];
+        if (shouldSkipProperty(key, value)) {
+            continue;
+        }
+        const clonedValue = deepCloneSerializable(value, visited);
+        if (clonedValue !== null) {
+            cloned[key] = clonedValue;
+        }
+    }
+    return cloned;
+};
+const stretchSvg = (svgString) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const svgElement = doc.documentElement;
+    // include padding on the right for labels that go over the edge
+    svgElement.setAttribute('viewBox', `0 0 ${+svgElement.getAttribute('width') + 100} ${svgElement.getAttribute('height')}`);
+    svgElement.setAttribute('width', '100%');
+    svgElement.setAttribute('height', '100%');
+    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    return svgElement.outerHTML;
+};
+const convertToSvg = (config, metadata = {}) => {
+    const width = metadata.width || defaultChartWidth;
+    const height = metadata.height || defaultChartHeight;
+    const svgContext = new canvasToSvg(width, height);
+    const mockCanvas = document.createElement('canvas');
+    // Set dimensions to match the SVG context
+    mockCanvas.width = width;
+    mockCanvas.height = height;
+    mockCanvas.style.width = width + 'px';
+    mockCanvas.style.height = height + 'px';
+    mockCanvas.getContext = type => {
+        if (type === '2d') {
+            svgContext.canvas = mockCanvas;
+            return svgContext;
+        }
+        return null;
+    };
+    const chartConfig = sanitizeChartConfig(config);
+    chartConfig.plugins = [
+        afterBarDrawPlugin({
+            textFn: ({ data }) => [toPrecision(data), metadata.units].filter(Boolean).join(' '),
+            xPosFn: (x, index, width, chart, data) => (data < 0 || isEmpty(data) ? chart.scales['x-axis-0'].getPixelForValue(0) : x) + 10,
+            emptyValueLabel: 'No data'
+        })
+    ];
+    new Chart(mockCanvas, chartConfig);
+    return stretchSvg(svgContext.getSerializedSvg(true));
+};
+const exportAsSVG = (config, metadata) => {
+    const content = convertToSvg(config, metadata);
+    const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    downloadFile(url, metadata.fileName || 'aggregate-chart-export.svg');
+};
+
 class ChartConfigurationDirective {
     constructor() {
         this._zone = inject(NgZone);
@@ -1076,12 +1270,20 @@ class ChartComponent {
             data: this.data()
         }), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
+    exportAsSvg(config = {}) {
+        return exportAsSVG(this.configuration(), {
+            width: 600,
+            height: 400,
+            fileName: 'chart.svg',
+            ...config
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download (SVG)\" placement=\"top\">\n    <he-svg-icon name=\"download\" />\n  </a>\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}\n"] }]
+            args: [{ selector: 'he-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, HESvgIconComponent, NgbTooltip], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download (SVG)\" placement=\"top\">\n    <he-svg-icon name=\"download\" />\n  </a>\n\n  <ng-content />\n\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 const defaultSettings$2 = Object.freeze({
@@ -8025,7 +8227,7 @@ class CyclesCompletenessComponent {
         component.headerKeys.set(headerKeys$1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    @if (selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    <div class=\"px-3 pb-3\">\n      @if (hasData()) {\n        <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (completeness of completenessKeys(); track completeness) {\n                  <th [attr.title]=\"completeness\">\n                    <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                      {{ keyToLabel(completeness) }}\n                    </a>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycle\">\n                      <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (key of completenessKeys(); track key) {\n                    <td class=\"is-nowrap\">\n                      <span>\n                        {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                      </span>\n                      <he-blank-node-state\n                        class=\"ml-1\"\n                        [dataState]=\"dataState()\"\n                        [node]=\"getCompleteness(cycle)\"\n                        [key]=\"key\" />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      } @else {\n        <div class=\"panel-block\">\n          <span>No completeness data</span>\n        </div>\n      }\n    </div>\n  }\n  @case (View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field has-addons is-py-2 is-mb-0\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-small is-fullwidth is-secondary\">\n            <select (change)=\"selectIndex($event)\">\n              @for (value of cycles(); track value; let i = $index) {\n                <option [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (selectedNode()) {\n      <he-node-logs-models\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    @if (selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    <div class=\"px-3 pb-3\">\n      @if (hasData()) {\n        <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (completeness of completenessKeys(); track completeness) {\n                  <th [attr.title]=\"completeness\">\n                    <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                      {{ keyToLabel(completeness) }}\n                    </a>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycle\">\n                      <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (key of completenessKeys(); track key) {\n                    <td class=\"is-nowrap\">\n                      <span>\n                        {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                      </span>\n                      <he-blank-node-state\n                        class=\"ml-1\"\n                        [dataState]=\"dataState()\"\n                        [node]=\"getCompleteness(cycle)\"\n                        [key]=\"key\" />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      } @else {\n        <div class=\"panel-block\">\n          <span>No completeness data</span>\n        </div>\n      }\n    </div>\n  }\n  @case (View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" 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    @if (selectedNode()) {\n      <he-node-logs-models\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
             type: Component$1,
@@ -8036,7 +8238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         BlankNodeStateComponent,
                         BlankNodeStateNoticeComponent,
                         NodeLogsModelsComponent
-                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    @if (selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    <div class=\"px-3 pb-3\">\n      @if (hasData()) {\n        <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (completeness of completenessKeys(); track completeness) {\n                  <th [attr.title]=\"completeness\">\n                    <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                      {{ keyToLabel(completeness) }}\n                    </a>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycle\">\n                      <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (key of completenessKeys(); track key) {\n                    <td class=\"is-nowrap\">\n                      <span>\n                        {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                      </span>\n                      <he-blank-node-state\n                        class=\"ml-1\"\n                        [dataState]=\"dataState()\"\n                        [node]=\"getCompleteness(cycle)\"\n                        [key]=\"key\" />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      } @else {\n        <div class=\"panel-block\">\n          <span>No completeness data</span>\n        </div>\n      }\n    </div>\n  }\n  @case (View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field has-addons is-py-2 is-mb-0\">\n        <div class=\"control\">\n          <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n        </div>\n        <div class=\"control is-expanded\">\n          <div class=\"select is-small is-fullwidth is-secondary\">\n            <select (change)=\"selectIndex($event)\">\n              @for (value of cycles(); track value; let i = $index) {\n                <option [value]=\"i\">{{ i + 1 }}. {{ defaultLabel(value) }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      </div>\n    }\n    @if (selectedNode()) {\n      <he-node-logs-models\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n" }]
+                    ], template: "<div class=\"columns is-variable is-align-items-center is-2 m-0\">\n  <div class=\"column\">\n    @if (selectedView() === View.table) {\n      <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n        <he-svg-icon name=\"download\" />\n      </button>\n    }\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\n      <div class=\"field has-addons\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <span class=\"icon is-small\">\n                <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              </span>\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@switch (selectedView()) {\n  @case (View.table) {\n    <div class=\"px-3 pb-3\">\n      @if (hasData()) {\n        <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (completeness of completenessKeys(); track completeness) {\n                  <th [attr.title]=\"completeness\">\n                    <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n                      {{ keyToLabel(completeness) }}\n                    </a>\n                  </th>\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycle\">\n                      <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (key of completenessKeys(); track key) {\n                    <td class=\"is-nowrap\">\n                      <span>\n                        {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n                      </span>\n                      <he-blank-node-state\n                        class=\"ml-1\"\n                        [dataState]=\"dataState()\"\n                        [node]=\"getCompleteness(cycle)\"\n                        [key]=\"key\" />\n                    </td>\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <he-blank-node-state-notice [dataState]=\"dataState()\" />\n      } @else {\n        <div class=\"panel-block\">\n          <span>No completeness data</span>\n        </div>\n      }\n    </div>\n  }\n  @case (View.logs) {\n    @if (cycles().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" 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    @if (selectedNode()) {\n      <he-node-logs-models\n        [node]=\"selectedNode()\"\n        [nodeKey]=\"nodeKey\"\n        [logsKey]=\"selectedLogsKey()\"\n        [originalValues]=\"selectedOriginalValues()\"\n        [recalculatedValues]=\"selectedRecalculatedValues()\" />\n    }\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
 const cycleValue = (cycle, values) => (values[cycle['@id']]?.nodes[0] || { value: [0] }).value;
@@ -8100,11 +8302,11 @@ class CyclesEmissionsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (terms().length) {\n  <div class=\"field has-addons is-py-2 is-mb-0\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectTerm($event)\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, BarChartComponent], template: "@if (terms().length) {\n  <div class=\"field has-addons is-py-2 is-mb-0\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Emission</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectTerm($event)\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, BarChartComponent], template: "@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
 
 class CyclesFunctionalUnitMeasureComponent {
@@ -8371,7 +8573,7 @@ class CyclesNodesTimelineComponent {
             }))
         }), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.maxChart = computed(() => formatDate(this.maxDate(), false), ...(ngDevMode ? [{ debugName: "maxChart" }] : []));
-        this.minChart = computed(() => (this.minDate() ? formatDate(this.minDate(), true) : null), ...(ngDevMode ? [{ debugName: "minChart" }] : []));
+        this.minChart = computed(() => this.minDate() ? formatDate(this.minDate(), true) : monthsBefore(this.maxChart(), 12), ...(ngDevMode ? [{ debugName: "minChart" }] : []));
         this.chartConfig = computed(() => ({
             type: 'horizontalBar',
             plugins: [
@@ -8634,7 +8836,7 @@ class CyclesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto has-border-right\"></th>\n                    <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline\n          [values]=\"timelineValues()\"\n          [minDate]=\"selectedCycle().startDate\"\n          [maxDate]=\"selectedCycle().endDate\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto has-border-right\"></th>\n                    <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\" />\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, decorators: [{
             type: Component$1,
@@ -8660,7 +8862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         KeyToLabelPipe,
                         PrecisionPipe,
                         PluralizePipe
-                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto has-border-right\"></th>\n                    <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <div class=\"is-px-3 is-pb-3\">\n        <he-cycles-nodes-timeline\n          [values]=\"timelineValues()\"\n          [minDate]=\"selectedCycle().startDate\"\n          [maxDate]=\"selectedCycle().endDate\" />\n      </div>\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a Cycle</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of cycles(); track value; let cycleIndex = $index) {\n              <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto has-border-right\"></th>\n                    <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                      <he-node-link [node]=\"cycleNode(cycle)\">\n                        <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                      <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let cycleData = node.value.values[cycle['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (cycleData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                                <span pointer>\n                                  {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"cycleData.node\"\n                                  key=\"value\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice\n              [dataState]=\"dataState()\"\n              [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n        }\n      }\n    }\n    @case (View.timeline) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\" />\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      @if (nodeKeys().length > 1) {\n        <div class=\"tabs is-mb-2\">\n          <ul>\n            @for (nodeKey of nodeKeys(); track nodeKey) {\n              <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }], nodeKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeys", required: true }] }], nodeKeyGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKeyGroup", required: false }] }] } });
 
 class CyclesResultComponent {
@@ -12354,7 +12556,7 @@ const enterNodes = (selection) => {
 const mergedLinks = (selection, { togglingGroup, switchingSelection }) => selection
     .style('stroke', d => (d.target._open && nodeBorderColours[d.source.data.type]) || null)
     .attr('stroke-dasharray', d => (d.target.data.group ? '2,5' : null))
-    .attr('stroke-width', d => (d.target._open ? 3 : d.target._groupOpen ? 0 : 1))
+    .attr('stroke-width', d => (d.target._open ? 2 : d.target._groupOpen ? 0 : 1))
     .attr('stroke-opacity', d => (d.target._greyed ? 0.1 : 0.6))
     .transition()
     .duration(linkDuration)
@@ -13075,11 +13277,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         text && setTimeout(() => this.tooltip().open({ data: text }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@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\">\n    <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n      </div>\n      @if (terms()?.length) {\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n              @for (term of terms(); track term) {\n                <option [value]=\"term['@id']\">{{ term.name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      @if (methods()?.length) {\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n              @if (methods().length > 1) {\n                <option [ngValue]=\"undefined\">Filter Model</option>\n              }\n              @for (term of methods(); track term) {\n                <option [value]=\"term['@id']\">{{ term.name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n\n    <a\n      class=\"button is-ghost is-small\"\n      [href]=\"csvContent()\"\n      [download]=\"downloadFilename()\"\n      ngbTooltip=\"Download as CSV\"\n      placement=\"bottom\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-bar-chart\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@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\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <a\n      class=\"button is-ghost is-small\"\n      [href]=\"csvContent()\"\n      [download]=\"downloadFilename()\"\n      ngbTooltip=\"Download as CSV\"\n      placement=\"bottom\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-bar-chart\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\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: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, BarChartComponent], template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n    <div class=\"field has-addons is-mb-0 is-flex-grow-1\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n      </div>\n      @if (terms()?.length) {\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n              @for (term of terms(); track term) {\n                <option [value]=\"term['@id']\">{{ term.name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n      @if (methods()?.length) {\n        <div class=\"control is-expanded\">\n          <div class=\"select is-fullwidth is-small is-secondary\">\n            <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n              @if (methods().length > 1) {\n                <option [ngValue]=\"undefined\">Filter Model</option>\n              }\n              @for (term of methods(); track term) {\n                <option [value]=\"term['@id']\">{{ term.name }}</option>\n              }\n            </select>\n          </div>\n        </div>\n      }\n    </div>\n\n    <a\n      class=\"button is-ghost is-small\"\n      [href]=\"csvContent()\"\n      [download]=\"downloadFilename()\"\n      ngbTooltip=\"Download as CSV\"\n      placement=\"bottom\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-bar-chart\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, BarChartComponent], template: "@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @if (methods().length > 1) {\n              <option [ngValue]=\"undefined\">Filter Model</option>\n            }\n            @for (term of methods(); track term) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <a\n      class=\"button is-ghost is-small\"\n      [href]=\"csvContent()\"\n      [download]=\"downloadFilename()\"\n      ngbTooltip=\"Download as CSV\"\n      placement=\"bottom\">\n      <he-svg-icon name=\"download\" />\n    </a>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  @if (!logsResource.isLoading() && noData()) {\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  }\n  <he-bar-chart\n    class=\"is-relative h-100\"\n    [datasets]=\"datasets()\"\n    [labels]=\"labels()\"\n    [max]=\"total()\"\n    [config]=\"chartConfig()\">\n    <div\n      class=\"is-invisible is-absolute | shadow-tooltip\"\n      [style.left.px]=\"tooltipX()\"\n      [style.top.px]=\"tooltipY()\"\n      [ngbTooltip]=\"rawHtmlContent\"\n      triggers=\"manual\"\n      autoClose=\"outside\"\n      placement=\"bottom\"\n      #tooltip=\"ngbTooltip\"></div>\n\n    <ng-template #rawHtmlContent let-rawString=\"data\">\n      <div [innerHTML]=\"rawString\"></div>\n    </ng-template>\n  </he-bar-chart>\n\n  @if (hasNegativeContributions()) {\n    <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n      <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n      <b>0</b>\n      <span>.</span>\n    </p>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -13104,7 +13306,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.datasets = computed(() => [
             {
                 label: this.selectedTerm()?.name || '',
-                data: this.impactAssessments().map(impact => impactValue(impact, this.values())),
+                data: this.impactAssessments().map(impact => toPrecision(impactValue(impact, this.values()))),
                 backgroundColor: this.colors(),
                 borderColor: this.colors(),
                 barThickness: 2,
@@ -13148,11 +13350,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (terms()?.length) {\n  <div class=\"field has-addons is-py-2 is-mb-0\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectTerm($event)\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, BarChartComponent], template: "@if (terms()?.length) {\n  <div class=\"field has-addons is-py-2 is-mb-0\">\n    <div class=\"control\">\n      <span class=\"button is-small is-static is-secondary\">Select an Indicator</span>\n    </div>\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth is-secondary\">\n        <select (change)=\"selectTerm($event)\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, BarChartComponent], template: "@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-bar-chart class=\"is-relative h-100\" [datasets]=\"datasets()\" [labels]=\"labels()\" [config]=\"chartConfig()\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
 
 var View$1;
@@ -13293,7 +13495,7 @@ class ImpactAssessmentsProductsComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @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                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @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                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" 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", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -13317,7 +13519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         EllipsisPipe,
                         PrecisionPipe,
                         KeyToLabelPipe
-                    ], template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @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                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select an Impact Assessment</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of impactAssessments(); track value; let i = $index) {\n              <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
+                    ], template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n            <table class=\"table is-fullwidth is-narrow is-striped\">\n              <thead>\n                @if (dataKeys().length > 1) {\n                  <tr class=\"has-text-weight-bold\">\n                    <th class=\"width-auto\"></th>\n                    <th></th>\n                    <th></th>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @if (isGroupVisible(blankNodes)) {\n                        <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                          @if (dataKey) {\n                            <span>{{ dataKey | keyToLabel }}</span>\n                          }\n                        </th>\n                      }\n                    }\n                  </tr>\n                }\n                <tr class=\"has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right is-py-0\">\n                    @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                  </th>\n                  <th class=\"has-border-right\"></th>\n                  <th class=\"has-border-right\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.name\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <he-node-link [node]=\"node.value.term\">\n                            <span\n                              [innerHtml]=\"\n                                node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                              \"></span>\n                          </he-node-link>\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                  </th>\n                  <th class=\"has-border-right\">\n                    <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                  </th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        <th\n                          [attr.title]=\"node.value.term.units\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                          <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                        </th>\n                      }\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (\n                  impactAssessment of impactAssessments();\n                  track trackById(impactIndex, impactAssessment);\n                  let impactIndex = $index\n                ) {\n                  @let product = productTerm(impactAssessment);\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                      <he-node-link [node]=\"impactAssessment\">\n                        <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                      </he-node-link>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                      <span>1 {{ product?.units }}</span>\n                    </td>\n                    <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                      @if (product) {\n                        <he-node-link [node]=\"product\">\n                          <span>{{ product.name | ellipsis: 30 }}</span>\n                        </he-node-link>\n                      }\n                    </td>\n                    @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                      @let blankNodes = data()[dataKey];\n                      @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                        @if (node.value.visible) {\n                          @let impactData = node.value.values[impactAssessment['@id']];\n                          <td\n                            class=\"is-nowrap\"\n                            [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                            @if (impactData) {\n                              <span\n                                class=\"trigger-popover\"\n                                [ngbPopover]=\"details\"\n                                autoClose=\"outside\"\n                                popoverClass=\"is-narrow is-overflow-visible\"\n                                placement=\"left bottom auto\"\n                                container=\"body\"\n                                [popoverContext]=\"{\n                                  data: impactData,\n                                  impactAssessment\n                                }\">\n                                <span pointer>\n                                  {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                                </span>\n                                <he-blank-node-state\n                                  class=\"ml-1\"\n                                  [dataState]=\"dataState()\"\n                                  [node]=\"impactData.node\"\n                                  key=\"value\"\n                                  [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                              </span>\n                            } @else {\n                              <span>-</span>\n                            }\n                          </td>\n                        }\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            @if (impactAssessments().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        } @else if (noDataMessage()) {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>{{ noDataMessage() }}</span>\n          </div>\n        } @else {\n          <div class=\"is-pt-3 has-text-centered\">\n            <span>No data available</span>\n            @if (filterTerm()) {\n              <span class=\"is-pl-1\">matching your search criteria</span>\n            }\n            <span>.</span>\n            @if (showSwitchToRecalculated()) {\n              <span>\n                Switch to\n                <code>recalculated</code>\n                version.\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n    }\n    @case (View.breakdown) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\" />\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\" />\n      }\n    }\n  }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" 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", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
         }], ctorParameters: () => [], 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) => {
@@ -13831,7 +14033,7 @@ class SitesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-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]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-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]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal\">\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", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, decorators: [{
             type: Component$1,
@@ -13854,7 +14056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         PrecisionPipe,
                         CapitalizePipe,
                         SitesManagementChartComponent
-                    ], template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-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]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field has-addons is-py-2 is-mb-0\">\n      <div class=\"control\">\n        <span class=\"button is-small is-static is-secondary\">Select a Site</span>\n      </div>\n      <div class=\"control is-expanded\">\n        <div class=\"select is-small is-fullwidth is-secondary\">\n          <select (change)=\"selectIndex($event)\">\n            @for (value of sites(); track value; let siteIndex = $index) {\n              <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n" }]
+                    ], template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n  <div class=\"column\">\n    <div class=\"is-flex is-gap-8\">\n      @if (hasData() && selectedView() === View.table) {\n        <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n          <he-svg-icon name=\"download\" />\n        </button>\n      }\n\n      @if (selectedView() === View.table) {\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      }\n    </div>\n  </div>\n  @if (views()?.length > 1) {\n    <div class=\"column is-narrow\">\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 [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <div class=\"is-px-3 is-pb-3\">\n        @if (hasData()) {\n          <he-data-table class=\"mb-1 is-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]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                </tr>\n                <tr class=\"is-italic has-text-weight-semibold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      <th [attr.title]=\"node.value.term.units\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                </tr>\n              </thead>\n              <tbody>\n                @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                  <tr>\n                    <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                      <he-node-link [node]=\"site\">\n                        <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                      </he-node-link>\n                    </td>\n                    @for (node of data(); track node.value.term.name) {\n                      @if (node.value.visible) {\n                        @let siteData = node.value.values[site['@id']];\n                        <td class=\"is-nowrap\">\n                          @if (siteData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: siteData, site }\">\n                              <span pointer>\n                                {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"siteData.node\"\n                                key=\"value\" />\n                            </span>\n                          }\n                          @if (isMeasurement() && !siteData) {\n                            <span>\n                              <span>-</span>\n                              @if (siteTooBig(site)) {\n                                <sup class=\"pl-1\">(1)</sup>\n                              }\n                            </span>\n                          }\n                        </td>\n                      }\n                    }\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </he-data-table>\n          <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n            <he-blank-node-state-notice [dataState]=\"dataState()\" />\n            <div class=\"is-flex is-flex-shrink-0 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      </div>\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n        @if (selectedNode()) {\n          <div class=\"is-px-3 is-pb-3\">\n            <he-sites-management-chart [site]=\"selectedNode()\" />\n          </div>\n        }\n      }\n    }\n    @case (View.logs) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n      }\n    }\n  }\n}\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal\">\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" }]
         }], 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 {
@@ -13917,5 +14119,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, localStorageSignal, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map