@hestia-earth/ui-components 0.36.23 → 0.36.25

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

@@ -8849,7 +8849,7 @@ class CyclesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        <span>{{ dataKey | keyToLabel }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let cycleData = node.value.values[cycle['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (cycleData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                              <span pointer>\n                                {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"cycleData.node\"\n                                key=\"value\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice\n            [dataState]=\"dataState()\"\n            [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-2\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectCycle()) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        <span>{{ dataKey | keyToLabel }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let cycleData = node.value.values[cycle['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (cycleData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                              <span pointer>\n                                {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"cycleData.node\"\n                                key=\"value\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice\n            [dataState]=\"dataState()\"\n            [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-2\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, decorators: [{
             type: Component$1,
@@ -8875,7 +8875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         KeyToLabelPipe,
                         PrecisionPipe,
                         PluralizePipe
-                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        <span>{{ dataKey | keyToLabel }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let cycleData = node.value.values[cycle['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (cycleData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                              <span pointer>\n                                {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"cycleData.node\"\n                                key=\"value\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice\n            [dataState]=\"dataState()\"\n            [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-2\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectCycle()) {\n      <ng-container *ngTemplateOutlet=\"selectCycle\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
+                    ], template: "@if (isGroupNode()) {\n  <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n    <ul>\n      @for (value of groupNodeValues(); track value) {\n        <li [class.is-active]=\"selectedGroup() === value\">\n          <a (click)=\"selectedGroup.set(value)\">\n            <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n            <span>{{ value }}</span>\n          </a>\n        </li>\n      }\n    </ul>\n  </div>\n}\n\n@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto has-border-right\"></th>\n                  <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        <span>{{ dataKey | keyToLabel }}</span>\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                  <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n                    <he-node-link [node]=\"cycleNode(cycle)\">\n                      <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n                    <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let cycleData = node.value.values[cycle['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (cycleData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n                              <span pointer>\n                                {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"cycleData.node\"\n                                key=\"value\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice\n            [dataState]=\"dataState()\"\n            [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            @if (showHideZeroValues()) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideZeroValues'\"\n                  name=\"hideZeroValues\"\n                  [(ngModel)]=\"hideZeroValues\" />\n                <label [for]=\"componentId() + 'hideZeroValues'\">\n                  <span>\n                    Hide\n                    <b>0</b>\n                    values\n                  </span>\n                </label>\n              </div>\n            }\n            @if (cycles().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @switch (firstNodeKey()) {\n        @case (BlankNodesKey.emissions) {\n          <he-cycles-emissions-chart [cycles]=\"cycles()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-cycles-emissions-chart>\n        }\n      }\n    }\n    @case (View.timeline) {\n      <he-cycles-nodes-timeline\n        [values]=\"timelineValues()\"\n        [minDate]=\"selectedCycle().startDate\"\n        [maxDate]=\"selectedCycle().endDate\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-cycles-nodes-timeline>\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"selectedNodeKey()\"\n          [logsKey]=\"selectedLogsKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n          @if (nodeKeys().length > 1) {\n            <div class=\"tabs is-my-2\">\n              <ul>\n                @for (nodeKey of nodeKeys(); track nodeKey) {\n                  <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n                    <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n\n      } @else if (showSelectCycle()) {\n        <ng-container *ngTemplateOutlet=\"selectCycle\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectCycle>\n  @if (cycles().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n                @for (value of cycles(); track value; let cycleIndex = $index) {\n                  <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n  <p>\n    <b>{{ defaultLabel(node) }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
         }], 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 {
@@ -12834,7 +12834,7 @@ class HierarchyChartComponent {
             previousTanslateY: 0,
             previousYTotal: this.yTotal
         });
-        this.svgContainer.transition().duration(300).attr('viewBox', [0, 0, width, newHeight].join(' '));
+        this.svgContainer.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, width, newHeight].join(' '));
         this.node = this.node
             .data(nodes, d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
             .join(enter => enter
@@ -12919,7 +12919,7 @@ class HierarchyChartComponent {
         // 3. Calculate Scale
         const padding = 0.95; // 5% padding
         const scale = padding / Math.max(bounds.width / width, bounds.height / height);
-        const transform = zoomIdentity.scale(scale);
+        const transform = zoomIdentity.translate(10, 10).scale(scale);
         // Transition the SVG to this new state
         this.svg
             .transition()
@@ -13581,7 +13581,7 @@ class ImpactAssessmentsProductsComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto\"></th>\n                  <th></th>\n                  <th></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        @if (dataKey) {\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        }\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right is-py-0\">\n                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\n                </th>\n                <th class=\"has-border-right\"></th>\n                <th class=\"has-border-right\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (\n                impactAssessment of impactAssessments();\n                track trackById(impactIndex, impactAssessment);\n                let impactIndex = $index\n              ) {\n                @let product = productTerm(impactAssessment);\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                    <span>1 {{ product?.units }}</span>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                    @if (product) {\n                      <he-node-link [node]=\"product\">\n                        <span>{{ product.name | ellipsis: 30 }}</span>\n                      </he-node-link>\n                    }\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let impactData = node.value.values[impactAssessment['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (impactData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{\n                                data: impactData,\n                                impactAssessment\n                              }\">\n                              <span pointer>\n                                {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"impactData.node\"\n                                key=\"value\"\n                                [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          @if (impactAssessments().length > 1) {\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideIdenticalValues'\"\n                name=\"hideIdenticalValues\"\n                [(ngModel)]=\"hideIdenticalValues\" />\n              <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                <span>Hide identical values</span>\n              </label>\n            </div>\n          }\n        </div>\n      } @else if (noDataMessage()) {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>{{ noDataMessage() }}</span>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\n      <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n        <option [ngValue]=\"undefined\">Filter Model</option>\n        @for (term of methodModels(); track term) {\n          <option [ngValue]=\"term\">{{ term.name }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectImpact()) {\n      <ng-container *ngTemplateOutlet=\"selectImpact\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n                @for (value of impactAssessments(); track value; let i = $index) {\n                  <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto\"></th>\n                  <th></th>\n                  <th></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        @if (dataKey) {\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        }\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right is-py-0\">\n                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\n                </th>\n                <th class=\"has-border-right\"></th>\n                <th class=\"has-border-right\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (\n                impactAssessment of impactAssessments();\n                track trackById(impactIndex, impactAssessment);\n                let impactIndex = $index\n              ) {\n                @let product = productTerm(impactAssessment);\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                    <span>1 {{ product?.units }}</span>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                    @if (product) {\n                      <he-node-link [node]=\"product\">\n                        <span>{{ product.name | ellipsis: 30 }}</span>\n                      </he-node-link>\n                    }\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let impactData = node.value.values[impactAssessment['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (impactData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{\n                                data: impactData,\n                                impactAssessment\n                              }\">\n                              <span pointer>\n                                {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"impactData.node\"\n                                key=\"value\"\n                                [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          @if (impactAssessments().length > 1) {\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideIdenticalValues'\"\n                name=\"hideIdenticalValues\"\n                [(ngModel)]=\"hideIdenticalValues\" />\n              <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                <span>Hide identical values</span>\n              </label>\n            </div>\n          }\n        </div>\n      } @else if (noDataMessage()) {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>{{ noDataMessage() }}</span>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\n      <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n        <option [ngValue]=\"undefined\">Filter Model</option>\n        @for (term of methodModels(); track term) {\n          <option [ngValue]=\"term\">{{ term.name }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n                @for (value of impactAssessments(); track value; let i = $index) {\n                  <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
             type: Component$1,
@@ -13605,7 +13605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         EllipsisPipe,
                         PrecisionPipe,
                         KeyToLabelPipe
-                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto\"></th>\n                  <th></th>\n                  <th></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        @if (dataKey) {\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        }\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right is-py-0\">\n                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\n                </th>\n                <th class=\"has-border-right\"></th>\n                <th class=\"has-border-right\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (\n                impactAssessment of impactAssessments();\n                track trackById(impactIndex, impactAssessment);\n                let impactIndex = $index\n              ) {\n                @let product = productTerm(impactAssessment);\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                    <span>1 {{ product?.units }}</span>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                    @if (product) {\n                      <he-node-link [node]=\"product\">\n                        <span>{{ product.name | ellipsis: 30 }}</span>\n                      </he-node-link>\n                    }\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let impactData = node.value.values[impactAssessment['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (impactData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{\n                                data: impactData,\n                                impactAssessment\n                              }\">\n                              <span pointer>\n                                {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"impactData.node\"\n                                key=\"value\"\n                                [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          @if (impactAssessments().length > 1) {\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideIdenticalValues'\"\n                name=\"hideIdenticalValues\"\n                [(ngModel)]=\"hideIdenticalValues\" />\n              <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                <span>Hide identical values</span>\n              </label>\n            </div>\n          }\n        </div>\n      } @else if (noDataMessage()) {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>{{ noDataMessage() }}</span>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\n      <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n        <option [ngValue]=\"undefined\">Filter Model</option>\n        @for (term of methodModels(); track term) {\n          <option [ngValue]=\"term\">{{ term.name }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectImpact()) {\n      <ng-container *ngTemplateOutlet=\"selectImpact\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n                @for (value of impactAssessments(); track value; let i = $index) {\n                  <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
+                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      <div class=\"is-hidden-tablet is-mt-3\">\n        <ng-container *ngTemplateOutlet=\"filterModel\" />\n      </div>\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              @if (dataKeys().length > 1) {\n                <tr class=\"has-text-weight-bold\">\n                  <th class=\"width-auto\"></th>\n                  <th></th>\n                  <th></th>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @if (isGroupVisible(blankNodes)) {\n                      <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n                        @if (dataKey) {\n                          <span>{{ dataKey | keyToLabel }}</span>\n                        }\n                      </th>\n                    }\n                  }\n                </tr>\n              }\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right is-py-0\">\n                  <div class=\"is-hidden-mobile\">\n                    <ng-container *ngTemplateOutlet=\"filterModel\" />\n                  </div>\n                </th>\n                <th class=\"has-border-right\"></th>\n                <th class=\"has-border-right\"></th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.name\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <he-node-link [node]=\"node.value.term\">\n                          <span\n                            [innerHtml]=\"\n                              node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n                            \"></span>\n                        </he-node-link>\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n                </th>\n                <th class=\"has-border-right\">\n                  <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n                </th>\n                @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                  @let blankNodes = data()[dataKey];\n                  @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                    @if (node.value.visible) {\n                      <th\n                        [attr.title]=\"node.value.term.units\"\n                        [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                        <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                        <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                      </th>\n                    }\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (\n                impactAssessment of impactAssessments();\n                track trackById(impactIndex, impactAssessment);\n                let impactIndex = $index\n              ) {\n                @let product = productTerm(impactAssessment);\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n                    <he-node-link [node]=\"impactAssessment\">\n                      <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n                    </he-node-link>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n                    <span>1 {{ product?.units }}</span>\n                  </td>\n                  <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n                    @if (product) {\n                      <he-node-link [node]=\"product\">\n                        <span>{{ product.name | ellipsis: 30 }}</span>\n                      </he-node-link>\n                    }\n                  </td>\n                  @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n                    @let blankNodes = data()[dataKey];\n                    @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n                      @if (node.value.visible) {\n                        @let impactData = node.value.values[impactAssessment['@id']];\n                        <td\n                          class=\"is-nowrap\"\n                          [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n                          @if (impactData) {\n                            <span\n                              class=\"trigger-popover\"\n                              [ngbPopover]=\"details\"\n                              autoClose=\"outside\"\n                              popoverClass=\"is-narrow is-overflow-visible\"\n                              placement=\"left bottom auto\"\n                              container=\"body\"\n                              [popoverContext]=\"{\n                                data: impactData,\n                                impactAssessment\n                              }\">\n                              <span pointer>\n                                {{ impactData.propertyValue | precision: 3 | default: '-' }}\n                              </span>\n                              <he-blank-node-state\n                                class=\"ml-1\"\n                                [dataState]=\"dataState()\"\n                                [node]=\"impactData.node\"\n                                key=\"value\"\n                                [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n                            </span>\n                          } @else {\n                            <span>-</span>\n                          }\n                        </td>\n                      }\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          @if (impactAssessments().length > 1) {\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideIdenticalValues'\"\n                name=\"hideIdenticalValues\"\n                [(ngModel)]=\"hideIdenticalValues\" />\n              <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                <span>Hide identical values</span>\n              </label>\n            </div>\n          }\n        </div>\n      } @else if (noDataMessage()) {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>{{ noDataMessage() }}</span>\n        </div>\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n        <ng-container *ngTemplateOutlet=\"selectView\" />\n      </he-impact-assessments-indicators-chart>\n    }\n    @case (View.breakdown) {\n      @if (selectedNode()) {\n        <he-impact-assessments-indicator-breakdown-chart\n          [impactAssessment]=\"selectedNode()\"\n          [indicators]=\"selectedRecalculatedValues()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-impact-assessments-indicator-breakdown-chart>\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [noDataMessage]=\"noDataMessage()\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #filterModel>\n  @if (enableFilterMethodModel()) {\n    <div class=\"select is-small is-fullwidth\">\n      <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n        <option [ngValue]=\"undefined\">Filter Model</option>\n        @for (term of methodModels(); track term) {\n          <option [ngValue]=\"term\">{{ term.name }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectImpact()) {\n        <ng-container *ngTemplateOutlet=\"selectImpact\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectImpact>\n  @if (impactAssessments().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n                @for (value of impactAssessments(); track value; let i = $index) {\n                  <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n  <p>\n    <b>\n      @if (data.cycle) {\n        <span>{{ cycleLabel(node.cycle) }}</span>\n      }\n      @if (!data.cycle) {\n        <span>{{ data.name }}</span>\n      }\n    </b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
         }], 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) => {
@@ -14120,7 +14120,7 @@ class SitesNodesComponent {
         component.headerKeys.set(this.headerKeys());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.name\">\n                      <he-node-link [node]=\"node.value.term\">\n                        <span\n                          [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n                      </he-node-link>\n                    </th>\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.units\">\n                      <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                    </th>\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      @let siteData = node.value.values[site['@id']];\n                      <td class=\"is-nowrap\">\n                        @if (siteData) {\n                          <span\n                            class=\"trigger-popover\"\n                            [ngbPopover]=\"details\"\n                            autoClose=\"outside\"\n                            popoverClass=\"is-narrow is-overflow-visible\"\n                            placement=\"left bottom auto\"\n                            container=\"body\"\n                            [popoverContext]=\"{ data: siteData, site }\">\n                            <span pointer>\n                              {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                            </span>\n                            <he-blank-node-state\n                              class=\"ml-1\"\n                              [dataState]=\"dataState()\"\n                              [node]=\"siteData.node\"\n                              key=\"value\" />\n                          </span>\n                        }\n                        @if (isMeasurement() && !siteData) {\n                          <span>\n                            <span>-</span>\n                            @if (siteTooBig(site)) {\n                              <sup class=\"pl-1\">(1)</sup>\n                            }\n                          </span>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n        @if (showAreaTooBig()) {\n          <p class=\"is-size-7 is-italic\">\n            (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n          </p>\n        }\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectSite()) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n                @for (value of sites(); track value; let siteIndex = $index) {\n                  <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.name\">\n                      <he-node-link [node]=\"node.value.term\">\n                        <span\n                          [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n                      </he-node-link>\n                    </th>\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.units\">\n                      <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                    </th>\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      @let siteData = node.value.values[site['@id']];\n                      <td class=\"is-nowrap\">\n                        @if (siteData) {\n                          <span\n                            class=\"trigger-popover\"\n                            [ngbPopover]=\"details\"\n                            autoClose=\"outside\"\n                            popoverClass=\"is-narrow is-overflow-visible\"\n                            placement=\"left bottom auto\"\n                            container=\"body\"\n                            [popoverContext]=\"{ data: siteData, site }\">\n                            <span pointer>\n                              {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                            </span>\n                            <he-blank-node-state\n                              class=\"ml-1\"\n                              [dataState]=\"dataState()\"\n                              [node]=\"siteData.node\"\n                              key=\"value\" />\n                          </span>\n                        }\n                        @if (isMeasurement() && !siteData) {\n                          <span>\n                            <span>-</span>\n                            @if (siteTooBig(site)) {\n                              <sup class=\"pl-1\">(1)</sup>\n                            }\n                          </span>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n        @if (showAreaTooBig()) {\n          <p class=\"is-size-7 is-italic\">\n            (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n          </p>\n        }\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n                @for (value of sites(); track value; let siteIndex = $index) {\n                  <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, decorators: [{
             type: Component$1,
@@ -14143,7 +14143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         PrecisionPipe,
                         CapitalizePipe,
                         SitesManagementChartComponent
-                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.name\">\n                      <he-node-link [node]=\"node.value.term\">\n                        <span\n                          [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n                      </he-node-link>\n                    </th>\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.units\">\n                      <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                    </th>\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      @let siteData = node.value.values[site['@id']];\n                      <td class=\"is-nowrap\">\n                        @if (siteData) {\n                          <span\n                            class=\"trigger-popover\"\n                            [ngbPopover]=\"details\"\n                            autoClose=\"outside\"\n                            popoverClass=\"is-narrow is-overflow-visible\"\n                            placement=\"left bottom auto\"\n                            container=\"body\"\n                            [popoverContext]=\"{ data: siteData, site }\">\n                            <span pointer>\n                              {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                            </span>\n                            <he-blank-node-state\n                              class=\"ml-1\"\n                              [dataState]=\"dataState()\"\n                              [node]=\"siteData.node\"\n                              key=\"value\" />\n                          </span>\n                        }\n                        @if (isMeasurement() && !siteData) {\n                          <span>\n                            <span>-</span>\n                            @if (siteTooBig(site)) {\n                              <sup class=\"pl-1\">(1)</sup>\n                            }\n                          </span>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n        @if (showAreaTooBig()) {\n          <p class=\"is-size-7 is-italic\">\n            (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n          </p>\n        }\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    @if (selectedView() === View.table) {\n      <div class=\"is-flex is-gap-8 is-align-items-center\">\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      </div>\n    }\n\n    @if (showSelectSite()) {\n      <ng-container *ngTemplateOutlet=\"selectSite\" />\n    }\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n                @for (value of sites(); track value; let siteIndex = $index) {\n                  <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "@if (isNodeKeyAllowed()) {\n  @switch (selectedView()) {\n    @case (View.table) {\n      <ng-container *ngTemplateOutlet=\"selectView\" />\n\n      @if (hasData()) {\n        <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n          <table class=\"table is-fullwidth is-narrow is-striped\">\n            <thead>\n              <tr class=\"has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.name\">\n                      <he-node-link [node]=\"node.value.term\">\n                        <span\n                          [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n                      </he-node-link>\n                    </th>\n                  }\n                }\n              </tr>\n              <tr class=\"is-italic has-text-weight-semibold\">\n                <th class=\"width-auto has-border-right\"></th>\n                @for (node of data(); track node.value.term.name) {\n                  @if (node.value.visible) {\n                    <th [attr.title]=\"node.value.term.units\">\n                      <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n                      <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n                    </th>\n                  }\n                }\n              </tr>\n            </thead>\n            <tbody>\n              @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n                <tr>\n                  <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n                    <he-node-link [node]=\"site\">\n                      <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n                    </he-node-link>\n                  </td>\n                  @for (node of data(); track node.value.term.name) {\n                    @if (node.value.visible) {\n                      @let siteData = node.value.values[site['@id']];\n                      <td class=\"is-nowrap\">\n                        @if (siteData) {\n                          <span\n                            class=\"trigger-popover\"\n                            [ngbPopover]=\"details\"\n                            autoClose=\"outside\"\n                            popoverClass=\"is-narrow is-overflow-visible\"\n                            placement=\"left bottom auto\"\n                            container=\"body\"\n                            [popoverContext]=\"{ data: siteData, site }\">\n                            <span pointer>\n                              {{ siteData.propertyValue | precision: 3 | default: '-' }}\n                            </span>\n                            <he-blank-node-state\n                              class=\"ml-1\"\n                              [dataState]=\"dataState()\"\n                              [node]=\"siteData.node\"\n                              key=\"value\" />\n                          </span>\n                        }\n                        @if (isMeasurement() && !siteData) {\n                          <span>\n                            <span>-</span>\n                            @if (siteTooBig(site)) {\n                              <sup class=\"pl-1\">(1)</sup>\n                            }\n                          </span>\n                        }\n                      </td>\n                    }\n                  }\n                </tr>\n              }\n            </tbody>\n          </table>\n        </he-data-table>\n        <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n          <he-blank-node-state-notice [dataState]=\"dataState()\" />\n          <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n            <div class=\"field is-relative is-mb-0\">\n              <input\n                type=\"checkbox\"\n                class=\"switch is-small is-rounded\"\n                [id]=\"componentId() + 'hideZeroValues'\"\n                name=\"hideZeroValues\"\n                [(ngModel)]=\"hideZeroValues\" />\n              <label [for]=\"componentId() + 'hideZeroValues'\">\n                <span>\n                  Hide\n                  <b>0</b>\n                  values\n                </span>\n              </label>\n            </div>\n            @if (sites().length > 1) {\n              <div class=\"field is-relative is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  class=\"switch is-small is-rounded\"\n                  [id]=\"componentId() + 'hideIdenticalValues'\"\n                  name=\"hideIdenticalValues\"\n                  [(ngModel)]=\"hideIdenticalValues\" />\n                <label [for]=\"componentId() + 'hideIdenticalValues'\">\n                  <span>Hide identical values</span>\n                </label>\n              </div>\n            }\n          </div>\n        </div>\n        @if (showAreaTooBig()) {\n          <p class=\"is-size-7 is-italic\">\n            (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n          </p>\n        }\n      } @else {\n        <div class=\"is-pt-3 has-text-centered\">\n          <span>No data available</span>\n          @if (filterTerm()) {\n            <span class=\"is-pl-1\">matching your search criteria</span>\n          }\n          <span>.</span>\n          @if (showSwitchToRecalculated()) {\n            <span>\n              Switch to\n              <code>recalculated</code>\n              version.\n            </span>\n          }\n        </div>\n      }\n    }\n    @case (View.chart) {\n      @if (nodeKey() === BlankNodesKey.management) {\n        @if (selectedNode()) {\n          <he-sites-management-chart [site]=\"selectedNode()\">\n            <ng-container *ngTemplateOutlet=\"selectView\" />\n          </he-sites-management-chart>\n        }\n      }\n    }\n    @case (View.logs) {\n      @if (selectedNode()) {\n        <he-node-logs-models\n          [node]=\"selectedNode()\"\n          [nodeKey]=\"nodeKey()\"\n          [originalValues]=\"selectedOriginalValues()\"\n          [recalculatedValues]=\"selectedRecalculatedValues()\"\n          [filterTermTypes]=\"filterTermTypes()\"\n          [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n          <ng-container *ngTemplateOutlet=\"selectView\" />\n        </he-node-logs-models>\n      }\n    }\n  }\n}\n\n<ng-template #selectView>\n  <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (selectedView() === View.table) {\n        @if (hasData()) {\n          <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n            <he-svg-icon name=\"download\" />\n          </button>\n        }\n\n        <he-search-extend\n          class=\"is-secondary\"\n          placeholder=\"Filter terms by name\"\n          (searchText)=\"filterTerm.set($event)\" />\n      } @else if (showSelectSite()) {\n        <ng-container *ngTemplateOutlet=\"selectSite\" />\n      }\n    </div>\n\n    @if (views()?.length > 1) {\n      <div class=\"field has-addons button-segments\">\n        @for (view of views(); track view) {\n          <div class=\"control\">\n            <button\n              class=\"button is-small\"\n              [class.is-selected]=\"selectedView() === view\"\n              (click)=\"selectedView.set(view)\">\n              <he-svg-icon\n                name=\"checkmark\"\n                aria-hidden=\"true\"\n                class=\"is-hidden-mobile\"\n                [class.is-hidden-tablet]=\"selectedView() !== view\" />\n              <he-svg-icon\n                [name]=\"viewIcon[view]\"\n                aria-hidden=\"true\"\n                [class.is-hidden-tablet]=\"selectedView() === view\" />\n              <span class=\"is-hidden-mobile\">{{ view }}</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #selectSite>\n  @if (sites().length > 1) {\n    <div class=\"field is-horizontal is-mb-0\">\n      <div class=\"field-label is-normal\">\n        <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n      </div>\n      <div class=\"field-body\">\n        <div class=\"field\">\n          <div class=\"control is-expanded\">\n            <div class=\"select is-small is-fullwidth\">\n              <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n                @for (value of sites(); track value; let siteIndex = $index) {\n                  <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n                }\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #emptyValue>\n  <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n  <p>\n    <b>{{ node.name }}</b>\n  </p>\n  <he-node-value-details\n    class=\"is-overflow-visible\"\n    [data]=\"data\"\n    [dataState]=\"dataState()\"\n    [nodeType]=\"node['@type']\"\n    [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], 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 {