@hestia-earth/ui-components 0.40.1 → 0.40.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, InjectionToken, inject, input, computed, HostBinding, Component as Component$1, model, output, signal, effect, ChangeDetectionStrategy, ElementRef, untracked, Directive, viewChild, Pipe, DestroyRef, HostListener, ViewEncapsulation, contentChild, viewChildren, forwardRef } from '@angular/core';
|
|
2
|
+
import { Injectable, InjectionToken, inject, input, computed, HostBinding, Component as Component$1, model, output, signal, effect, ChangeDetectionStrategy, ElementRef, untracked, Directive, viewChild, Pipe, DestroyRef, HostListener, ViewEncapsulation, contentChild, viewChildren, forwardRef, LOCALE_ID } from '@angular/core';
|
|
3
3
|
import { toSignal, toObservable, outputFromObservable, takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
|
|
6
|
-
import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe } from '@angular/common';
|
|
6
|
+
import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe, formatDate as formatDate$1 } from '@angular/common';
|
|
7
7
|
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
8
|
-
import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule,
|
|
8
|
+
import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdownModule, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import { catchError, of, map, debounceTime, distinctUntilChanged, tap, switchMap, zip, fromEvent, startWith, ReplaySubject, mergeMap, shareReplay, delay, timer, take, first, Subject, combineLatest, filter, pipe, merge as merge$1, skip, EMPTY, throttleTime, animationFrameScheduler, skipUntil, lastValueFrom, forkJoin, from, reduce, firstValueFrom, mergeAll, toArray, distinct, groupBy } from 'rxjs';
|
|
10
10
|
import { HttpClient } from '@angular/common/http';
|
|
11
11
|
import get from 'lodash.get';
|
|
12
12
|
import { SCHEMA_VERSION, SchemaType, NodeType, TermTermType, productTermTermType, nestedSearchableKeys, SiteSiteType, EmissionMethodTier, isExpandable, sortKeysByType, isTypeNode, BlankNodesKey, impactAssessmentTermTermType, measurementTermTermType, emissionTermTermType, inputTermTermType, CycleFunctionalUnit, NonBlankNodesKey, jsonldPath, isTypeValid, isTypeBlankNode, typeToSchemaType, managementTermTermType } from '@hestia-earth/schema';
|
|
13
|
-
import { isUndefined, isEmpty, toPrecision, ellipsis as ellipsis$1, sum, toComma, isNumber, getPercentileValue, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, toDashCase, diffInDays } from '@hestia-earth/utils';
|
|
13
|
+
import { isUndefined, isEmpty, toPrecision, ellipsis as ellipsis$1, sum, toComma, isNumber, getPercentileValue, unique, monthsBefore, keyToLabel, isEqual as isEqual$2, max, toDashCase, diffInDays, min } from '@hestia-earth/utils';
|
|
14
14
|
import Gradient from 'javascript-color-gradient';
|
|
15
15
|
import { ShadeGenerator } from 'shade-generator/dist/shadeGenerator';
|
|
16
16
|
import { Chart, BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';
|
|
17
17
|
import C2S from 'canvas-to-svg';
|
|
18
18
|
import 'chartjs-adapter-date-fns';
|
|
19
|
+
import annotationPlugin from 'chartjs-plugin-annotation';
|
|
19
20
|
import merge from 'lodash.merge';
|
|
20
21
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
21
22
|
import { select, selectAll } from 'd3-selection';
|
|
@@ -35,7 +36,7 @@ import { GoogleMap, MapMarker, MapPolygon } from '@angular/google-maps';
|
|
|
35
36
|
import { Meta, DomSanitizer } from '@angular/platform-browser';
|
|
36
37
|
import removeMd from 'remove-markdown';
|
|
37
38
|
import orderBy from 'lodash.orderby';
|
|
38
|
-
import { headersFromCsv, toCsv, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
|
|
39
|
+
import { headersFromCsv, toCsv as toCsv$1, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
|
|
39
40
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
40
41
|
import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
|
|
41
42
|
import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
|
|
@@ -204,6 +205,9 @@ const toSnakeCase = (value) => (value || '')
|
|
|
204
205
|
.replace(/([A-Z])([A-Z][a-z])/g, '$1_$2')
|
|
205
206
|
.toLowerCase();
|
|
206
207
|
const downloadFile = (url, fileName) => {
|
|
208
|
+
if (!url) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
207
211
|
const a = document.createElement('a');
|
|
208
212
|
document.body.appendChild(a);
|
|
209
213
|
a.setAttribute('style', 'display: none');
|
|
@@ -1122,19 +1126,39 @@ const exportAsSVG = async (config, metadata) => {
|
|
|
1122
1126
|
console.error('Failed to export SVG', error);
|
|
1123
1127
|
}
|
|
1124
1128
|
};
|
|
1125
|
-
const
|
|
1129
|
+
const svgToUrl = (svgElement) => {
|
|
1126
1130
|
const serializer = new XMLSerializer();
|
|
1127
1131
|
let svgString = serializer.serializeToString(svgElement);
|
|
1128
1132
|
if (!svgString.includes('xmlns')) {
|
|
1129
1133
|
svgString = svgString.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
|
|
1130
1134
|
}
|
|
1131
1135
|
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
|
|
1132
|
-
|
|
1133
|
-
|
|
1136
|
+
return URL.createObjectURL(blob);
|
|
1137
|
+
};
|
|
1138
|
+
const downloadSvg = (svgElement) => downloadFile(svgToUrl(svgElement), 'chart.svg');
|
|
1139
|
+
const downloadPng = async (svgElement, { width, height } = {}) => {
|
|
1140
|
+
const canvas = document.createElement('canvas');
|
|
1141
|
+
const ctx = canvas.getContext('2d');
|
|
1142
|
+
const img = new Image();
|
|
1143
|
+
// Set canvas dimensions based on SVG size
|
|
1144
|
+
// (You might want to fetch getBBox() or use explicitly set width/height)
|
|
1145
|
+
const svgSize = svgElement.getBoundingClientRect();
|
|
1146
|
+
canvas.width = width || svgSize.width;
|
|
1147
|
+
canvas.height = height || svgSize.height;
|
|
1148
|
+
img.onload = () => {
|
|
1149
|
+
if (ctx) {
|
|
1150
|
+
// ctx.fillStyle = 'white';
|
|
1151
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
1152
|
+
ctx.drawImage(img, 0, 0);
|
|
1153
|
+
const pngUrl = canvas.toDataURL('image/png');
|
|
1154
|
+
downloadFile(pngUrl, 'chart.png');
|
|
1155
|
+
}
|
|
1156
|
+
};
|
|
1157
|
+
img.src = svgToUrl(svgElement);
|
|
1134
1158
|
};
|
|
1135
1159
|
|
|
1136
1160
|
const registerChart = (items = []) => () => {
|
|
1137
|
-
Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, ...items);
|
|
1161
|
+
Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, annotationPlugin, ...items);
|
|
1138
1162
|
};
|
|
1139
1163
|
|
|
1140
1164
|
class ChartConfigurationDirective {
|
|
@@ -1198,6 +1222,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1198
1222
|
}]
|
|
1199
1223
|
}], ctorParameters: () => [], propDecorators: { chartConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartConfiguration", required: false }] }], chartContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartContainer", required: false }] }] } });
|
|
1200
1224
|
|
|
1225
|
+
class ChartExportButtonComponent {
|
|
1226
|
+
constructor() {
|
|
1227
|
+
this.chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : []));
|
|
1228
|
+
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
|
|
1229
|
+
}
|
|
1230
|
+
export(format) {
|
|
1231
|
+
return format === 'svg' ? this.chart().exportAsSvg(this.config()) : this.chart().exportAsPng();
|
|
1232
|
+
}
|
|
1233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div ngbDropdown #displayDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-start\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-ghost is-p-2\"\n type=\"button\"\n id=\"download-menu\"\n [ngbTooltip]=\"displayDd.isOpen() || chart().exporting() ? '' : 'Download'\"\n [disableTooltip]=\"displayDd.isOpen()\"\n placement=\"bottom\">\n @if (chart().exporting()) {\n <he-svg-icon name=\"loading\" animation=\"spin\" />\n } @else {\n <he-svg-icon name=\"download\" />\n }\n </button>\n <div ngbDropdownMenu aria-labelledby=\"display-menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"export('png')\">\n <he-svg-icon name=\"image\" />\n <span class=\"is-pl-2\">Download Image (.png)</span>\n </a>\n\n <a ngbDropdownItem (click)=\"export('svg')\">\n <he-svg-icon name=\"image\" />\n <span class=\"is-pl-2\">Download Image (.svg)</span>\n </a>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1235
|
+
}
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
|
|
1237
|
+
type: Component$1,
|
|
1238
|
+
args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip, NgbDropdownModule], template: "<div ngbDropdown #displayDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-start\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-ghost is-p-2\"\n type=\"button\"\n id=\"download-menu\"\n [ngbTooltip]=\"displayDd.isOpen() || chart().exporting() ? '' : 'Download'\"\n [disableTooltip]=\"displayDd.isOpen()\"\n placement=\"bottom\">\n @if (chart().exporting()) {\n <he-svg-icon name=\"loading\" animation=\"spin\" />\n } @else {\n <he-svg-icon name=\"download\" />\n }\n </button>\n <div ngbDropdownMenu aria-labelledby=\"display-menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"export('png')\">\n <he-svg-icon name=\"image\" />\n <span class=\"is-pl-2\">Download Image (.png)</span>\n </a>\n\n <a ngbDropdownItem (click)=\"export('svg')\">\n <he-svg-icon name=\"image\" />\n <span class=\"is-pl-2\">Download Image (.svg)</span>\n </a>\n </div>\n </div>\n</div>\n" }]
|
|
1239
|
+
}], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
1240
|
+
|
|
1201
1241
|
const defaultSettings$3 = Object.freeze({
|
|
1202
1242
|
options: {
|
|
1203
1243
|
responsive: true,
|
|
@@ -1215,6 +1255,7 @@ class ChartComponent {
|
|
|
1215
1255
|
this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1216
1256
|
this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
|
|
1217
1257
|
this.exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
|
|
1258
|
+
this.chartRef = viewChild('chartRef', ...(ngDevMode ? [{ debugName: "chartRef" }] : []));
|
|
1218
1259
|
this.configuration = computed(() => ({
|
|
1219
1260
|
...merge({}, defaultSettings$3, this.config()),
|
|
1220
1261
|
data: this.data()
|
|
@@ -1230,13 +1271,20 @@ class ChartComponent {
|
|
|
1230
1271
|
});
|
|
1231
1272
|
this.exporting.set(false);
|
|
1232
1273
|
}
|
|
1274
|
+
exportAsPng() {
|
|
1275
|
+
this.exporting.set(true);
|
|
1276
|
+
const chart = this.chartRef();
|
|
1277
|
+
const url = chart?.chart?.toBase64Image();
|
|
1278
|
+
downloadFile(url, 'chart.png');
|
|
1279
|
+
this.exporting.set(false);
|
|
1280
|
+
}
|
|
1233
1281
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n @if (showExportButton()) {\n <
|
|
1282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, isSignal: true }], exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n @if (showExportButton()) {\n <div class=\"is-absolute | download\">\n <he-chart-export-button [chart]=\"this\" />\n </div>\n }\n\n <ng-content />\n\n <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{bottom:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1235
1283
|
}
|
|
1236
1284
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, decorators: [{
|
|
1237
1285
|
type: Component$1,
|
|
1238
|
-
args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective,
|
|
1239
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }] } });
|
|
1286
|
+
args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, ChartExportButtonComponent], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n @if (showExportButton()) {\n <div class=\"is-absolute | download\">\n <he-chart-export-button [chart]=\"this\" />\n </div>\n }\n\n <ng-content />\n\n <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{bottom:-12px;right:-10px}\n"] }]
|
|
1287
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { isSignal: true }] }] } });
|
|
1240
1288
|
|
|
1241
1289
|
var Breakpoint;
|
|
1242
1290
|
(function (Breakpoint) {
|
|
@@ -1507,6 +1555,9 @@ class BarChartComponent {
|
|
|
1507
1555
|
exportAsSvg(config = {}) {
|
|
1508
1556
|
return this.chart().exportAsSvg(config);
|
|
1509
1557
|
}
|
|
1558
|
+
exportAsPng() {
|
|
1559
|
+
return this.chart().exportAsPng();
|
|
1560
|
+
}
|
|
1510
1561
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1511
1562
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BarChartComponent, isStandalone: true, selector: "he-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, datasetLabel: { classPropertyName: "datasetLabel", publicName: "datasetLabel", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showNegativeValues: { classPropertyName: "showNegativeValues", publicName: "showNegativeValues", isSignal: true, isRequired: false, transformFunction: null }, maximumValues: { classPropertyName: "maximumValues", publicName: "maximumValues", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["barChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n <ng-content />\n</he-chart>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1512
1563
|
}
|
|
@@ -1515,19 +1566,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1515
1566
|
args: [{ selector: 'he-bar-chart', exportAs: 'barChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, BarChartLegendComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n <ng-content />\n</he-chart>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
|
|
1516
1567
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], datasetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasetLabel", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showNegativeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNegativeValues", required: false }] }], maximumValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumValues", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
|
|
1517
1568
|
|
|
1518
|
-
class ChartExportButtonComponent {
|
|
1519
|
-
constructor() {
|
|
1520
|
-
this.chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : []));
|
|
1521
|
-
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
|
|
1522
|
-
}
|
|
1523
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n class=\"button is-small is-ghost\"\n (click)=\"!chart().exporting() && chart().exportAsSvg(config())\"\n [ngbTooltip]=\"chart().exporting() ? null : 'Download Chart (SVG)'\"\n placement=\"right\">\n @if (chart().exporting()) {\n <he-svg-icon name=\"loading\" animation=\"spin\" />\n } @else {\n <he-svg-icon name=\"download\" />\n }\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1525
|
-
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
|
|
1527
|
-
type: Component$1,
|
|
1528
|
-
args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n class=\"button is-small is-ghost\"\n (click)=\"!chart().exporting() && chart().exportAsSvg(config())\"\n [ngbTooltip]=\"chart().exporting() ? null : 'Download Chart (SVG)'\"\n placement=\"right\">\n @if (chart().exporting()) {\n <he-svg-icon name=\"loading\" animation=\"spin\" />\n } @else {\n <he-svg-icon name=\"download\" />\n }\n</button>\n" }]
|
|
1529
|
-
}], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
1530
|
-
|
|
1531
1569
|
class ChartTooltipComponent {
|
|
1532
1570
|
constructor() {
|
|
1533
1571
|
this.tooltipFn = input.required(...(ngDevMode ? [{ debugName: "tooltipFn" }] : []));
|
|
@@ -1831,12 +1869,21 @@ const defaultConfig = Object.freeze({
|
|
|
1831
1869
|
}
|
|
1832
1870
|
});
|
|
1833
1871
|
const defaultTooltipFn = ({ label, count, includedItems }) => includedItems?.length ? includedItems.map(item => defaultTooltipFn(item)).join('</br>') : `${label}: ${count}`;
|
|
1872
|
+
const chartHeight = (minHeight, maxHeight, nbRows) => {
|
|
1873
|
+
const rowHeight = 40; // Pixels per bar (includes bar + gap)
|
|
1874
|
+
const padding = 60; // Extra pixels for x-axis labels, legend, etc.
|
|
1875
|
+
const height = nbRows * rowHeight + padding;
|
|
1876
|
+
return Math.min(Math.max(height, minHeight), maxHeight);
|
|
1877
|
+
};
|
|
1834
1878
|
class HorizontalBarChartComponent extends BarChartComponent {
|
|
1835
1879
|
constructor() {
|
|
1836
1880
|
super(...arguments);
|
|
1837
1881
|
this.tooltipFn = input(defaultTooltipFn, ...(ngDevMode ? [{ debugName: "tooltipFn" }] : []));
|
|
1838
1882
|
this.afterBarDrawSettings = input(...(ngDevMode ? [undefined, { debugName: "afterBarDrawSettings" }] : []));
|
|
1883
|
+
this.minHeight = input(100, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
|
|
1884
|
+
this.maxHeight = input(400, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
1839
1885
|
this.tooltip = viewChild.required(ChartTooltipComponent);
|
|
1886
|
+
this.height = computed(() => chartHeight(this.minHeight(), this.maxHeight(), this.maximumData()?.length ?? 0), ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
1840
1887
|
this.horizontalConfiguration = computed(() => ({
|
|
1841
1888
|
...merge(this.configuration(), defaultConfig, {
|
|
1842
1889
|
options: {
|
|
@@ -1861,12 +1908,12 @@ class HorizontalBarChartComponent extends BarChartComponent {
|
|
|
1861
1908
|
}), ...(ngDevMode ? [{ debugName: "horizontalConfiguration" }] : []));
|
|
1862
1909
|
}
|
|
1863
1910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalBarChartComponent, isStandalone: true, selector: "he-horizontal-bar-chart", inputs: { tooltipFn: { classPropertyName: "tooltipFn", publicName: "tooltipFn", isSignal: true, isRequired: false, transformFunction: null }, afterBarDrawSettings: { classPropertyName: "afterBarDrawSettings", publicName: "afterBarDrawSettings", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["horizontalBarChart"], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-area-border\">\n <he-chart\n class=\"is-relative h-100\"\n [data]=\"dataConfig()\"\n [config]=\"horizontalConfiguration()\"\n [showExportButton]=\"showExportButton()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n <ng-content />\n </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalBarChartComponent, isStandalone: true, selector: "he-horizontal-bar-chart", inputs: { tooltipFn: { classPropertyName: "tooltipFn", publicName: "tooltipFn", isSignal: true, isRequired: false, transformFunction: null }, afterBarDrawSettings: { classPropertyName: "afterBarDrawSettings", publicName: "afterBarDrawSettings", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["horizontalBarChart"], usesInheritance: true, ngImport: i0, template: "<div class=\"chart-area-border\">\n <he-chart\n class=\"is-relative h-100\"\n [data]=\"dataConfig()\"\n [config]=\"horizontalConfiguration()\"\n [showExportButton]=\"showExportButton()\"\n [style.height.px]=\"height()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n <ng-content />\n </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1865
1912
|
}
|
|
1866
1913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalBarChartComponent, decorators: [{
|
|
1867
1914
|
type: Component$1,
|
|
1868
|
-
args: [{ selector: 'he-horizontal-bar-chart', exportAs: 'horizontalBarChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n <he-chart\n class=\"is-relative h-100\"\n [data]=\"dataConfig()\"\n [config]=\"horizontalConfiguration()\"\n [showExportButton]=\"showExportButton()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n <ng-content />\n </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
|
|
1869
|
-
}], propDecorators: { tooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFn", required: false }] }], afterBarDrawSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterBarDrawSettings", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
|
|
1915
|
+
args: [{ selector: 'he-horizontal-bar-chart', exportAs: 'horizontalBarChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n <he-chart\n class=\"is-relative h-100\"\n [data]=\"dataConfig()\"\n [config]=\"horizontalConfiguration()\"\n [showExportButton]=\"showExportButton()\"\n [style.height.px]=\"height()\">\n <he-chart-tooltip [tooltipFn]=\"tooltipFn()\" />\n\n <ng-content />\n </he-chart>\n</div>\n\n@if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n}\n\n<he-bar-chart-legend [data]=\"maximumData()\" />\n", styles: [":host{display:block}\n"] }]
|
|
1916
|
+
}], propDecorators: { tooltipFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFn", required: false }] }], afterBarDrawSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterBarDrawSettings", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
|
|
1870
1917
|
|
|
1871
1918
|
const ignoreCompounds = (value) => typeof value !== 'string' ||
|
|
1872
1919
|
[
|
|
@@ -2256,6 +2303,20 @@ const siteTypeToIcon = {
|
|
|
2256
2303
|
[SiteSiteType['river or stream']]: 'river',
|
|
2257
2304
|
[SiteSiteType['sea or ocean']]: 'ocean'
|
|
2258
2305
|
};
|
|
2306
|
+
const siteTypeToColor = {
|
|
2307
|
+
[SiteSiteType.forest]: '#498f78',
|
|
2308
|
+
[SiteSiteType['other natural vegetation']]: '#8a5402',
|
|
2309
|
+
[SiteSiteType.cropland]: '#fecc34',
|
|
2310
|
+
[SiteSiteType['glass or high accessible cover']]: '#dbe3ea',
|
|
2311
|
+
[SiteSiteType['permanent pasture']]: '#9ab04c',
|
|
2312
|
+
[SiteSiteType['animal housing']]: '#cca76d',
|
|
2313
|
+
[SiteSiteType.pond]: '#9db6d2',
|
|
2314
|
+
[SiteSiteType['river or stream']]: '#d5f3d8',
|
|
2315
|
+
[SiteSiteType.lake]: '#1a0dab',
|
|
2316
|
+
[SiteSiteType['sea or ocean']]: '#32bac2',
|
|
2317
|
+
[SiteSiteType['agri-food processor']]: '#193957',
|
|
2318
|
+
[SiteSiteType['food retailer']]: '#8b50A7'
|
|
2319
|
+
};
|
|
2259
2320
|
|
|
2260
2321
|
/* eslint-disable-next-line complexity */
|
|
2261
2322
|
const formatDate = (date, isStart = false) => date?.length === 4
|
|
@@ -3331,18 +3392,19 @@ class NavigationMenuComponent {
|
|
|
3331
3392
|
// if the primary link has children, it should not be active unless exact
|
|
3332
3393
|
(level === 1 && link.links?.length ? { exact: true } : this.routerLinkMatchOptions()));
|
|
3333
3394
|
}
|
|
3334
|
-
|
|
3395
|
+
selectLink($event, link) {
|
|
3335
3396
|
// delay closing to show selection
|
|
3336
3397
|
setTimeout(() => this.closed.emit(), 200);
|
|
3398
|
+
return toggleLink($event, link);
|
|
3337
3399
|
}
|
|
3338
3400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ?
|
|
3401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NavigationMenuComponent, isStandalone: true, selector: "he-navigation-menu", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, routerLinkMatchOptions: { classPropertyName: "routerLinkMatchOptions", publicName: "routerLinkMatchOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { classAttribute: "no-print navigation-menu" }, ngImport: i0, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? selectLink($event, link) : true\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3340
3402
|
}
|
|
3341
3403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NavigationMenuComponent, decorators: [{
|
|
3342
3404
|
type: Component$1,
|
|
3343
3405
|
args: [{ selector: 'he-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RouterLinkActive, RouterLink, HESvgIconComponent], host: {
|
|
3344
3406
|
class: 'no-print navigation-menu'
|
|
3345
|
-
}, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ?
|
|
3407
|
+
}, template: "<aside\n class=\"is-flex is-flex-direction-column is-gap-12 is-overflow-hidden is-py-desktop-3 | menu\"\n [class.sticky]=\"sticky()\">\n <ng-content select=\"[header]\" />\n\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (link of links(); track trackByLink(link)) {\n <ng-container *ngTemplateOutlet=\"linkItem; context: { link, parentLinks: [], level: 1 }\" />\n }\n </div>\n\n <ng-content select=\"[footer]\" />\n</aside>\n\n<ng-template #linkExpandIcon let-link>\n @if (isCollapsible(link)) {\n <he-svg-icon\n [name]=\"link.expanded ? 'chevron-down' : 'chevron-right'\"\n class=\"is-inline-block is-clickable\"\n size=\"20\"\n (click)=\"toggleLink($event, link)\" />\n }\n</ng-template>\n\n<ng-template #linkContent let-link=\"link\" let-level=\"level\">\n @if (level === 1) {\n @if (link.icon) {\n <he-svg-icon [name]=\"link.icon\" size=\"20\" class=\"is-inline-block has-text-secondary\" />\n } @else if (hasPrimaryIcons()) {\n <span class=\"primary-missing-icon\"> </span>\n }\n }\n <span class=\"is-flex is-flex-grow-1 is-align-self-center\" [innerHTML]=\"link.title\"></span>\n <ng-container *ngTemplateOutlet=\"linkExpandIcon; context: { $implicit: link }\" />\n</ng-template>\n\n<ng-template #linkItemChildren let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n @let childParents = concatLinks(link, parentLinks);\n @if (isCollapsible(link)) {\n <div\n class=\"is-flex is-flex-direction-column is-align-items-stretch | he-menu-child-items\"\n [class.is-hidden]=\"!link.expanded\">\n @for (childLink of link.links; track trackByLink(childLink)) {\n <ng-container\n *ngTemplateOutlet=\"linkItem; context: { link: childLink, parentLinks: childParents, level: level + 1 }\" />\n }\n </div>\n }\n</ng-template>\n\n<ng-template #linkItem let-link=\"link\" let-parentLinks=\"parentLinks\" let-level=\"level\">\n <div\n class=\"is-flex is-align-items-center is-gap-4 | he-menu-item\"\n [attr.data-menu-level]=\"level\"\n (click)=\"toggleLink($event, link)\"\n [class.with-border-color]=\"!!link.borderColor\">\n @if (link.borderColor) {\n <div class=\"he-menu-border\" [style.background-color]=\"link.borderColor\"></div>\n }\n <a\n class=\"is-flex is-flex-grow-1 is-align-self-stretch is-align-items-center is-gap-8 has-text-secondary | he-menu-label\"\n [class.he-menu-item-selectable]=\"!!link?.url\"\n (click)=\"link.url ? selectLink($event, link) : true\"\n [routerLink]=\"link.url\"\n [queryParams]=\"link.queryParams\"\n [fragment]=\"link.fragment\"\n routerLinkActive=\"link-active\"\n [routerLinkActiveOptions]=\"linkActiveOptions(link, level)\"\n (isActiveChange)=\"$event && linksActiveChange(link, parentLinks)\">\n <ng-container *ngTemplateOutlet=\"linkContent; context: { link, level }\" />\n </a>\n </div>\n <ng-container *ngTemplateOutlet=\"linkItemChildren; context: { link, parentLinks, level }\" />\n</ng-template>\n", styles: [".navigation-menu{width:100%;display:block}.navigation-menu .menu{font-size:.875rem;line-height:16px;color:#193957;font-weight:400;width:100%!important;max-width:100%!important}@media screen and (min-width:1024px){.navigation-menu .menu{width:14rem!important;min-width:14rem!important;max-width:14rem!important;border-style:solid;border-color:#ffc000;border-width:1px 0}}.navigation-menu .menu.fixed-top{transform:translate3d(0,6.75rem,0)}.navigation-menu .menu.sticky{position:sticky;top:6.75rem}.navigation-menu a{text-decoration:none!important}.navigation-menu a:focus,.navigation-menu a:active{outline:0!important}.navigation-menu .cursor-default{cursor:default!important}.navigation-menu .primary-missing-icon{height:20px;width:20px;min-width:20px}.navigation-menu .he-menu-item{padding:1px 0}.navigation-menu .he-menu-item .he-menu-label{height:28px;border-radius:3px;padding:4px}.navigation-menu .he-menu-item .he-menu-border{width:8px;height:28px}.navigation-menu .he-menu-item[data-menu-level=\"1\"] span{font-weight:700}.navigation-menu .he-menu-item[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:14px}.navigation-menu .he-menu-item[data-menu-level=\"2\"]{padding-left:14px;border-left:1px solid #ffc000}.navigation-menu .he-menu-item[data-menu-level=\"2\"]+.he-menu-child-items{padding-left:28px}.navigation-menu .he-menu-item-selectable:not(.link-active):hover{background-color:#fefaef}.navigation-menu .he-menu-item.with-border-color .he-menu-label{border-radius:0}.navigation-menu .he-menu-item.with-border-color[data-menu-level=\"1\"]+.he-menu-child-items{padding-left:26px}.navigation-menu .he-menu-child-items{padding-left:14px}.navigation-menu .link-active{background-color:#ffe8a3;color:#193957!important}\n"] }]
|
|
3346
3408
|
}], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], routerLinkMatchOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkMatchOptions", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
3347
3409
|
|
|
3348
3410
|
const storageKey$2 = 'he-drawer-container';
|
|
@@ -4003,6 +4065,7 @@ class SearchExtendComponent {
|
|
|
4003
4065
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
4004
4066
|
this.placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
4005
4067
|
this.class = input(undefined, ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
4068
|
+
this.collapsedClass = input(undefined, ...(ngDevMode ? [{ debugName: "collapsedClass" }] : []));
|
|
4006
4069
|
this.searchText = output();
|
|
4007
4070
|
this.extended = signal(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
|
|
4008
4071
|
}
|
|
@@ -4022,12 +4085,12 @@ class SearchExtendComponent {
|
|
|
4022
4085
|
return this.extended() ? this.applySearch() : this.extend();
|
|
4023
4086
|
}
|
|
4024
4087
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchExtendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4025
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: SearchExtendComponent, isStandalone: true, selector: "he-search-extend", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchText: "searchText" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form\n class=\"field has-addons\"\n novalidate\n (submit)=\"submit()\"\n [ngbTooltip]=\"extended() ? null : placeholder()\"\n container=\"body\">\n <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n <input\n #searchInput\n type=\"text\"\n class=\"input is-small search-input\"\n [ngClass]=\"class()\"\n name=\"search\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [attr.placeholder]=\"placeholder()\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </a>\n </div>\n <div class=\"control\">\n <button
|
|
4088
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: SearchExtendComponent, isStandalone: true, selector: "he-search-extend", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, collapsedClass: { classPropertyName: "collapsedClass", publicName: "collapsedClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", searchText: "searchText" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form\n class=\"field has-addons\"\n novalidate\n (submit)=\"submit()\"\n [ngbTooltip]=\"extended() ? null : placeholder()\"\n container=\"body\">\n <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n <input\n #searchInput\n type=\"text\"\n class=\"input is-small search-input\"\n [ngClass]=\"class()\"\n name=\"search\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [attr.placeholder]=\"placeholder()\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </a>\n </div>\n <div class=\"control\">\n <button\n class=\"button is-ghost is-small is-radius-right-6\"\n [ngClass]=\"extended() ? class() : collapsedClass()\"\n type=\"submit\">\n <he-svg-icon name=\"search\" size=\"20\" />\n </button>\n </div>\n</form>\n", styles: [".button{height:36px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
4026
4089
|
}
|
|
4027
4090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SearchExtendComponent, decorators: [{
|
|
4028
4091
|
type: Component$1,
|
|
4029
|
-
args: [{ selector: 'he-search-extend', imports: [FormsModule, NgClass, NgbTooltip, HESvgIconComponent], template: "<form\n class=\"field has-addons\"\n novalidate\n (submit)=\"submit()\"\n [ngbTooltip]=\"extended() ? null : placeholder()\"\n container=\"body\">\n <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n <input\n #searchInput\n type=\"text\"\n class=\"input is-small search-input\"\n [ngClass]=\"class()\"\n name=\"search\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [attr.placeholder]=\"placeholder()\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </a>\n </div>\n <div class=\"control\">\n <button
|
|
4030
|
-
}], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], searchText: [{ type: i0.Output, args: ["searchText"] }] } });
|
|
4092
|
+
args: [{ selector: 'he-search-extend', imports: [FormsModule, NgClass, NgbTooltip, HESvgIconComponent], template: "<form\n class=\"field has-addons\"\n novalidate\n (submit)=\"submit()\"\n [ngbTooltip]=\"extended() ? null : placeholder()\"\n container=\"body\">\n <div class=\"control is-expanded has-icons-right\" [class.is-hidden]=\"!extended()\">\n <input\n #searchInput\n type=\"text\"\n class=\"input is-small search-input\"\n [ngClass]=\"class()\"\n name=\"search\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n [attr.placeholder]=\"placeholder()\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!value() || disabled()\" (click)=\"clear()\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </a>\n </div>\n <div class=\"control\">\n <button\n class=\"button is-ghost is-small is-radius-right-6\"\n [ngClass]=\"extended() ? class() : collapsedClass()\"\n type=\"submit\">\n <he-svg-icon name=\"search\" size=\"20\" />\n </button>\n </div>\n</form>\n", styles: [".button{height:36px}\n"] }]
|
|
4093
|
+
}], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], collapsedClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedClass", required: false }] }], searchText: [{ type: i0.Output, args: ["searchText"] }] } });
|
|
4031
4094
|
|
|
4032
4095
|
class ShellComponent {
|
|
4033
4096
|
constructor() {
|
|
@@ -4816,7 +4879,7 @@ const cloneAttributes = (target, source, except = null) => {
|
|
|
4816
4879
|
*
|
|
4817
4880
|
* @param string
|
|
4818
4881
|
*/
|
|
4819
|
-
const escape = string => isString(string)
|
|
4882
|
+
const escape$1 = string => isString(string)
|
|
4820
4883
|
? string.replace(/(['"<>])/g, char => ({
|
|
4821
4884
|
'<': '<',
|
|
4822
4885
|
'>': '>',
|
|
@@ -4938,21 +5001,21 @@ const defaultOptions = {
|
|
|
4938
5001
|
trim: true // Should we trim value before processing them ?
|
|
4939
5002
|
};
|
|
4940
5003
|
|
|
4941
|
-
var tagTemplate = data => `<span class="tag ${escape(data.style)}" data-value="${escape(data.value)}">
|
|
4942
|
-
${escape(data.text)}
|
|
5004
|
+
var tagTemplate = data => `<span class="tag ${escape$1(data.style)}" data-value="${escape$1(data.value)}">
|
|
5005
|
+
${escape$1(data.text)}
|
|
4943
5006
|
${data.removable ? '<div class="delete is-small" data-tag="delete"></div>' : ''}
|
|
4944
5007
|
</span>`;
|
|
4945
5008
|
|
|
4946
5009
|
var containerTemplate = data => `<div class="tags-input">
|
|
4947
|
-
<input class="input" type="text" placeholder="${escape(data.placeholder)}">
|
|
4948
|
-
<div id="${escape(data.uuid)}-list" class="dropdown-menu" role="menu">
|
|
5010
|
+
<input class="input" type="text" placeholder="${escape$1(data.placeholder)}">
|
|
5011
|
+
<div id="${escape$1(data.uuid)}-list" class="dropdown-menu" role="menu">
|
|
4949
5012
|
<div class="dropdown-content">
|
|
4950
|
-
<span class="dropdown-item empty-title">${escape(data.emptyTitle)}</span>
|
|
5013
|
+
<span class="dropdown-item empty-title">${escape$1(data.emptyTitle)}</span>
|
|
4951
5014
|
</div>
|
|
4952
5015
|
</div>
|
|
4953
5016
|
</div>`;
|
|
4954
5017
|
|
|
4955
|
-
var dropdownItemTemplate = data => `<a href="javascript:void(0);" class="dropdown-item" data-value="${escape(data.value)}" data-text="${escape(data.text)}">${escape(data.text)}</a>`;
|
|
5018
|
+
var dropdownItemTemplate = data => `<a href="javascript:void(0);" class="dropdown-item" data-value="${escape$1(data.value)}" data-text="${escape$1(data.text)}">${escape$1(data.text)}</a>`;
|
|
4956
5019
|
|
|
4957
5020
|
/* eslint-disable */
|
|
4958
5021
|
// copied from https://github.com/CreativeBulma/bulma-tagsinput/tree/master/src/js to make it TypeScript compatible
|
|
@@ -6848,9 +6911,9 @@ class NodeCsvExportConfirmComponent {
|
|
|
6848
6911
|
this.included = computed(() => this.includedNodes()
|
|
6849
6912
|
.filter(({ included }) => included)
|
|
6850
6913
|
.map(({ node }) => node), ...(ngDevMode ? [{ debugName: "included" }] : []));
|
|
6851
|
-
this.csvData = computed(() => toCsv(this.nodes() || [], { includeExising: !this.isUpload() }), ...(ngDevMode ? [{ debugName: "csvData" }] : []));
|
|
6914
|
+
this.csvData = computed(() => toCsv$1(this.nodes() || [], { includeExising: !this.isUpload() }), ...(ngDevMode ? [{ debugName: "csvData" }] : []));
|
|
6852
6915
|
this.csvContent = computed(() => this.headers().length
|
|
6853
|
-
? this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.included(), { includeExising: !this.isUpload(), selectedHeaders: this.headers() }))}`)
|
|
6916
|
+
? this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv$1(this.included(), { includeExising: !this.isUpload(), selectedHeaders: this.headers() }))}`)
|
|
6854
6917
|
: undefined, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
|
|
6855
6918
|
this.downloadFilename = computed(() => fileToExt(this.filename(), this.extension()), ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
|
|
6856
6919
|
}
|
|
@@ -7013,14 +7076,16 @@ const groupLogSubValue = (group, log, key) => {
|
|
|
7013
7076
|
}
|
|
7014
7077
|
return group;
|
|
7015
7078
|
};
|
|
7016
|
-
const groupLogsByModel = (data = '', groupByAnimal = false) => data
|
|
7079
|
+
const groupLogsByModel = (data = '', groupBySubValue = false, groupByAnimal = false) => data
|
|
7017
7080
|
.trim()
|
|
7018
7081
|
.split('\n')
|
|
7019
7082
|
.map(parseMessage)
|
|
7020
7083
|
.filter(v => [hasValue(v?.model), ['term', 'key', 'animalId'].some(k => hasValue(v?.[k]))].every(Boolean))
|
|
7021
7084
|
.reduce((group, log) => {
|
|
7022
7085
|
const subValue = subValueKeys.find(v => !!log[v] && log[v] != noValue);
|
|
7023
|
-
return subValue && !log.cycle
|
|
7086
|
+
return subValue && groupBySubValue && !log.cycle
|
|
7087
|
+
? groupLogSubValue(group, log, subValue)
|
|
7088
|
+
: groupLog(group, log, groupByAnimal);
|
|
7024
7089
|
}, {});
|
|
7025
7090
|
const asArray = (values) => (Array.isArray(values) ? values : []);
|
|
7026
7091
|
const computeTerms = (originalValues, recalculatedValues, terms, filterTermTypes, extraTerms = []) => orderBy(uniqBy([
|
|
@@ -7159,13 +7224,11 @@ const logSubValue = (logs, key, prop, showUnits = false) => {
|
|
|
7159
7224
|
key: prop,
|
|
7160
7225
|
id,
|
|
7161
7226
|
showUnits
|
|
7162
|
-
// recalculatedValue: inputValue(logs[key]?.logs?.[id])
|
|
7163
7227
|
}))
|
|
7164
7228
|
: {
|
|
7165
7229
|
key: prop,
|
|
7166
7230
|
id: log,
|
|
7167
7231
|
showUnits
|
|
7168
|
-
// recalculatedValue: inputValue(logs[key]?.logs?.[log])
|
|
7169
7232
|
}
|
|
7170
7233
|
: undefined;
|
|
7171
7234
|
};
|
|
@@ -7192,11 +7255,11 @@ const logEmissionTransformations = (emissions) => emissions
|
|
|
7192
7255
|
showUnits: true,
|
|
7193
7256
|
configModels: ['cycle/transformation']
|
|
7194
7257
|
}));
|
|
7195
|
-
const logEmissionInputs = (
|
|
7258
|
+
const logEmissionInputs = (cycle, allLogs, termId, emissions) => {
|
|
7196
7259
|
// only log for background emissions
|
|
7197
7260
|
const data = emissions.filter(({ methodTier, term }) => term['@id'] === termId && methodTier === EmissionMethodTier.background);
|
|
7198
7261
|
const configModels = unique(data.flatMap(emission => emission.methodModel?.['@id']).filter(Boolean));
|
|
7199
|
-
const inputs =
|
|
7262
|
+
const inputs = cycle.inputs ?? [];
|
|
7200
7263
|
return data.length
|
|
7201
7264
|
? (inputs?.map(input => ({
|
|
7202
7265
|
blankNode: true,
|
|
@@ -7246,7 +7309,7 @@ const cycleSubValue = ({ termId, configModels, isRequired, subValues, original,
|
|
|
7246
7309
|
}
|
|
7247
7310
|
: null;
|
|
7248
7311
|
};
|
|
7249
|
-
const logSubValues = (
|
|
7312
|
+
const logSubValues = (allLogs, termLogs, original, recalculated, { type, termId }, cycle) =>
|
|
7250
7313
|
// preserve order, as the last one will set the run status
|
|
7251
7314
|
mergeSubValues([
|
|
7252
7315
|
...logProperties(original),
|
|
@@ -7260,10 +7323,12 @@ mergeSubValues([
|
|
|
7260
7323
|
configModels: (termLogs[id].models || []).filter(v => hasLog(termLogs[id][v]))
|
|
7261
7324
|
})),
|
|
7262
7325
|
...(type === SchemaType.Emission ? logEmissionTransformations(recalculated) : []),
|
|
7263
|
-
...(
|
|
7326
|
+
...([SchemaType.Emission].includes(type) && cycle
|
|
7327
|
+
? logEmissionInputs(cycle, allLogs, termId, recalculated)
|
|
7328
|
+
: []),
|
|
7264
7329
|
...(type === SchemaType.Input ? logBackgroundEmissions(termLogs) : []),
|
|
7265
7330
|
// include animals without models, so they can be used for grouping
|
|
7266
|
-
...(
|
|
7331
|
+
...([SchemaType.Emission, SchemaType.Indicator].includes(type) && cycle ? logAnimals(cycle) : []),
|
|
7267
7332
|
// include inputs (Emissions) and properties
|
|
7268
7333
|
...Object.keys(termLogs).flatMap(key => [type !== SchemaType.Input && logSubValue(termLogs, key, 'input', true), logSubValue(termLogs, key, 'property')]
|
|
7269
7334
|
.flat()
|
|
@@ -7297,11 +7362,11 @@ const mapSubValue = (allLogs, termLogs, original, recalculated, { nodeType, type
|
|
|
7297
7362
|
: dataWithConfigModelLogs(termLogs, termId)(subValue)
|
|
7298
7363
|
: null;
|
|
7299
7364
|
};
|
|
7300
|
-
const filterByAnimalId = (
|
|
7301
|
-
?
|
|
7365
|
+
const filterByAnimalId = (cycle, subValue) => [cycle?.animals?.length, subValue.key === 'animal'].every(Boolean)
|
|
7366
|
+
? cycle.animals?.find(animal => animal.animalId === subValue.id)?.term?.['@id']
|
|
7302
7367
|
: undefined;
|
|
7303
|
-
const compileSubValues = (
|
|
7304
|
-
const subValues = orderBy(logSubValues(
|
|
7368
|
+
const compileSubValues = (allLogs, termLogs, original, recalculated, configModelsData, termsGrouping = {}, cycle) => {
|
|
7369
|
+
const subValues = orderBy(logSubValues(allLogs, termLogs, original, recalculated, configModelsData, cycle), ['id'], ['asc']);
|
|
7305
7370
|
const skipGroupSubValues = [
|
|
7306
7371
|
[NodeType.ImpactAssessment].includes(configModelsData.nodeType),
|
|
7307
7372
|
configModelsData.termType !== TermTermType.resourceUse
|
|
@@ -7321,7 +7386,7 @@ const compileSubValues = (node, allLogs, termLogs, original, recalculated, confi
|
|
|
7321
7386
|
: {}),
|
|
7322
7387
|
...(value.subValues?.length
|
|
7323
7388
|
? {
|
|
7324
|
-
subValues: value.subValues.map(subValue => mapSubValue(allLogs, termLogs, original, recalculated, configModelsData, subValue, filterByAnimalId(
|
|
7389
|
+
subValues: value.subValues.map(subValue => mapSubValue(allLogs, termLogs, original, recalculated, configModelsData, subValue, filterByAnimalId(cycle, value)))
|
|
7325
7390
|
}
|
|
7326
7391
|
: {})
|
|
7327
7392
|
}));
|
|
@@ -7492,7 +7557,7 @@ const valueByMethodId = (values, methodId, termId) => propertyValue$1(values.fin
|
|
|
7492
7557
|
const groupParallelValues = (values, models, termId) => Array.isArray(models)
|
|
7493
7558
|
? Object.fromEntries(models.map(model => [model.methodId, valueByMethodId(values, model.methodId, termId)]))
|
|
7494
7559
|
: {};
|
|
7495
|
-
const groupLogsByTerm = (node, logs, config, allOriginalValues, allRecalculatedValues, nodeKey, termsGrouping = {}) => {
|
|
7560
|
+
const groupLogsByTerm = (node, logs, config, allOriginalValues, allRecalculatedValues, nodeKey, termsGrouping = {}, cycle) => {
|
|
7496
7561
|
const nodeType$1 = nodeType(node);
|
|
7497
7562
|
const originalValues = filterDeleted(allOriginalValues || []);
|
|
7498
7563
|
const recalculatedValues = filterDeleted(allRecalculatedValues || []).filter(hasRecalculatedKeys);
|
|
@@ -7529,7 +7594,7 @@ const groupLogsByTerm = (node, logs, config, allOriginalValues, allRecalculatedV
|
|
|
7529
7594
|
]);
|
|
7530
7595
|
const configModels = groupParallelModels(config, termId, nodeKey, models.map(configModelWithDocs(configModelsData)));
|
|
7531
7596
|
const keys = logKeys(termLogs, original, recalculated, configModelsData);
|
|
7532
|
-
const subValues = compileSubValues(
|
|
7597
|
+
const subValues = compileSubValues(logs, termLogs, original, recalculated, configModelsData, termsGrouping, nodeType$1 === NodeType.Cycle ? node : cycle).filter(v => !!v.key);
|
|
7533
7598
|
const isRequired = !Object.values(termLogs)
|
|
7534
7599
|
.filter(v => typeof v === 'object' && !Array.isArray(v) && !v.isKey)
|
|
7535
7600
|
.every(v => v.runRequired === false);
|
|
@@ -7954,6 +8019,7 @@ class NodeLogsModelsComponent {
|
|
|
7954
8019
|
this.filterTermTypesLabel = input('', ...(ngDevMode ? [{ debugName: "filterTermTypesLabel" }] : []));
|
|
7955
8020
|
this.logsKey = input('', ...(ngDevMode ? [{ debugName: "logsKey" }] : []));
|
|
7956
8021
|
this.noDataMessage = input('', ...(ngDevMode ? [{ debugName: "noDataMessage" }] : []));
|
|
8022
|
+
this.cycle = input(...(ngDevMode ? [undefined, { debugName: "cycle" }] : []));
|
|
7957
8023
|
this.isEmpty = isEmpty;
|
|
7958
8024
|
this.schemaBaseUrl = schemaBaseUrl();
|
|
7959
8025
|
this.isExternal = isExternal();
|
|
@@ -7995,8 +8061,8 @@ class NodeLogsModelsComponent {
|
|
|
7995
8061
|
this.config = computed(() => this.configResource.value(), ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
7996
8062
|
this.inputGroupsResource = rxResource({
|
|
7997
8063
|
params: () => ({
|
|
7998
|
-
ids: unique(this.
|
|
7999
|
-
?.filter((value) => inputGroupsTermTypes.includes(value?.term?.termType))
|
|
8064
|
+
ids: unique(this.cycle()
|
|
8065
|
+
?.inputs?.filter((value) => inputGroupsTermTypes.includes(value?.term?.termType))
|
|
8000
8066
|
?.map(v => v.term['@id'])
|
|
8001
8067
|
?.filter(Boolean) ?? [])
|
|
8002
8068
|
}),
|
|
@@ -8006,17 +8072,13 @@ class NodeLogsModelsComponent {
|
|
|
8006
8072
|
return prev;
|
|
8007
8073
|
}, {}))
|
|
8008
8074
|
});
|
|
8009
|
-
this.animalGroups = computed(() =>
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
prev[curr.id].push(curr.group);
|
|
8015
|
-
return prev;
|
|
8016
|
-
}, {})
|
|
8017
|
-
: {}, ...(ngDevMode ? [{ debugName: "animalGroups" }] : []));
|
|
8075
|
+
this.animalGroups = computed(() => (this.cycle()?.animals?.flatMap(animal => animal.inputs?.map(input => ({ id: input.term['@id'], group: animal.animalId }))) ?? []).reduce((prev, curr) => {
|
|
8076
|
+
prev[curr.id] = prev[curr.id] || [];
|
|
8077
|
+
prev[curr.id].push(curr.group);
|
|
8078
|
+
return prev;
|
|
8079
|
+
}, {}), ...(ngDevMode ? [{ debugName: "animalGroups" }] : []));
|
|
8018
8080
|
this.termsGrouping = computed(() => Object.assign({}, this.inputGroupsResource.value() ?? {}, this.animalGroups() ?? {}), ...(ngDevMode ? [{ debugName: "termsGrouping" }] : []));
|
|
8019
|
-
this.groupedLogs = computed(() => this.allLogs() ? groupLogsByModel(this.allLogs(), !!this.logsKey()) : {}, ...(ngDevMode ? [{ debugName: "groupedLogs" }] : []));
|
|
8081
|
+
this.groupedLogs = computed(() => this.allLogs() ? groupLogsByModel(this.allLogs(), this.nodeType() === NodeType.Cycle, !!this.logsKey()) : {}, ...(ngDevMode ? [{ debugName: "groupedLogs" }] : []));
|
|
8020
8082
|
this.logs = computed(() => (this.logsKey() ? this.groupedLogs()?.[this.logsKey()] : this.groupedLogs()) || {}, ...(ngDevMode ? [{ debugName: "logs" }] : []));
|
|
8021
8083
|
this.isBlankNodes = computed(() => Array.isArray(this.originalValues()) || Array.isArray(this.recalculatedValues()), ...(ngDevMode ? [{ debugName: "isBlankNodes" }] : []));
|
|
8022
8084
|
this.extraTermsFromLogsResource = rxResource({
|
|
@@ -8061,7 +8123,7 @@ class NodeLogsModelsComponent {
|
|
|
8061
8123
|
? []
|
|
8062
8124
|
: this.isBlankNodes()
|
|
8063
8125
|
? this.allTerms()
|
|
8064
|
-
.map(groupLogsByTerm(this.node(), this.logs(), this.config(), this.originalValues(), this.recalculatedValues(), this.nodeKey(), this.termsGrouping()))
|
|
8126
|
+
.map(groupLogsByTerm(this.node(), this.logs(), this.config(), this.originalValues(), this.recalculatedValues(), this.nodeKey(), this.termsGrouping(), this.cycle()))
|
|
8065
8127
|
.filter(shouldShowBlankNode)
|
|
8066
8128
|
: this.schemaType()
|
|
8067
8129
|
? computeKeys(this.originalValues(), this.recalculatedValues()).map(groupdLogsByKey(this.node(), this.nodeKey(), this.logs(), this.originalValues(), this.recalculatedValues()))
|
|
@@ -8157,7 +8219,7 @@ class NodeLogsModelsComponent {
|
|
|
8157
8219
|
return subValues.every(v => v.configModels.some(vv => vv.status === LogStatus.success));
|
|
8158
8220
|
}
|
|
8159
8221
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8160
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n <div>\n <ng-content />\n </div>\n\n @if (!isExternal && !loading() && logsUrl() && hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n <p class=\"is-my-2\">\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [resultFormatter]=\"termFormatter\"\n [inputFormatter]=\"termFormatter\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <p class=\"is-p-1\">\n @if (noDataMessage()) {\n <span>{{ noDataMessage() }}</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n }\n </p>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n } @else {\n <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n </span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n <span>No original data was provided and no gap filling occurred</span>\n @if (term() && !isInSystemBoundary(term()['@id'])) {\n <span class=\"is-pl-1\">as</span>\n <i class=\"is-px-1\">{{ term().name }}</i>\n <span>is not in the HESTIA system boundary</span>\n }\n <span>.</span>\n</ng-template>\n\n<ng-template #valueContent let-value=\"value\">\n @if (isNumber(value)) {\n {{ value | precision: 3 | default: '-' }}\n } @else {\n {{ value | default: '-' }}\n }\n</ng-template>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n </span>\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, cycle: { classPropertyName: "cycle", publicName: "cycle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n <div>\n <ng-content />\n </div>\n\n @if (!isExternal && !loading() && logsUrl() && hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n <p class=\"is-my-2\">\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [resultFormatter]=\"termFormatter\"\n [inputFormatter]=\"termFormatter\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <p class=\"is-p-1\">\n @if (noDataMessage()) {\n <span>{{ noDataMessage() }}</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n }\n </p>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n } @else {\n <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n </span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n <span>No original data was provided and no gap filling occurred</span>\n @if (term() && !isInSystemBoundary(term()['@id'])) {\n <span class=\"is-pl-1\">as</span>\n <i class=\"is-px-1\">{{ term().name }}</i>\n <span>is not in the HESTIA system boundary</span>\n }\n <span>.</span>\n</ng-template>\n\n<ng-template #valueContent let-value=\"value\">\n @if (isNumber(value)) {\n {{ value | precision: 3 | default: '-' }}\n } @else {\n {{ value | default: '-' }}\n }\n</ng-template>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n </span>\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8161
8223
|
}
|
|
8162
8224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
|
|
8163
8225
|
type: Component$1,
|
|
@@ -8182,8 +8244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8182
8244
|
NodeLogsModelsLogsStatusComponent,
|
|
8183
8245
|
HESvgIconComponent,
|
|
8184
8246
|
GuideOverlayComponent
|
|
8185
|
-
], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n <div>\n <ng-content />\n </div>\n\n @if (!isExternal && !loading() && logsUrl() && hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n <p class=\"is-my-2\">\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [resultFormatter]=\"termFormatter\"\n [inputFormatter]=\"termFormatter\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <p class=\"is-p-1\">\n @if (noDataMessage()) {\n <span>{{ noDataMessage() }}</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n }\n </p>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n } @else {\n <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n </span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n <span>No original data was provided and no gap filling occurred</span>\n @if (term() && !isInSystemBoundary(term()['@id'])) {\n <span class=\"is-pl-1\">as</span>\n <i class=\"is-px-1\">{{ term().name }}</i>\n <span>is not in the HESTIA system boundary</span>\n }\n <span>.</span>\n</ng-template>\n\n<ng-template #valueContent let-value=\"value\">\n @if (isNumber(value)) {\n {{ value | precision: 3 | default: '-' }}\n } @else {\n {{ value | default: '-' }}\n }\n</ng-template>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n </span>\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
|
|
8186
|
-
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], originalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValues", required: false }] }], recalculatedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "recalculatedValues", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], filterTermTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypesLabel", required: false }] }], logsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "logsKey", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }] } });
|
|
8247
|
+
], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-my-2\">\n <div>\n <ng-content />\n </div>\n\n @if (!isExternal && !loading() && logsUrl() && hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</div>\n\n@if (!isExternal && !loading() && !hasLogs()) {\n <p class=\"is-my-2\">\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning is-pl-1\">No logs found. Recalculation logs will be incomplete.</span>\n </p>\n}\n\n<he-data-table class=\"is-mt-2 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [resultFormatter]=\"termFormatter\"\n [inputFormatter]=\"termFormatter\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set(undefined)\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"100\">\n <p class=\"is-p-1\">\n @if (noDataMessage()) {\n <span>{{ noDataMessage() }}</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"noResultsDefaultMessage\" />\n }\n </p>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n } @else {\n <a [href]=\"schemaBaseUrl + '/' + nodeType() + '#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).originalValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: $any(blankNode).originalValue }\" />\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n valueContent;\n context: { value: $any(blankNode).recalculatedValueByMethodId[model.methodId] }\n \" />\n </div>\n }\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: blankNode.recalculatedValue }\" />\n </span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #noResultsDefaultMessage>\n <span>No original data was provided and no gap filling occurred</span>\n @if (term() && !isInSystemBoundary(term()['@id'])) {\n <span class=\"is-pl-1\">as</span>\n <i class=\"is-px-1\">{{ term().name }}</i>\n <span>is not in the HESTIA system boundary</span>\n }\n <span>.</span>\n</ng-template>\n\n<ng-template #valueContent let-value=\"value\">\n @if (isNumber(value)) {\n {{ value | precision: 3 | default: '-' }}\n } @else {\n {{ value | default: '-' }}\n }\n</ng-template>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span class=\"is-nowrap\" [innerHtml]=\"$any(blankNode).term.units | compound\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.originalValue }\" />\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n </span>\n } @else {\n <span>\n <ng-container *ngTemplateOutlet=\"valueContent; context: { value: subValue.recalculatedValue }\" />\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
|
|
8248
|
+
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], originalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValues", required: false }] }], recalculatedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "recalculatedValues", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], filterTermTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypesLabel", required: false }] }], logsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "logsKey", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], cycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycle", required: false }] }] } });
|
|
8187
8249
|
|
|
8188
8250
|
var View$4;
|
|
8189
8251
|
(function (View) {
|
|
@@ -8256,7 +8318,7 @@ class CyclesCompletenessComponent {
|
|
|
8256
8318
|
component.headerKeys.set(headerKeys$1);
|
|
8257
8319
|
}
|
|
8258
8320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-
|
|
8321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice class=\"is-mt-2\" [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (selectedNode()) {\n <he-node-logs-models\n class=\"is-mt-2\"\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n }\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", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage", "cycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8260
8322
|
}
|
|
8261
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
|
|
8262
8324
|
type: Component$1,
|
|
@@ -8268,7 +8330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8268
8330
|
BlankNodeStateComponent,
|
|
8269
8331
|
BlankNodeStateNoticeComponent,
|
|
8270
8332
|
NodeLogsModelsComponent
|
|
8271
|
-
], template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-
|
|
8333
|
+
], template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice class=\"is-mt-2\" [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (selectedNode()) {\n <he-node-logs-models\n class=\"is-mt-2\"\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n }\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" }]
|
|
8272
8334
|
}], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
|
|
8273
8335
|
|
|
8274
8336
|
const cycleValue = (cycle, values) => (values[cycle['@id']]?.nodes[0] || { value: [0] }).value;
|
|
@@ -8303,11 +8365,11 @@ class CyclesEmissionsChartComponent {
|
|
|
8303
8365
|
this.selectedTerm.set(term);
|
|
8304
8366
|
}
|
|
8305
8367
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8306
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"labels()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}
|
|
8368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"labels()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8307
8369
|
}
|
|
8308
8370
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
|
|
8309
8371
|
type: Component$1,
|
|
8310
|
-
args: [{ selector: 'he-cycles-emissions-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"labels()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}
|
|
8372
|
+
args: [{ selector: 'he-cycles-emissions-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [labels]=\"labels()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"] }]
|
|
8311
8373
|
}], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
|
|
8312
8374
|
|
|
8313
8375
|
class CyclesFunctionalUnitMeasureComponent {
|
|
@@ -8394,7 +8456,7 @@ class CyclesMetadataComponent {
|
|
|
8394
8456
|
component.headerKeys.set(headerKeys);
|
|
8395
8457
|
}
|
|
8396
8458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8397
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-
|
|
8459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (key of keys(); track key) {\n <th [attr.title]=\"key\">\n <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n {{ keyToLabel(key) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of keys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ cycle[key] | default: '-' }}\n </span>\n <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice class=\"is-mt-2\" [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No data.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (selectedCycle()) {\n <he-node-logs-models\n class=\"is-mt-2\"\n [node]=\"selectedCycle()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage", "cycle"] }, { kind: "pipe", type: DefaultPipe, name: "default" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8398
8460
|
}
|
|
8399
8461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesMetadataComponent, decorators: [{
|
|
8400
8462
|
type: Component$1,
|
|
@@ -8407,7 +8469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8407
8469
|
BlankNodeStateNoticeComponent,
|
|
8408
8470
|
DefaultPipe,
|
|
8409
8471
|
NodeLogsModelsComponent
|
|
8410
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-
|
|
8472
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (key of keys(); track key) {\n <th [attr.title]=\"key\">\n <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n {{ keyToLabel(key) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of keys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ cycle[key] | default: '-' }}\n </span>\n <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice class=\"is-mt-2\" [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No data.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (selectedCycle()) {\n <he-node-logs-models\n class=\"is-mt-2\"\n [node]=\"selectedCycle()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\" />\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n" }]
|
|
8411
8473
|
}], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
|
|
8412
8474
|
|
|
8413
8475
|
// TODO: compute from the list of unique properties
|
|
@@ -8853,7 +8915,7 @@ class CyclesNodesComponent {
|
|
|
8853
8915
|
component.headerKeys.set(this.headerKeys());
|
|
8854
8916
|
}
|
|
8855
8917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-m-0\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @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\"></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 is-mt-2\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [cycle]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-m-0\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:106px;width:106px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class", "collapsedClass"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8857
8919
|
}
|
|
8858
8920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesNodesComponent, decorators: [{
|
|
8859
8921
|
type: Component$1,
|
|
@@ -8879,7 +8941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
8879
8941
|
KeyToLabelPipe,
|
|
8880
8942
|
PrecisionPipe,
|
|
8881
8943
|
PluralizePipe
|
|
8882
|
-
], template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-m-0\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
|
|
8944
|
+
], template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @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\"></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 is-mt-2\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [cycle]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-m-0\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:106px;width:106px}\n"] }]
|
|
8883
8945
|
}], 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 }] }] } });
|
|
8884
8946
|
|
|
8885
8947
|
class CyclesResultComponent {
|
|
@@ -9446,7 +9508,7 @@ class NodeCsvPreviewComponent {
|
|
|
9446
9508
|
? this.schemas()
|
|
9447
9509
|
? toCsvPivot(this.schemas(), this.nodes())
|
|
9448
9510
|
: ''
|
|
9449
|
-
: toCsv(this.nodes(), this.csvOptions()), ...(ngDevMode ? [{ debugName: "_csv" }] : []));
|
|
9511
|
+
: toCsv$1(this.nodes(), this.csvOptions()), ...(ngDevMode ? [{ debugName: "_csv" }] : []));
|
|
9450
9512
|
this.csv = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(this._csv())}`), ...(ngDevMode ? [{ debugName: "csv" }] : []));
|
|
9451
9513
|
this.parsedCsv = computed(() => parse(this._csv()).data, ...(ngDevMode ? [{ debugName: "parsedCsv" }] : []));
|
|
9452
9514
|
this.headers = computed(() => this.parsedCsv()[0], ...(ngDevMode ? [{ debugName: "headers" }] : []));
|
|
@@ -10651,7 +10713,7 @@ const customErrorMessage = {
|
|
|
10651
10713
|
Note: if the ${schemaLink('Cycle#startDate', 'Cycle startDate')} is not provided, the ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} can be used to set the earliest date of overlap.`,
|
|
10652
10714
|
'must be in the same format as endDate': () => `The date format does not match the format of ${code('endDate')}. You must use the same date format for both fields.`,
|
|
10653
10715
|
'must be at least equal to the minimum value': ({ params: { min } }) => `Must be at least equal to ${min}`,
|
|
10654
|
-
'must equal to endDate - startDate in days': ({ params: { expected } }) => `Must be equal to ${code('endDate')} - ${code('startDate')} in days (~${expected})`,
|
|
10716
|
+
'must equal to endDate - startDate in days': ({ params: { expected } }) => `Must be equal to ${code('endDate')} - ${code('startDate')} in days (inclusive of the ${code('startDate')} and ${code('endDate')} days) (~${expected})`,
|
|
10655
10717
|
'must equal to endDate - startDate in decimal years': ({ params: { expected } }) => `Must be equal to ${code('endDate')} - ${code('startDate')} in years (~${expected})`,
|
|
10656
10718
|
'must be more than or equal to other crop residues': ({ params: { expected } }) => `Must be more than or equal to sum(${expected.join(' + ')})`,
|
|
10657
10719
|
'should add missing inputs': ({ params: { expected } }) => `Should add missing inputs: ${listAsCode(expected)}`,
|
|
@@ -12007,7 +12069,7 @@ const valueToNodes = (value, type) => Array.isArray(value)
|
|
|
12007
12069
|
const nodesFromError = (error, type) => error ? valueToNodes(error.node, type) || valueToNodes(error.value, error.schema) || [] : [];
|
|
12008
12070
|
const errorCsv = nodes => {
|
|
12009
12071
|
try {
|
|
12010
|
-
return toCsv(nodes, { includeExising: true });
|
|
12072
|
+
return toCsv$1(nodes, { includeExising: true });
|
|
12011
12073
|
}
|
|
12012
12074
|
catch (_err) {
|
|
12013
12075
|
return '';
|
|
@@ -12704,8 +12766,30 @@ const showBar = (node) => [
|
|
|
12704
12766
|
!node.data.group,
|
|
12705
12767
|
!isNaN(node.data.fraction)
|
|
12706
12768
|
].every(Boolean);
|
|
12769
|
+
const extraInputKeys = ['input', 'input value'];
|
|
12770
|
+
const extraOperationKeys = ['operation', 'operation value'];
|
|
12771
|
+
const escape = (value) => (`${value}`.includes(',') ? `"${value}"` : value);
|
|
12772
|
+
const toLine = (values) => values.map(escape).join(',');
|
|
12773
|
+
const dataToCsv = (keys, terms) => (data) => [
|
|
12774
|
+
// line for the data
|
|
12775
|
+
toLine([
|
|
12776
|
+
...keys.map(k => terms[data[k]]?.name || data[k] || ''),
|
|
12777
|
+
...extraInputKeys.map(() => ''),
|
|
12778
|
+
...extraOperationKeys.map(() => '')
|
|
12779
|
+
]),
|
|
12780
|
+
// lines for each inputs and operations
|
|
12781
|
+
...(data.inputs ?? []).flatMap(input => [
|
|
12782
|
+
toLine([...keys.map(() => ''), input.label, input.weightedValue, ...extraOperationKeys.map(() => '')]),
|
|
12783
|
+
...(input.operations ?? []).map(operation => toLine([...keys.map(() => ''), ...extraInputKeys.map(() => ''), operation.label, operation.weightedValue]))
|
|
12784
|
+
])
|
|
12785
|
+
];
|
|
12786
|
+
const toCsv = (data, terms) => {
|
|
12787
|
+
const keys = Object.keys(data[0]).filter(k => k !== 'inputs');
|
|
12788
|
+
return [toLine([...keys, ...extraInputKeys, ...extraOperationKeys]), ...data.flatMap(dataToCsv(keys, terms))].join('\n');
|
|
12789
|
+
};
|
|
12707
12790
|
class HierarchyChartComponent {
|
|
12708
12791
|
constructor() {
|
|
12792
|
+
this.domSanitizer = inject(DomSanitizer);
|
|
12709
12793
|
this.chart = viewChild.required('chart');
|
|
12710
12794
|
this.zoomContainer = viewChild.required('zoomContainer');
|
|
12711
12795
|
this.chartContainer = viewChild.required('chartContainer');
|
|
@@ -12715,6 +12799,7 @@ class HierarchyChartComponent {
|
|
|
12715
12799
|
this.chartError = output();
|
|
12716
12800
|
this.nodeBorderColours = nodeBorderColours;
|
|
12717
12801
|
this.nodeColours = nodeColours;
|
|
12802
|
+
this.expandDownload = signal(false, ...(ngDevMode ? [{ debugName: "expandDownload" }] : []));
|
|
12718
12803
|
this.includedTypes = signal([], ...(ngDevMode ? [{ debugName: "includedTypes" }] : []));
|
|
12719
12804
|
this.legend = computed(() => legend.filter(({ type }) => this.includedTypes().includes(type)), ...(ngDevMode ? [{ debugName: "legend" }] : []));
|
|
12720
12805
|
this.totalsPerIndicator = computed(() => sumIndicators(this.data()), ...(ngDevMode ? [{ debugName: "totalsPerIndicator" }] : []));
|
|
@@ -12758,6 +12843,7 @@ class HierarchyChartComponent {
|
|
|
12758
12843
|
: null, ...(ngDevMode ? [{ debugName: "otherEndpoint" }] : []));
|
|
12759
12844
|
this.endpoints = computed(() => this.linkedIndicators().filter(indicator => indicator.type === ChartNodeType.endpoint), ...(ngDevMode ? [{ debugName: "endpoints" }] : []));
|
|
12760
12845
|
this.chartChildren = computed(() => this.endpoints().length ? [...this.endpoints(), this.otherEndpoint()].filter(Boolean) : this.linkedIndicators(), ...(ngDevMode ? [{ debugName: "chartChildren" }] : []));
|
|
12846
|
+
this.exportCSV = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.data(), this.terms()))}`), ...(ngDevMode ? [{ debugName: "exportCSV" }] : []));
|
|
12761
12847
|
effect(() => {
|
|
12762
12848
|
if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chart()?.nativeElement].every(Boolean)) {
|
|
12763
12849
|
this.init();
|
|
@@ -12982,12 +13068,15 @@ class HierarchyChartComponent {
|
|
|
12982
13068
|
downloadSvg() {
|
|
12983
13069
|
return downloadSvg(this.chart().nativeElement);
|
|
12984
13070
|
}
|
|
13071
|
+
downloadPng() {
|
|
13072
|
+
return downloadPng(this.chart().nativeElement);
|
|
13073
|
+
}
|
|
12985
13074
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute |
|
|
13075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | chart-controls\">\n <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n <button class=\"button is-small shadow-1\" (click)=\"zoomIn()\">\n <he-svg-icon name=\"plus\" size=\"20\" />\n </button>\n <button class=\"button is-small shadow-1\" (click)=\"zoomOut()\">\n <he-svg-icon name=\"minus\" size=\"20\" />\n </button>\n <div\n class=\"is-inline-flex is-justify-content-flex-end is-align-items-center is-gap-8 | download-button\"\n [class.is-expanded]=\"expandDownload()\">\n @if (expandDownload()) {\n <div class=\"is-flex is-flex-direction-column is-gap-4 is-justify-content-center is-align-items-flex-start\">\n <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadPng()\">\n <he-svg-icon name=\"image\" size=\"20\" />\n <span class=\"is-size-7\">Download Image (.png)</span>\n </a>\n\n <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadSvg()\">\n <he-svg-icon name=\"image\" size=\"20\" />\n <span class=\"is-size-7\">Download Image (.svg)</span>\n </a>\n\n <a\n class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\"\n [href]=\"exportCSV()\"\n download=\"chart.csv\">\n <he-svg-icon name=\"csv-file\" size=\"20\" />\n <span class=\"is-size-7\">Download Data (.csv)</span>\n </a>\n </div>\n }\n <button class=\"button is-small\" (click)=\"expandDownload.set(!expandDownload())\">\n <he-svg-icon name=\"download\" size=\"20\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{bottom:0;right:0}.chart-controls .button,.chart-controls .download-button.is-expanded{width:50px;height:50px;border-radius:90px;border:1px solid #dbe3ea;background:#f5f7f9}.chart-controls .download-button.is-expanded{width:auto;height:auto;padding-left:24px;padding-top:2px;padding-bottom:2px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
12987
13076
|
}
|
|
12988
13077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, decorators: [{
|
|
12989
13078
|
type: Component$1,
|
|
12990
|
-
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute |
|
|
13079
|
+
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | chart-controls\">\n <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n <button class=\"button is-small shadow-1\" (click)=\"zoomIn()\">\n <he-svg-icon name=\"plus\" size=\"20\" />\n </button>\n <button class=\"button is-small shadow-1\" (click)=\"zoomOut()\">\n <he-svg-icon name=\"minus\" size=\"20\" />\n </button>\n <div\n class=\"is-inline-flex is-justify-content-flex-end is-align-items-center is-gap-8 | download-button\"\n [class.is-expanded]=\"expandDownload()\">\n @if (expandDownload()) {\n <div class=\"is-flex is-flex-direction-column is-gap-4 is-justify-content-center is-align-items-flex-start\">\n <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadPng()\">\n <he-svg-icon name=\"image\" size=\"20\" />\n <span class=\"is-size-7\">Download Image (.png)</span>\n </a>\n\n <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadSvg()\">\n <he-svg-icon name=\"image\" size=\"20\" />\n <span class=\"is-size-7\">Download Image (.svg)</span>\n </a>\n\n <a\n class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\"\n [href]=\"exportCSV()\"\n download=\"chart.csv\">\n <he-svg-icon name=\"csv-file\" size=\"20\" />\n <span class=\"is-size-7\">Download Data (.csv)</span>\n </a>\n </div>\n }\n <button class=\"button is-small\" (click)=\"expandDownload.set(!expandDownload())\">\n <he-svg-icon name=\"download\" size=\"20\" />\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{bottom:0;right:0}.chart-controls .button,.chart-controls .download-button.is-expanded{width:50px;height:50px;border-radius:90px;border:1px solid #dbe3ea;background:#f5f7f9}.chart-controls .download-button.is-expanded{width:auto;height:auto;padding-left:24px;padding-top:2px;padding-bottom:2px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
|
|
12991
13080
|
}], ctorParameters: () => [], propDecorators: { chart: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], zoomContainer: [{ type: i0.ViewChild, args: ['zoomContainer', { isSignal: true }] }], chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
|
|
12992
13081
|
|
|
12993
13082
|
const filterTermTypes$1 = [
|
|
@@ -13331,7 +13420,7 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13331
13420
|
});
|
|
13332
13421
|
// auto-select first method
|
|
13333
13422
|
effect(() => {
|
|
13334
|
-
if (this.methods()?.length
|
|
13423
|
+
if (this.methods()?.length > 0 && !this.selectedMethodId()) {
|
|
13335
13424
|
this.selectedMethodId.set(this.methods()[0]['@id']);
|
|
13336
13425
|
}
|
|
13337
13426
|
});
|
|
@@ -13340,11 +13429,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13340
13429
|
return [blankNodeTermId, modelId, impactTermId].join('-');
|
|
13341
13430
|
}
|
|
13342
13431
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-mb-3\">\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @
|
|
13432
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-ghost is-p-2\"\n type=\"button\"\n aria-haspopup=\"true\"\n aria-controls=\"download-menu\"\n [ngbTooltip]=\"optionDd.isOpen() ? '' : 'Download'\"\n [disableTooltip]=\"optionDd.isOpen()\">\n <he-svg-icon name=\"download\" aria-hidden=\"true\" />\n </button>\n <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"chart.exportAsPng()\">\n <he-svg-icon size=\"20\" name=\"image\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.png)</span>\n </a>\n\n <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n <he-svg-icon size=\"20\" name=\"image\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n </a>\n\n <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n <he-svg-icon size=\"20\" name=\"table\" />\n <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n </a>\n </div>\n </div>\n </div>\n\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"is-flex is-justify-content-space-between\">\n <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n id=\"displayValue\"\n name=\"displayValue\"\n [(ngModel)]=\"displayValue\" />\n <label for=\"displayValue\">Show numerical value</label>\n </div>\n </div>\n </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n <div class=\"chart-area-border\">\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [max]=\"total()\"\n [maximumValues]=\"maximumValues()\"\n [showExportButton]=\"false\"\n [showNegativeValues]=\"false\"\n [tooltipFn]=\"chartTooltipFn\"\n [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13344
13433
|
}
|
|
13345
13434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
|
|
13346
13435
|
type: Component$1,
|
|
13347
|
-
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbDropdownModule, HorizontalBarChartComponent], template: "<div class=\"is-mb-3\">\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @
|
|
13436
|
+
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbDropdownModule, NgbTooltip, HorizontalBarChartComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"button is-small is-ghost is-p-2\"\n type=\"button\"\n aria-haspopup=\"true\"\n aria-controls=\"download-menu\"\n [ngbTooltip]=\"optionDd.isOpen() ? '' : 'Download'\"\n [disableTooltip]=\"optionDd.isOpen()\">\n <he-svg-icon name=\"download\" aria-hidden=\"true\" />\n </button>\n <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"chart.exportAsPng()\">\n <he-svg-icon size=\"20\" name=\"image\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.png)</span>\n </a>\n\n <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n <he-svg-icon size=\"20\" name=\"image\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n </a>\n\n <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n <he-svg-icon size=\"20\" name=\"table\" />\n <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n </a>\n </div>\n </div>\n </div>\n\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded is-flex-shrink-0\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @for (term of methods(); track term['@id']) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"is-flex is-justify-content-space-between\">\n <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n id=\"displayValue\"\n name=\"displayValue\"\n [(ngModel)]=\"displayValue\" />\n <label for=\"displayValue\">Show numerical value</label>\n </div>\n </div>\n </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n <div class=\"chart-area-border\">\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [max]=\"total()\"\n [maximumValues]=\"maximumValues()\"\n [showExportButton]=\"false\"\n [showNegativeValues]=\"false\"\n [tooltipFn]=\"chartTooltipFn\"\n [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
|
|
13348
13437
|
}], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }] } });
|
|
13349
13438
|
|
|
13350
13439
|
const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
|
|
@@ -13383,11 +13472,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
|
|
|
13383
13472
|
this.selectedTerm.set(term);
|
|
13384
13473
|
}
|
|
13385
13474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13386
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}
|
|
13475
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13387
13476
|
}
|
|
13388
13477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
|
|
13389
13478
|
type: Component$1,
|
|
13390
|
-
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}
|
|
13479
|
+
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<he-horizontal-bar-chart\n #chart=\"horizontalBarChart\"\n class=\"is-relative h-100\"\n [title]=\"selectedTerm()?.units\"\n [data]=\"chartData()\"\n [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"] }]
|
|
13391
13480
|
}], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
|
|
13392
13481
|
|
|
13393
13482
|
var View$1;
|
|
@@ -13468,6 +13557,9 @@ class ImpactAssessmentsProductsComponent {
|
|
|
13468
13557
|
dataState: DataState.recalculated
|
|
13469
13558
|
}
|
|
13470
13559
|
: null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
|
|
13560
|
+
this.selectedCycle = computed(() => this.selectedImpactAssessment()
|
|
13561
|
+
? this.cycles().find(cycle => cycle['@id'] === this.selectedImpactAssessment()?.cycle?.['@id'])
|
|
13562
|
+
: null, ...(ngDevMode ? [{ debugName: "selectedCycle" }] : []));
|
|
13471
13563
|
this.showSelectImpact = computed(() => [View$1.breakdown, View$1.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectImpact" }] : []));
|
|
13472
13564
|
this.isOriginal = computed(() => this.dataState() === DataState.original, ...(ngDevMode ? [{ debugName: "isOriginal" }] : []));
|
|
13473
13565
|
this.isNodeKeyAllowed = computed(() => nodeKeyViews$1[this.nodeKey()].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "isNodeKeyAllowed" }] : []));
|
|
@@ -13528,7 +13620,7 @@ class ImpactAssessmentsProductsComponent {
|
|
|
13528
13620
|
component.headerKeys.set(this.headerKeys());
|
|
13529
13621
|
}
|
|
13530
13622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13531
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n <div class=\"is-hidden-mobile\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @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\"></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 is-mt-2\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [cycle]=\"selectedCycle()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class", "collapsedClass"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13532
13624
|
}
|
|
13533
13625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
|
|
13534
13626
|
type: Component$1,
|
|
@@ -13552,7 +13644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
13552
13644
|
EllipsisPipe,
|
|
13553
13645
|
PrecisionPipe,
|
|
13554
13646
|
KeyToLabelPipe
|
|
13555
|
-
], template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n <div class=\"is-hidden-mobile\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
|
|
13647
|
+
], template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @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\"></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 is-mt-2\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [cycle]=\"selectedCycle()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
|
|
13556
13648
|
}], 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 }] }] } });
|
|
13557
13649
|
|
|
13558
13650
|
const hasValidationError = (errors = [], level) => {
|
|
@@ -13865,13 +13957,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
13865
13957
|
], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n @if (showHeader()) {\n <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n @if (title()) {\n <div class=\"is-flex is-align-items-center\">\n <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"right\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n }\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n [class.is-clickable]=\"hasSelectedValues()\"\n (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\"\n (input)=\"onSearch($event.target.value, group())\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"has-border-top has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n \" />\n </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n @if (groupState.expanded) {\n <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ item.label }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: {\n group: item,\n parentSearch: parentSearch || groupState.searchTerm,\n showNoResults: !showGlobalSearch()\n }\n \" />\n </div>\n </div>\n }\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch && showNoResults) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n @let options = optionsFromGroup(item);\n\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isGroupFullySelected(options)\"\n [indeterminate]=\"isGroupPartiallySelected(options)\"\n (change)=\"toggleGroup(options)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
|
|
13866
13958
|
}], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
|
|
13867
13959
|
|
|
13960
|
+
const termTypeName = ({ termType, blankNodesGroup }) => [keyToLabel(termType), blankNodesGroup && blankNodesGroup !== 'null' ? blankNodesGroup : '']
|
|
13961
|
+
.filter(Boolean)
|
|
13962
|
+
.join(' - ');
|
|
13963
|
+
const termTypeId = ({ termType, blankNodesGroup }) => [termType, blankNodesGroup].filter(Boolean).join('-');
|
|
13868
13964
|
const sortedPoints = (values) => Object.entries(values)
|
|
13869
13965
|
.map(([x, y]) => ({ x: new Date(x).getTime(), y }))
|
|
13870
13966
|
.sort((a, b) => a.x - b.x);
|
|
13967
|
+
const mapCyclesDate = (cycles, key) => cycles.map(cycle => (cycle[key] ? new Date(cycle[key]).getTime() : 0)).filter(v => v > 0);
|
|
13968
|
+
const mapCyclesDates = (cycles) => ['startDate', 'endDate']
|
|
13969
|
+
.map(key => {
|
|
13970
|
+
const dates = mapCyclesDate(cycles, key);
|
|
13971
|
+
return { key, date: dates.length ? (key === 'startDate' ? min(dates) : max(dates)) : null };
|
|
13972
|
+
})
|
|
13973
|
+
.filter(({ date }) => date !== null);
|
|
13974
|
+
const termColor = (term) => siteTypeToColor[term.name.toLowerCase()] ||
|
|
13975
|
+
siteTypeToColor[term['@id']] ||
|
|
13976
|
+
{
|
|
13977
|
+
'Annual cropland': '#fdd866',
|
|
13978
|
+
'Temporary cropland': '#1d586f',
|
|
13979
|
+
'Permanent cropland': siteTypeToColor[SiteSiteType.cropland],
|
|
13980
|
+
'Other land': siteTypeToColor[SiteSiteType['other natural vegetation']]
|
|
13981
|
+
}[term.name];
|
|
13871
13982
|
class SitesManagementChartComponent {
|
|
13872
13983
|
constructor() {
|
|
13873
13984
|
this.nodeService = inject(HeNodeService);
|
|
13985
|
+
this.locale = inject(LOCALE_ID);
|
|
13874
13986
|
this.site = input.required(...(ngDevMode ? [{ debugName: "site" }] : []));
|
|
13987
|
+
this.cycles = input([], ...(ngDevMode ? [{ debugName: "cycles" }] : []));
|
|
13988
|
+
this.tooltip = viewChild.required(ChartTooltipComponent);
|
|
13875
13989
|
this.management = computed(() => this.site().management ?? [], ...(ngDevMode ? [{ debugName: "management" }] : []));
|
|
13876
13990
|
this.propertyLookupsResource = rxResource({
|
|
13877
13991
|
stream: () => this.nodeService.downloadRaw$(lookupUrl(TermTermType.property).replace('.csv', '.json'))
|
|
@@ -13889,28 +14003,31 @@ class SitesManagementChartComponent {
|
|
|
13889
14003
|
termType,
|
|
13890
14004
|
blankNodesGroup
|
|
13891
14005
|
}))), ...(ngDevMode ? [{ debugName: "termTypes" }] : []));
|
|
13892
|
-
this.termTypeButtons = computed(() => this.termTypes().map(
|
|
13893
|
-
name:
|
|
13894
|
-
|
|
13895
|
-
.join(' - '),
|
|
13896
|
-
id: termType
|
|
14006
|
+
this.termTypeButtons = computed(() => this.termTypes().map(termType => ({
|
|
14007
|
+
name: termTypeName(termType),
|
|
14008
|
+
id: termTypeId(termType)
|
|
13897
14009
|
})), ...(ngDevMode ? [{ debugName: "termTypeButtons" }] : []));
|
|
13898
14010
|
this.termTypeModel = signal('', ...(ngDevMode ? [{ debugName: "termTypeModel" }] : []));
|
|
13899
|
-
this.selectedTermType = computed(() =>
|
|
14011
|
+
this.selectedTermType = computed(() => {
|
|
14012
|
+
const [termType, blankNodesGroup] = this.termTypeModel().split('-');
|
|
14013
|
+
return this.termTypes().find(value => value.termType === termType && value.blankNodesGroup === blankNodesGroup);
|
|
14014
|
+
}, ...(ngDevMode ? [{ debugName: "selectedTermType" }] : []));
|
|
13900
14015
|
this.selectedManagement = computed(() => this.managementPerTermType()?.[this.selectedTermType()?.termType]?.[this.selectedTermType()?.blankNodesGroup] ??
|
|
13901
14016
|
[], ...(ngDevMode ? [{ debugName: "selectedManagement" }] : []));
|
|
13902
14017
|
this.selectedManagementTerms = computed(() => unique(this.selectedManagement().map(v => v.term)), ...(ngDevMode ? [{ debugName: "selectedManagementTerms" }] : []));
|
|
13903
14018
|
this.dates = computed(() => this.selectedManagement()
|
|
13904
14019
|
.flatMap(({ startDate, endDate }) => [formatDate(startDate, true), formatDate(endDate, false)])
|
|
13905
14020
|
.filter(Boolean), ...(ngDevMode ? [{ debugName: "dates" }] : []));
|
|
13906
|
-
this.
|
|
14021
|
+
this.cycleDates = computed(() => mapCyclesDates(this.cycles()), ...(ngDevMode ? [{ debugName: "cycleDates" }] : []));
|
|
14022
|
+
this.chartTooltipFn = ({ key, date }) => `<span class="is-nowrap">${keyToLabel(key)}: ${formatDate$1(date, 'mediumDate', this.locale)}</span>`;
|
|
14023
|
+
this.chartColors = computed(() => Object.fromEntries(this.selectedManagementTerms().map((term, index) => [term.name, termColor(term) || getColor(index)])), ...(ngDevMode ? [{ debugName: "chartColors" }] : []));
|
|
13907
14024
|
// compute list of all dates used on the chart, sorted ascending.
|
|
13908
14025
|
// need to add dates even when there are no data, otherwise the chart will stack wrongly
|
|
13909
14026
|
// @ee https://github.com/chartjs/Chart.js/issues/5405
|
|
13910
14027
|
this.chartDates = computed(() => uniqueDatesBetween(this.dates()), ...(ngDevMode ? [{ debugName: "chartDates" }] : []));
|
|
13911
14028
|
this.chartValues = computed(() => this.selectedManagement().reduce((prev, { term, startDate, endDate, value }) => {
|
|
13912
14029
|
prev[term.name] = this.chartDates().reduce((group, date) => {
|
|
13913
|
-
const key = date.toISOString();
|
|
14030
|
+
const key = new Date(date).toISOString();
|
|
13914
14031
|
group[key] = (group[key] || 0) + (isDateBetween(date, { start: startDate, end: endDate }) ? +value : 0);
|
|
13915
14032
|
return group;
|
|
13916
14033
|
}, prev[term.name] || {});
|
|
@@ -13920,15 +14037,40 @@ class SitesManagementChartComponent {
|
|
|
13920
14037
|
datasets: Object.entries(this.chartValues()).map(([label, data]) => ({
|
|
13921
14038
|
label,
|
|
13922
14039
|
data: sortedPoints(data),
|
|
13923
|
-
backgroundColor: this.chartColors()[label],
|
|
13924
|
-
borderColor: this.chartColors()[label],
|
|
14040
|
+
backgroundColor: context => (context.raw.y === 0 ? 'transparent' : this.chartColors()[label]),
|
|
13925
14041
|
barPercentage: 3,
|
|
13926
|
-
barThickness: 'flex'
|
|
14042
|
+
barThickness: 'flex',
|
|
14043
|
+
order: 2
|
|
13927
14044
|
}))
|
|
13928
14045
|
}), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
|
|
13929
|
-
this.chartConfig = {
|
|
14046
|
+
this.chartConfig = computed(() => ({
|
|
13930
14047
|
type: 'bar',
|
|
13931
14048
|
options: {
|
|
14049
|
+
plugins: {
|
|
14050
|
+
annotation: {
|
|
14051
|
+
annotations: this.cycleDates().map(({ key, date }) => ({
|
|
14052
|
+
type: 'box',
|
|
14053
|
+
xMin: date,
|
|
14054
|
+
xMax: date,
|
|
14055
|
+
yMin: 'min',
|
|
14056
|
+
yMax: 'max',
|
|
14057
|
+
borderWidth: 2,
|
|
14058
|
+
borderDash: [6, 6],
|
|
14059
|
+
borderColor: 'red',
|
|
14060
|
+
backgroundColor: 'transparent',
|
|
14061
|
+
enter: (context, event) => {
|
|
14062
|
+
context.chart.canvas.style.cursor = 'pointer';
|
|
14063
|
+
this.tooltip().show({ key, date }, event.x, event.y);
|
|
14064
|
+
context.chart.update();
|
|
14065
|
+
},
|
|
14066
|
+
leave: context => {
|
|
14067
|
+
context.chart.canvas.style.cursor = 'default';
|
|
14068
|
+
this.tooltip().hide();
|
|
14069
|
+
context.chart.update();
|
|
14070
|
+
}
|
|
14071
|
+
}))
|
|
14072
|
+
}
|
|
14073
|
+
},
|
|
13932
14074
|
scales: {
|
|
13933
14075
|
x: {
|
|
13934
14076
|
type: 'time',
|
|
@@ -13944,23 +14086,30 @@ class SitesManagementChartComponent {
|
|
|
13944
14086
|
}
|
|
13945
14087
|
}
|
|
13946
14088
|
}
|
|
13947
|
-
};
|
|
14089
|
+
}), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
|
|
13948
14090
|
effect(() => {
|
|
13949
14091
|
// make sure selected term exists
|
|
13950
14092
|
const termTypes = this.termTypes();
|
|
13951
14093
|
const selectedTermType = this.selectedTermType();
|
|
13952
14094
|
if (!selectedTermType || !termTypes.includes(selectedTermType)) {
|
|
13953
|
-
this.termTypeModel.set(termTypes[0]
|
|
14095
|
+
this.termTypeModel.set(termTypeId(termTypes[0]));
|
|
13954
14096
|
}
|
|
13955
14097
|
});
|
|
13956
14098
|
}
|
|
13957
14099
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13958
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" />\n\n <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n <he-horizontal-buttons-group\n [buttons]=\"termTypeButtons()\"\n [(ngModel)]=\"termTypeModel\"\n styles=\"primary\"\n class=\"is-hidden-mobile\" />\n\n <div class=\"field is-hidden-tablet\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n @for (button of termTypeButtons(); track button.id) {\n <option [value]=\"button.id\">{{ button.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" [showExportButton]=\"false\" />\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["itemRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null }, cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" />\n\n <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n <he-horizontal-buttons-group\n [buttons]=\"termTypeButtons()\"\n [(ngModel)]=\"termTypeModel\"\n styles=\"primary\"\n class=\"is-hidden-mobile\" />\n\n <div class=\"field is-hidden-tablet\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n @for (button of termTypeButtons(); track button.id) {\n <option [value]=\"button.id\">{{ button.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n </he-chart>\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n @if (cycleDates().length) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color-dashed\"></div>\n <span class=\"is-size-7\">Cycle start/end date</span>\n </div>\n }\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["itemRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13959
14101
|
}
|
|
13960
14102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
|
|
13961
14103
|
type: Component$1,
|
|
13962
|
-
args: [{ selector: 'he-sites-management-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
13963
|
-
|
|
14104
|
+
args: [{ selector: 'he-sites-management-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
14105
|
+
FormsModule,
|
|
14106
|
+
KeyValuePipe,
|
|
14107
|
+
ChartComponent,
|
|
14108
|
+
ChartExportButtonComponent,
|
|
14109
|
+
ChartTooltipComponent,
|
|
14110
|
+
HorizontalButtonsGroupComponent
|
|
14111
|
+
], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" />\n\n <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n <he-horizontal-buttons-group\n [buttons]=\"termTypeButtons()\"\n [(ngModel)]=\"termTypeModel\"\n styles=\"primary\"\n class=\"is-hidden-mobile\" />\n\n <div class=\"field is-hidden-tablet\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n @for (button of termTypeButtons(); track button.id) {\n <option [value]=\"button.id\">{{ button.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n </he-chart>\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n @if (cycleDates().length) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color-dashed\"></div>\n <span class=\"is-size-7\">Cycle start/end date</span>\n </div>\n }\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"] }]
|
|
14112
|
+
}], ctorParameters: () => [], propDecorators: { site: [{ type: i0.Input, args: [{ isSignal: true, alias: "site", required: true }] }], cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: false }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
|
|
13964
14113
|
|
|
13965
14114
|
var View;
|
|
13966
14115
|
(function (View) {
|
|
@@ -14006,6 +14155,7 @@ class SitesNodesComponent {
|
|
|
14006
14155
|
this.selectedView = signal(View.table, ...(ngDevMode ? [{ debugName: "selectedView" }] : []));
|
|
14007
14156
|
this.originalSites = computed(() => this.nodeStoreService.findByState(NodeType.Site, DataState.original), ...(ngDevMode ? [{ debugName: "originalSites" }] : []));
|
|
14008
14157
|
this.sites = computed(() => this.nodeStoreService.findByState(NodeType.Site, this.dataState()), ...(ngDevMode ? [{ debugName: "sites" }] : []));
|
|
14158
|
+
this.cycles = computed(() => this.nodeStoreService.findByState(NodeType.Cycle, DataState.recalculated), ...(ngDevMode ? [{ debugName: "cycles" }] : []));
|
|
14009
14159
|
this.showSelectSite = computed(() => [View.chart, View.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectSite" }] : []));
|
|
14010
14160
|
this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
14011
14161
|
this.ogirinalSelectedSite = computed(() => this.originalSites()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedSite" }] : []));
|
|
@@ -14056,7 +14206,7 @@ class SitesNodesComponent {
|
|
|
14056
14206
|
component.headerKeys.set(this.headerKeys());
|
|
14057
14207
|
}
|
|
14058
14208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14059
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n <he-node-link [node]=\"site\">\n <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n </he-node-link>\n </td>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n @let siteData = node.value.values[site['@id']];\n <td class=\"is-nowrap\">\n @if (siteData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: siteData, site }\">\n <span pointer>\n {{ siteData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"siteData.node\"\n key=\"value\" />\n </span>\n }\n @if (isMeasurement() && !siteData) {\n <span>\n <span>-</span>\n @if (siteTooBig(site)) {\n <sup class=\"pl-1\">(1)</sup>\n }\n </span>\n }\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n @if (selectedNode()) {\n <he-sites-management-chart [site]=\"selectedNode()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-sites-management-chart>\n }\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectSite()) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
|
|
14209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track 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 is-mt-2\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n @if (selectedNode()) {\n <he-sites-management-chart [site]=\"selectedNode()\" [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-sites-management-chart>\n }\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectSite()) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class", "collapsedClass"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage", "cycle"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site", "cycles"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
|
|
14060
14210
|
}
|
|
14061
14211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesNodesComponent, decorators: [{
|
|
14062
14212
|
type: Component$1,
|
|
@@ -14079,7 +14229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
14079
14229
|
PrecisionPipe,
|
|
14080
14230
|
CapitalizePipe,
|
|
14081
14231
|
SitesManagementChartComponent
|
|
14082
|
-
], 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-
|
|
14232
|
+
], template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track 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 is-mt-2\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n @if (selectedNode()) {\n <he-sites-management-chart [site]=\"selectedNode()\" [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-sites-management-chart>\n }\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (selectedView() === View.table) {\n @if (hasData()) {\n <button class=\"button is-small is-ghost is-p-2\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n <he-search-extend\n class=\"is-secondary\"\n collapsedClass=\"is-p-2\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n } @else if (showSelectSite()) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n }\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
14083
14233
|
}], 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 }] }] } });
|
|
14084
14234
|
|
|
14085
14235
|
class TermsPropertyContentComponent {
|
|
@@ -14094,7 +14244,7 @@ class TermsPropertyContentComponent {
|
|
|
14094
14244
|
return keys.includes(key);
|
|
14095
14245
|
}
|
|
14096
14246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TermsPropertyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TermsPropertyContentComponent, isStandalone: true, selector: "he-terms-property-content", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, showTermName: { classPropertyName: "showTermName", publicName: "showTermName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().term) {\n @if (showTermName()) {\n <a class=\"pr-2\" [routerLink]=\"['/', 'term', property().term['@id']]\" target=\"_blank\">\n <b>{{ property().term.name }}:</b>\n </a>\n }\n @if (property().key?.name) {\n <span class=\"pr-1\">\n <span>{{ property().key.name }}</span>\n @if (hasKey('value')) {\n ,\n <span class=\"has-text-underline\">value</span>\n :\n }\n </span>\n }\n @if (hasKey('value')) {\n <ng-container\n *ngTemplateOutlet=\"\n property().value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n context: { $implicit: property().value }\n \" />\n @if (hasKey('sd')) {\n <span class=\"px-2\">\u00B1</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().sd }\" />\n }\n @if (hasKey('min') && hasKey('max')) {\n <span class=\"is-pl-2\">(</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().min }\" />\n <span class=\"is-px-2\">-</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().max }\" />\n <span>)</span>\n }\n }\n @if (property().term.units) {\n <span class=\"is-ml-1\" [innerHtml]=\"property().term.units | compound
|
|
14247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TermsPropertyContentComponent, isStandalone: true, selector: "he-terms-property-content", inputs: { property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: true, transformFunction: null }, showTermName: { classPropertyName: "showTermName", publicName: "showTermName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (property().term) {\n @if (showTermName()) {\n <a class=\"pr-2\" [routerLink]=\"['/', 'term', property().term['@id']]\" target=\"_blank\">\n <b>{{ property().term.name }}:</b>\n </a>\n }\n @if (property().key?.name) {\n <span class=\"pr-1\">\n <span>{{ property().key.name }}</span>\n @if (hasKey('value')) {\n ,\n <span class=\"has-text-underline\">value</span>\n :\n }\n </span>\n }\n @if (hasKey('value')) {\n <ng-container\n *ngTemplateOutlet=\"\n property().value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n context: { $implicit: property().value }\n \" />\n @if (hasKey('sd')) {\n <span class=\"px-2\">\u00B1</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().sd }\" />\n }\n @if (hasKey('min') && hasKey('max')) {\n <span class=\"is-pl-2\">(</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().min }\" />\n <span class=\"is-px-2\">-</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().max }\" />\n <span>)</span>\n }\n }\n @if (property().term.units) {\n <span class=\"is-ml-1\" [innerHtml]=\"property().term.units | compound\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"property().term\" />\n }\n @if (hasKey('source')) {\n <span class=\"is-px-1\">(Source:</span>\n <markdown class=\"is-inline-block\" [data]=\"property().source\" />\n <span>)</span>\n }\n}\n\n<ng-template #defaultValue let-value>\n @if (isEmpty(value)) {\n <span>{{ 'N/A' }}</span>\n } @else {\n @if (isNumber(value)) {\n <span>{{ value | precision: 3 }}</span>\n } @else {\n <span>{{ value }}</span>\n }\n }\n</ng-template>\n\n<ng-template #externalLink let-value>\n <a [href]=\"value\" target=\"_blank\">\n <span>{{ value }}</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n</ng-template>\n", styles: ["markdown ::ng-deep *{display:inline-block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14098
14248
|
}
|
|
14099
14249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TermsPropertyContentComponent, decorators: [{
|
|
14100
14250
|
type: Component$1,
|
|
@@ -14106,7 +14256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
14106
14256
|
CompoundPipe,
|
|
14107
14257
|
PrecisionPipe,
|
|
14108
14258
|
HESvgIconComponent
|
|
14109
|
-
], template: "@if (property().term) {\n @if (showTermName()) {\n <a class=\"pr-2\" [routerLink]=\"['/', 'term', property().term['@id']]\" target=\"_blank\">\n <b>{{ property().term.name }}:</b>\n </a>\n }\n @if (property().key?.name) {\n <span class=\"pr-1\">\n <span>{{ property().key.name }}</span>\n @if (hasKey('value')) {\n ,\n <span class=\"has-text-underline\">value</span>\n :\n }\n </span>\n }\n @if (hasKey('value')) {\n <ng-container\n *ngTemplateOutlet=\"\n property().value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n context: { $implicit: property().value }\n \" />\n @if (hasKey('sd')) {\n <span class=\"px-2\">\u00B1</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().sd }\" />\n }\n @if (hasKey('min') && hasKey('max')) {\n <span class=\"is-pl-2\">(</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().min }\" />\n <span class=\"is-px-2\">-</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().max }\" />\n <span>)</span>\n }\n }\n @if (property().term.units) {\n <span class=\"is-ml-1\" [innerHtml]=\"property().term.units | compound
|
|
14259
|
+
], template: "@if (property().term) {\n @if (showTermName()) {\n <a class=\"pr-2\" [routerLink]=\"['/', 'term', property().term['@id']]\" target=\"_blank\">\n <b>{{ property().term.name }}:</b>\n </a>\n }\n @if (property().key?.name) {\n <span class=\"pr-1\">\n <span>{{ property().key.name }}</span>\n @if (hasKey('value')) {\n ,\n <span class=\"has-text-underline\">value</span>\n :\n }\n </span>\n }\n @if (hasKey('value')) {\n <ng-container\n *ngTemplateOutlet=\"\n property().value.toString().indexOf('http') === 0 ? externalLink : defaultValue;\n context: { $implicit: property().value }\n \" />\n @if (hasKey('sd')) {\n <span class=\"px-2\">\u00B1</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().sd }\" />\n }\n @if (hasKey('min') && hasKey('max')) {\n <span class=\"is-pl-2\">(</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().min }\" />\n <span class=\"is-px-2\">-</span>\n <ng-container *ngTemplateOutlet=\"defaultValue; context: { $implicit: property().max }\" />\n <span>)</span>\n }\n }\n @if (property().term.units) {\n <span class=\"is-ml-1\" [innerHtml]=\"property().term.units | compound\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"property().term\" />\n }\n @if (hasKey('source')) {\n <span class=\"is-px-1\">(Source:</span>\n <markdown class=\"is-inline-block\" [data]=\"property().source\" />\n <span>)</span>\n }\n}\n\n<ng-template #defaultValue let-value>\n @if (isEmpty(value)) {\n <span>{{ 'N/A' }}</span>\n } @else {\n @if (isNumber(value)) {\n <span>{{ value | precision: 3 }}</span>\n } @else {\n <span>{{ value }}</span>\n }\n }\n</ng-template>\n\n<ng-template #externalLink let-value>\n <a [href]=\"value\" target=\"_blank\">\n <span>{{ value }}</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n</ng-template>\n", styles: ["markdown ::ng-deep *{display:inline-block}\n"] }]
|
|
14110
14260
|
}], propDecorators: { property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: true }] }], showTermName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTermName", required: false }] }] } });
|
|
14111
14261
|
|
|
14112
14262
|
class TermsSubClassOfContentComponent {
|
|
@@ -14142,5 +14292,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
14142
14292
|
* Generated bundle index. Do not edit.
|
|
14143
14293
|
*/
|
|
14144
14294
|
|
|
14145
|
-
export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
|
|
14295
|
+
export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
|
|
14146
14296
|
//# sourceMappingURL=hestia-earth-ui-components.mjs.map
|