@hestia-earth/ui-components 0.36.21 → 0.36.22
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,5 +1,5 @@
|
|
|
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, NgZone, ElementRef, Input, Directive, Pipe, DestroyRef,
|
|
2
|
+
import { Injectable, InjectionToken, inject, input, computed, HostBinding, Component as Component$1, model, output, signal, effect, ChangeDetectionStrategy, NgZone, ElementRef, Input, Directive, viewChild, Pipe, DestroyRef, HostListener, ViewEncapsulation, EventEmitter as EventEmitter$1, Output, ContentChild, ViewChild, viewChildren, forwardRef } 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';
|
|
@@ -56,6 +56,7 @@ import { linkHorizontal } from 'd3-shape';
|
|
|
56
56
|
import 'd3-transition';
|
|
57
57
|
import { hierarchy, tree } from 'd3-hierarchy';
|
|
58
58
|
import { easeElasticIn, easeElasticOut } from 'd3-ease';
|
|
59
|
+
import { zoom, zoomIdentity } from 'd3-zoom';
|
|
59
60
|
import { ComponentStore } from '@ngrx/component-store';
|
|
60
61
|
|
|
61
62
|
class HeAuthService {
|
|
@@ -1265,6 +1266,7 @@ class ChartComponent {
|
|
|
1265
1266
|
constructor() {
|
|
1266
1267
|
this.data = input({}, ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
1267
1268
|
this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1269
|
+
this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
|
|
1268
1270
|
this.configuration = computed(() => ({
|
|
1269
1271
|
...merge({}, defaultSettings$3, this.config()),
|
|
1270
1272
|
data: this.data()
|
|
@@ -1279,12 +1281,12 @@ class ChartComponent {
|
|
|
1279
1281
|
});
|
|
1280
1282
|
}
|
|
1281
1283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1282
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, 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 <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download Chart (SVG)\" placement=\"top\">\n <he-svg-icon name=\"download\" />\n </a>\n }\n\n <ng-content />\n\n <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1283
1285
|
}
|
|
1284
1286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ChartComponent, decorators: [{
|
|
1285
1287
|
type: Component$1,
|
|
1286
|
-
args: [{ selector: 'he-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, HESvgIconComponent, NgbTooltip], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download (SVG)\" placement=\"top\">\n
|
|
1287
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
1288
|
+
args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, HESvgIconComponent, NgbTooltip], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n @if (showExportButton()) {\n <a class=\"is-absolute | download\" (click)=\"exportAsSvg()\" ngbTooltip=\"Download Chart (SVG)\" placement=\"top\">\n <he-svg-icon name=\"download\" />\n </a>\n }\n\n <ng-content />\n\n <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
|
|
1289
|
+
}], 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 }] }] } });
|
|
1288
1290
|
|
|
1289
1291
|
const defaultSettings$2 = Object.freeze({
|
|
1290
1292
|
type: 'horizontalBar',
|
|
@@ -1349,6 +1351,8 @@ class BarChartComponent {
|
|
|
1349
1351
|
this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
|
|
1350
1352
|
this.labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
|
|
1351
1353
|
this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1354
|
+
this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
|
|
1355
|
+
this.chart = viewChild.required(ChartComponent);
|
|
1352
1356
|
this.defaultConfig = computed(() => ({
|
|
1353
1357
|
options: {
|
|
1354
1358
|
legend: {
|
|
@@ -1382,13 +1386,16 @@ class BarChartComponent {
|
|
|
1382
1386
|
}), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
|
|
1383
1387
|
this.configuration = computed(() => merge({}, defaultSettings$2, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
|
|
1384
1388
|
}
|
|
1389
|
+
exportAsSvg(config = {}) {
|
|
1390
|
+
return this.chart().exportAsSvg(config);
|
|
1391
|
+
}
|
|
1385
1392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1386
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: BarChartComponent, isStandalone: true, selector: "he-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", 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 }, 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 } }, 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", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1387
1394
|
}
|
|
1388
1395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
1389
1396
|
type: Component$1,
|
|
1390
|
-
args: [{ selector: 'he-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\">\n <ng-content />\n</he-chart>\n", styles: [":host{display:block}\n"] }]
|
|
1391
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
1397
|
+
args: [{ selector: 'he-bar-chart', exportAs: 'barChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\">\n <ng-content />\n</he-chart>\n", styles: [":host{display:block}\n"] }]
|
|
1398
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", 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 }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
|
|
1392
1399
|
|
|
1393
1400
|
const parsePrecision = (value, precision) => toPrecision(parseFloat(`${value}`), parseInt(`${precision}`, 10));
|
|
1394
1401
|
const transform = (value, precision = 3, enableComma = true) => typeof value !== 'boolean' && !isUndefined(value) && isNumber(value)
|
|
@@ -1608,7 +1615,7 @@ class DistributionChartComponent {
|
|
|
1608
1615
|
this.configuration = computed(() => merge({}, defaultSettings$1, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
|
|
1609
1616
|
}
|
|
1610
1617
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DistributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1611
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, maxPercentile: { classPropertyName: "maxPercentile", publicName: "maxPercentile", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1618
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, maxPercentile: { classPropertyName: "maxPercentile", publicName: "maxPercentile", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1612
1619
|
}
|
|
1613
1620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DistributionChartComponent, decorators: [{
|
|
1614
1621
|
type: Component$1,
|
|
@@ -1634,18 +1641,23 @@ class LineChartComponent {
|
|
|
1634
1641
|
constructor() {
|
|
1635
1642
|
this.datasets = input([], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
|
|
1636
1643
|
this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1644
|
+
this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
|
|
1645
|
+
this.chart = viewChild.required(ChartComponent);
|
|
1637
1646
|
this.dataConfig = computed(() => ({
|
|
1638
1647
|
datasets: this.datasets()
|
|
1639
1648
|
}), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
|
|
1640
1649
|
this.configuration = computed(() => merge({}, defaultSettings, this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
|
|
1641
1650
|
}
|
|
1651
|
+
exportAsSvg(config = {}) {
|
|
1652
|
+
return this.chart().exportAsSvg(config);
|
|
1653
|
+
}
|
|
1642
1654
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
1655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: LineChartComponent, isStandalone: true, selector: "he-line-chart", inputs: { datasets: { classPropertyName: "datasets", publicName: "datasets", 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: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }], exportAs: ["lineChart"], ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1644
1656
|
}
|
|
1645
1657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
1646
1658
|
type: Component$1,
|
|
1647
|
-
args: [{ selector: 'he-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
|
|
1648
|
-
}], propDecorators: { datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
|
|
1659
|
+
args: [{ selector: 'he-line-chart', exportAs: 'lineChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" [showExportButton]=\"showExportButton()\" />\n", styles: [":host{display:block}\n"] }]
|
|
1660
|
+
}], propDecorators: { datasets: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasets", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }] } });
|
|
1649
1661
|
|
|
1650
1662
|
const ignoreCompounds = (value) => typeof value !== 'string' ||
|
|
1651
1663
|
[
|
|
@@ -2997,14 +3009,14 @@ class DataTableComponent {
|
|
|
2997
3009
|
});
|
|
2998
3010
|
}
|
|
2999
3011
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3000
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DataTableComponent, isStandalone: true, selector: "he-data-table", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "resized": "onResized($event)" }, properties: { "class.is-small": "this.isSmall" } }, ngImport: i0, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:160px;max-width:160px;width:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:160px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3012
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: DataTableComponent, isStandalone: true, selector: "he-data-table", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "resized": "onResized($event)" }, properties: { "class.is-small": "this.isSmall" } }, ngImport: i0, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:120px;max-width:120px;width:120px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:120px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3001
3013
|
}
|
|
3002
3014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
3003
3015
|
type: Component$1,
|
|
3004
3016
|
args: [{ selector: 'he-data-table', imports: [ResizedDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3005
3017
|
'[class.is-small]': 'small()',
|
|
3006
3018
|
'(resized)': 'onResized($event)'
|
|
3007
|
-
}, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:
|
|
3019
|
+
}, template: "<div class=\"w-100 h-100 is-overflow-hidden | data-table-holder\">\n <div\n class=\"w-100 h-100 is-overflow-auto | table-container\"\n [style.min-height]=\"minHeight() + 'px'\"\n [style.max-height]=\"maxHeight() + 'px'\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;height:inherit;width:100%}:host *{box-sizing:border-box}:host .data-table-holder{z-index:1}:host.is-bordered>.data-table-holder{border:1px solid #dbe3ea;border-radius:3px;box-shadow:inset -2px 0 #bdb7b726;padding:8px}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep>.data-table-holder>.table-container>.table{width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{height:42px;white-space:nowrap;font-weight:600}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{border:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th>span:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td>span:first-child{display:inline-block;max-width:100%}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table .fixed-column{position:sticky}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{z-index:10}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{z-index:11}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th{top:0;z-index:1070}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column{z-index:1071}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.has-border-right:not(:last-child),:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.has-border-right:not(:last-child){box-shadow:inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:0;max-width:300px;width:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{max-width:180px;width:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right{box-shadow:none}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column.has-border-right:after{position:absolute;content:\"\";height:100%;top:0;right:0;width:4px;box-shadow:2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:300px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td.fixed-column{left:180px}}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.has-border-right:not(:last-child){box-shadow:inset 0 -1px #ffc000,inset -2px 0 #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #ffc000}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #ffc000,2px 0 4px #bdb7b726}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.has-border-right{box-shadow:inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr>th.fixed-column.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>tbody>tr>td.fixed-column.has-border-right:after{box-shadow:2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.has-border-right{box-shadow:inset 0 -1px #c5cdd5,inset -2px 0 #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right{box-shadow:inset 0 -1px #c5cdd5}:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th:first-child.has-border-right:after,:host ::ng-deep>.data-table-holder>.table-container>.table.is-dark>thead>tr:last-child>th.fixed-column.has-border-right:after{box-shadow:inset 0 -1px #c5cdd5,2px 0 4px #6c8093}:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr{background-color:transparent!important}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr th{top:42px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr+tr+tr th{top:84px}:host ::ng-deep>.data-table-holder>.table-container>.table>thead>tr>th,:host ::ng-deep>.data-table-holder>.table-container>.table>tbody>tr>td{background-color:#fff}:host ::ng-deep>.data-table-holder>.table-container>.table.is-hoverable>tbody>tr:not(.is-selected):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped>tbody>tr:not(.is-selected):nth-child(2n)>td{background-color:#fefcf7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-striped.is-hoverable>tr:not(.is-selected):nth-child(2n):hover>td{background-color:#f3f5f7}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow{font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th{height:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:200px;max-width:200px;width:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td:first-child,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{min-width:120px;max-width:120px;width:120px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:200px}@media screen and (max-width: 767px){:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr>th.fixed-column,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>tbody>tr>td.fixed-column{left:120px}}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr th{top:30px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow>thead>tr+tr+tr th{top:60px}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{height:30px;font-size:.875rem;line-height:1rem}:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .select select,:host ::ng-deep>.data-table-holder>.table-container>.table.is-narrow .input{padding-top:5px;padding-bottom:5px}\n"] }]
|
|
3008
3020
|
}], propDecorators: { minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], isSmall: [{
|
|
3009
3021
|
type: HostBinding,
|
|
3010
3022
|
args: ['class.is-small']
|
|
@@ -3422,7 +3434,7 @@ class DrawerContainerComponent {
|
|
|
3422
3434
|
return parseInt(padding, 10) + parseInt(margin, 10);
|
|
3423
3435
|
}
|
|
3424
3436
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3425
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3437
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 | shell__menuContent\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3426
3438
|
}
|
|
3427
3439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
3428
3440
|
type: Component$1,
|
|
@@ -3439,7 +3451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
3439
3451
|
'[class]': 'hostClass()',
|
|
3440
3452
|
'[attr.drawer-position]': 'position()',
|
|
3441
3453
|
'[attr.drawer-state]': 'menuState()'
|
|
3442
|
-
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"
|
|
3454
|
+
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 w-100\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (links()?.length > 0) {\n <div\n ngbDropdown\n #optionDd=\"ngbDropdown\"\n container=\"body\"\n placement=\"bottom-end\"\n [dropdownClass]=\"compactMenuHeaderClass()\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n </div>\n </div>\n </div>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"is-absolute h-100 shadow-2 | shell__menuContent\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n @if (drawerMenuFooterTemplate()) {\n <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n }\n </he-navigation-menu>\n }\n @if (drawerFooterTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{top:0;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width: 1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
|
|
3443
3455
|
}], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
|
|
3444
3456
|
type: HostListener,
|
|
3445
3457
|
args: ['window:mouseup']
|
|
@@ -3966,11 +3978,11 @@ class SearchExtendComponent {
|
|
|
3966
3978
|
return this.extended() ? this.applySearch() : this.extend();
|
|
3967
3979
|
}
|
|
3968
3980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SearchExtendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3969
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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 class=\"field has-addons\" novalidate (submit)=\"submit()\">\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 class=\"button is-ghost is-small\" [ngClass]=\"extended() ? class() : ''\" 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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
3981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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 class=\"field has-addons\" novalidate (submit)=\"submit()\">\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 class=\"button is-ghost is-small is-radius-right-6\" [ngClass]=\"extended() ? class() : ''\" 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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
3970
3982
|
}
|
|
3971
3983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SearchExtendComponent, decorators: [{
|
|
3972
3984
|
type: Component$1,
|
|
3973
|
-
args: [{ selector: 'he-search-extend', imports: [FormsModule, NgClass, HESvgIconComponent], template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\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 class=\"button is-ghost is-small\" [ngClass]=\"extended() ? class() : ''\" type=\"submit\">\n <he-svg-icon name=\"search\" size=\"20\" />\n </button>\n </div>\n</form>\n", styles: [".button{height:36px}\n"] }]
|
|
3985
|
+
args: [{ selector: 'he-search-extend', imports: [FormsModule, NgClass, HESvgIconComponent], template: "<form class=\"field has-addons\" novalidate (submit)=\"submit()\">\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 class=\"button is-ghost is-small is-radius-right-6\" [ngClass]=\"extended() ? class() : ''\" type=\"submit\">\n <he-svg-icon name=\"search\" size=\"20\" />\n </button>\n </div>\n</form>\n", styles: [".button{height:36px}\n"] }]
|
|
3974
3986
|
}], 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"] }] } });
|
|
3975
3987
|
|
|
3976
3988
|
class ShellComponent {
|
|
@@ -8127,7 +8139,7 @@ class NodeLogsModelsComponent {
|
|
|
8127
8139
|
return subValues.every(v => v.configModels.some(vv => vv.status === LogStatus.success));
|
|
8128
8140
|
}
|
|
8129
8141
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NodeLogsModelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!isExternal && !loading() && logsUrl()) {\n <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n <div class=\"is-flex-grow-1\"></div>\n @if (hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n } @else {\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n }\n </div>\n}\n<he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n </span>\n } @else {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else if (isSystemBoundary(data)) {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n } @else {\n -\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NodeLogsModelsComponent, isStandalone: true, selector: "he-node-logs-models", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: true, transformFunction: null }, originalValues: { classPropertyName: "originalValues", publicName: "originalValues", isSignal: true, isRequired: false, transformFunction: null }, recalculatedValues: { classPropertyName: "recalculatedValues", publicName: "recalculatedValues", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypesLabel: { classPropertyName: "filterTermTypesLabel", publicName: "filterTermTypesLabel", isSignal: true, isRequired: false, transformFunction: null }, logsKey: { classPropertyName: "logsKey", publicName: "logsKey", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-mb-2\">\n <ng-content />\n</div>\n\n@if (!isExternal && !loading() && logsUrl()) {\n <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n <div class=\"is-flex-grow-1\"></div>\n @if (hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n } @else {\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n }\n </div>\n}\n<he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n </span>\n } @else {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else if (isSystemBoundary(data)) {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n } @else {\n -\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeValueDeltaComponent, selector: "he-blank-node-value-delta", inputs: ["value", "originalValue", "displayType", "useCustomFunctions"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: NodeLogsModelsLogsComponent, selector: "he-node-logs-models-logs", inputs: ["logs"] }, { kind: "component", type: NodeLogsModelsLogsStatusComponent, selector: "he-node-logs-models-logs-status", inputs: ["nodeType", "model", "data"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: TimesPipe, name: "times" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "pipe", type: RepeatPipe, name: "repeat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8131
8143
|
}
|
|
8132
8144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NodeLogsModelsComponent, decorators: [{
|
|
8133
8145
|
type: Component$1,
|
|
@@ -8152,7 +8164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
8152
8164
|
NodeLogsModelsLogsStatusComponent,
|
|
8153
8165
|
HESvgIconComponent,
|
|
8154
8166
|
GuideOverlayComponent
|
|
8155
|
-
], template: "@if (!isExternal && !loading() && logsUrl()) {\n <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n <div class=\"is-flex-grow-1\"></div>\n @if (hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n } @else {\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n }\n </div>\n}\n<he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap is-flex is-align-items-flex-start is-gap-4\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n </span>\n } @else {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else if (isSystemBoundary(data)) {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n } @else {\n -\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
|
|
8167
|
+
], template: "<div class=\"is-mb-2\">\n <ng-content />\n</div>\n\n@if (!isExternal && !loading() && logsUrl()) {\n <div class=\"is-flex is-align-items-center is-gap-8 is-mb-2\">\n <div class=\"is-flex-grow-1\"></div>\n @if (hasLogs()) {\n <a class=\"is-size-7\" [href]=\"logsUrl()\" target=\"_blank\">\n <span>Open Full Logs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n } @else {\n <he-svg-icon class=\"has-text-warning\" name=\"exclamation-triangle\" />\n <span class=\"is-size-7 has-text-warning\">No logs found. Recalculation logs will be incomplete.</span>\n }\n </div>\n}\n<he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr>\n <th class=\"width-auto has-border-right\">\n @if (enableFilterByTerm()) {\n <div class=\"field is-pb-1\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n class=\"input search-input is-small\"\n [ngModel]=\"term()\"\n name=\"term\"\n placeholder=\"Select entry by name\"\n [ngbTypeahead]=\"suggestTerm\"\n [focusFirst]=\"true\"\n (focus)=\"typeaheadFocus($event)\"\n (selectItem)=\"term.set($event.item)\"\n container=\"body\"\n popupClass=\"is-small\" />\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"!term()\" (click)=\"term.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n </div>\n </div>\n }\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>\n <span class=\"is-pr-1\">Units</span>\n @if (functionalUnit()) {\n <span>(per </span>\n <span>{{ functionalUnit() }}</span>\n <span>)</span>\n }\n </span>\n </div>\n </th>\n }\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Original</span>\n </div>\n </th>\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Recalculated</span>\n </div>\n </th>\n @if (isBlankNodes()) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Difference</span>\n </div>\n </th>\n }\n @for (c of methodModelsCount() | times; track i; let i = $index) {\n <th class=\"has-border-right\">\n <div class=\"is-flex is-flex-direction-column is-justify-content-center h-100\">\n <span>Model {{ i + 1 }}</span>\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (loading()) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n </td>\n </tr>\n } @else if (blankNodes().length === 0) {\n <tr>\n <td class=\"has-border-right has-text-centered\" colspan=\"6\">\n <span>{{ noDataMessage() || 'No original data was provided and no gap filling occurred.' }}</span>\n </td>\n </tr>\n }\n @for (blankNode of blankNodes(); track trackByBlankNode($index, blankNode)) {\n <tr [class.has-sub-rows]=\"blankNode.canOpen\" [class.is-open]=\"blankNode.isOpen\">\n <td\n class=\"width-auto has-border-right is-nowrap\"\n [attr.title]=\"$any(blankNode).term?.name || $any(blankNode).key\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: blankNode }\" />\n @if ($any(blankNode).term) {\n <he-node-link class=\"is-inline-block is-pre-wrap is-pr-2\" [node]=\"$any(blankNode).term\">\n <span\n class=\"break-word\"\n [innerHtml]=\"$any(blankNode).term.name | compound: $any(blankNode).term.termType\"></span>\n </he-node-link>\n } @else if ($any(blankNode).key) {\n @if (nodeKey() === 'completeness') {\n <a [href]=\"schemaBaseUrl + '/Completeness#' + $any(blankNode).key\" target=\"_blank\">\n <span>{{ $any(blankNode).key | keyToLabel }}</span>\n </a>\n }\n }\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if ($any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n <ng-template #originalValueContent>\n <span>{{ $any(blankNode).originalValue | precision: 3 | default: '-' }}</span>\n </ng-template>\n\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).originalValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span\n [class.trigger-popover]=\"!!$any(blankNode).original?.[0]?.methodModel\"\n [ngbPopover]=\"blankNodeOriginalValueDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n placement=\"bottom left right auto\"\n container=\"body\"\n [disablePopover]=\"!$any(blankNode).original?.[0]?.methodModel\"\n [popoverContext]=\"{ blankNode }\">\n <span pointer>\n {{ $any(blankNode).originalValue | precision: 3 | default: '-' }}\n </span>\n </span>\n }\n </td>\n <td class=\"has-border-right\">\n @if (!blankNode.isOriginal || blankNode.isRecalculated) {\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n {{ $any(blankNode).recalculatedValueByMethodId[model.methodId] | precision: 3 | default: '-' }}\n </div>\n }\n } @else {\n <span>{{ blankNode.recalculatedValue | precision: 3 | default: '-' }}</span>\n }\n } @else if ($any(blankNode).configModels?.length) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right is-nowrap\">\n @if (blankNode.allParallel) {\n @for (model of $any(blankNode).configModels[0]; track model.methodId) {\n <div>\n @if (\n $any(blankNode).originalValueByMethodId[model.methodId] !== null &&\n $any(blankNode).recalculatedValueByMethodId[model.methodId] !== null\n ) {\n <he-blank-node-value-delta\n [value]=\"$any(blankNode).recalculatedValueByMethodId[model.methodId]\"\n [originalValue]=\"$any(blankNode).originalValueByMethodId[model.methodId]\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n </div>\n }\n } @else {\n @if ($any(blankNode).original.length && blankNode.isRecalculated) {\n <he-blank-node-value-delta\n [value]=\"blankNode.recalculatedValue\"\n [originalValue]=\"$any(blankNode).originalValue\"\n [useCustomFunctions]=\"false\" />\n } @else {\n -\n }\n }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: blankNode }\" />\n </tr>\n @for (subValue of $any(blankNode).keys; track trackBySubValue(subValue)) {\n @if (blankNode.isOpen) {\n <tr [class.has-sub-rows]=\"$any(blankNode).subValues?.length\" [class.is-sub-row]=\"blankNode.canOpen\">\n <td class=\"width-auto has-border-right is-nowrap\">\n <span class=\"is-inline-block is-align-top pl-3 pr-1 field-node\">Field:</span>\n @if (blankNode.type) {\n <a\n class=\"is-inline-block is-pre-wrap\"\n [href]=\"schemaBaseUrl + '/' + blankNode.type + '#' + subValue.key\"\n target=\"_blank\"\n [title]=\"subValue.key\">\n <span>{{ subValue.key }}</span>\n </a>\n }\n @if (!blankNode.type) {\n <span class=\"is-inline-block is-align-top\">{{ subValue.key }}</span>\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\"></td>\n }\n <td class=\"has-border-right\">\n @if (subValue.originalValue !== null) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated || subValue.key === 'impactAssessment') {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n not recalculated\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n }\n @for (subValue of $any(blankNode).subValues; track trackBySubValue(subValue)) {\n <ng-container *ngTemplateOutlet=\"subValueRow; context: { blankNode, parent: blankNode, subValue }\" />\n }\n }\n </tbody>\n </table>\n</he-data-table>\n<div class=\"is-size-7\">\n <div class=\"is-flex is-py-2 is-px-3 is-gap-16 | status-legend\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-align-content-center is-flex-wrap-wrap is-gap-8\">\n @for (status of LogStatus | keyvalue; track status.value) {\n @if (logIcon[status.value]) {\n <span class=\"is-flex is-align-items-center is-gap-8\">\n <he-svg-icon [name]=\"logIcon[status.value]\" size=\"20\" class=\"has-text-{{ logColor[status.value] }}\" />\n <span class=\"is-size-7 is-capitalized\">{{ status.value }}</span>\n </span>\n }\n }\n </div>\n\n @if (filteredType()) {\n <div class=\"field is-relative\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n [(ngModel)]=\"onlyRequired\"\n [disabled]=\"!!term()\"\n id=\"onlyRequired\" />\n <label class=\"is-size-7\" for=\"onlyRequired\">\n <span>Show only {{ filteredType() }} terms included in the default HESTIA system boundary</span>\n </label>\n </div>\n }\n </div>\n</div>\n\n<ng-template #collapseButton let-blankNode>\n @if (blankNode.canOpen) {\n <a class=\"open-node\" (click)=\"toggleBlankNode(blankNode)\">\n <he-svg-icon [name]=\"blankNode.isOpen ? 'chevron-down' : 'chevron-right'\" />\n </a>\n }\n</ng-template>\n\n<ng-template #subValueRow let-blankNode=\"blankNode\" let-parent=\"parent\" let-subValue=\"subValue\" let-rowClass=\"rowClass\">\n @let term = subValue.term || termById(subValue.id);\n @if (parent.isOpen) {\n <tr [class.is-sub-row]=\"parent.canOpen\" [ngClass]=\"rowClass\">\n <td class=\"width-auto has-border-right\">\n <div class=\"is-flex is-align-items-flex-start is-gap-4 h-100\">\n <ng-container *ngTemplateOutlet=\"collapseButton; context: { $implicit: subValue }\" />\n <he-svg-icon class=\"sub-sub-row-icon\" name=\"chevron-double-right\" />\n <div class=\"is-flex is-align-items-flex-start is-flex-wrap-wrap is-gap-4\" [class.is-pl-3]=\"!subValue.canOpen\">\n <span>\n <span>{{ subValue.key | keyToLabel }}</span>\n @if (subValue.id) {\n <span class=\"is-inline-block\">:</span>\n }\n </span>\n @if (subValue.id) {\n @switch (subValue.key) {\n @case ('backgroundData') {\n <span class=\"is-inline-block\">{{ term?.name }}</span>\n }\n @case ('animal') {\n <span class=\"is-inline-block\">{{ subValue.id }}</span>\n }\n @default {\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-inline-block\"\n [node]=\"term\"\n [attr.title]=\"term?.name\">\n <span class=\"break-word\" [innerHtml]=\"term?.name | compound\"></span>\n </he-node-link>\n }\n }\n }\n </div>\n </div>\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">\n @if (subValue.showUnits && $any(blankNode).term) {\n <span\n class=\"is-nowrap\"\n [innerHtml]=\"$any(blankNode).term.units | compound: $any(blankNode).term.termType\"></span>\n }\n </td>\n }\n <td class=\"has-border-right\">\n @if (!isEmpty(subValue.originalValue)) {\n <span>\n {{ subValue.originalValue | precision: 3 | default: '-' }}\n </span>\n } @else {\n -\n }\n </td>\n <td class=\"has-border-right\">\n @if (subValue.isRecalculated) {\n @if (subValue.multiGroups) {\n <span\n class=\"trigger-popover\"\n ngbPopover=\"The total value across all inputs\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\">\n <span pointer>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n </span>\n } @else {\n <span>\n {{ subValue.recalculatedValue | precision: 3 | default: '-' }}\n </span>\n }\n } @else if (!isEmpty(subValue.originalValue)) {\n not recalculated\n } @else {\n -\n }\n </td>\n @if (isBlankNodes()) {\n <td class=\"has-border-right\">-</td>\n }\n <ng-container *ngTemplateOutlet=\"blankNodeModels; context: { data: subValue }\" />\n </tr>\n }\n @if (subValue.subValues) {\n @for (sub of subValue.subValues; track trackBySubValue(sub)) {\n <ng-container\n *ngTemplateOutlet=\"\n subValueRow;\n context: { blankNode, parent: subValue, subValue: sub, rowClass: 'is-sub-sub-row' }\n \" />\n }\n }\n</ng-template>\n\n<ng-template #blankNodeOriginalValueDetails let-blankNode=\"blankNode\">\n <span class=\"is-pr-1\">The original value was reported using:</span>\n <he-node-link\n class=\"is-inline-block\"\n linkClass=\"is-dark\"\n [node]=\"$any(blankNode).original[0].methodModel\"\n [showExternalLink]=\"true\">\n <span>{{ $any(blankNode).original[0].methodModel.name }}</span>\n </he-node-link>\n</ng-template>\n\n<ng-template #blankNodeModels let-data=\"data\">\n @let extraColumns = methodModelsCount() - 1;\n\n <ng-template #notInSystemBoundary>\n <td class=\"has-border-right\">\n <span>Not in HESTIA system boundary</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n </ng-template>\n\n @if (data.canOpen && !data.isOpen && !data.configModels?.length) {\n <td class=\"has-border-right\">\n <span>Expand to see logs (</span>\n @let key = subValuesKey(data, 'sub-values');\n @if (hasCompleteSuccess(data)) {\n <span>all succeeded</span>\n <he-svg-icon class=\"is-ml-1\" name=\"checkmark\" class=\"has-text-success\" />\n } @else {\n <span>some failed</span>\n <he-svg-icon class=\"is-ml-1\" name=\"xmark\" class=\"has-text-danger\" />\n }\n <span>)</span>\n </td>\n @for (v of data | repeat: extraColumns; track repeatIndex; let repeatIndex = $index) {\n <td class=\"has-border-right\"></td>\n }\n } @else if (isSystemBoundary(data)) {\n @for (configModel of methodModelsCount() | times; track configModelIndex; let configModelIndex = $index) {\n <td class=\"has-border-right blank-node-index-{{ configModelIndex }}\">\n @if (getModelsAt(data, configModelIndex); as models) {\n @if ($any(models) | isArray) {\n <div>\n @for (model of $any(models); track model.methodId) {\n <p>\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model, data }\" />\n </p>\n }\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"blankNodeModel; context: { model: models, data }\" />\n }\n } @else {\n -\n }\n </td>\n }\n } @else {\n -\n }\n</ng-template>\n\n<ng-template #blankNodeModel let-model=\"model\" let-data=\"data\">\n <div class=\"is-flex is-align-self-stretch is-justify-content-center is-align-items-center is-gap-8\">\n <div class=\"is-flex is-gap-4 is-flex-grow-1 is-align-items-center\">\n <span\n class=\"pl-1 has-text-{{ logColor[model.status] }}\"\n [class.trigger-popover]=\"hasLogs()\"\n [ngbPopover]=\"logStatusDetails\"\n [disablePopover]=\"!hasLogs()\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p1=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"$event.stopPropagation(); p1.isOpen() ? p1.close() : p1.open({ model, data })\">\n <he-svg-icon [name]=\"logIcon[model.status]\" />\n </span>\n\n <span class=\"is-flex is-flex-grow-1 is-gap-4\">\n <span class=\"is-nowrap is-capitalized\">{{ methodName(model) }}</span>\n\n @if (model.logs?.methodTier || model.model?.methodTier) {\n <span class=\"is-nowrap\">[{{ model.logs?.methodTier || model.model?.methodTier }}]</span>\n }\n </span>\n </div>\n\n <div class=\"is-flex is-gap-4 is-flex-shrink-0 is-align-items-center\">\n @if (model.showLogs) {\n <span\n class=\"is-nowrap is-clickable\"\n [ngbPopover]=\"logDetails\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow\"\n triggers=\"manual\"\n #p=\"ngbPopover\"\n placement=\"bottom left right auto\"\n container=\"body\"\n (click)=\"p.isOpen() ? p.close() : model.showLogs ? p.open({ logs: model.logs }) : null\">\n <span class=\"has-text-link\">Logs</span>\n </span>\n }\n\n @if (model.model) {\n @if (model.showLogs) {\n <div class=\"vertical-divider\"></div>\n }\n <ng-container *ngTemplateOutlet=\"docsLink; context: { $implicit: model.model }\" />\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #logDetails let-logs=\"logs\">\n <he-node-logs-models-logs [logs]=\"logs\" />\n</ng-template>\n\n<ng-template #logStatusDetails let-model=\"model\" let-data=\"data\">\n <he-node-logs-models-logs-status [nodeType]=\"nodeType()\" [model]=\"model\" [data]=\"\" />\n</ng-template>\n\n<ng-template #docsLink let-model>\n @if (guideEnabled && model.guidePath) {\n <he-guide-overlay [pageId]=\"model.guidePath\" [width]=\"500\" />\n } @else {\n <a [href]=\"model.docPath || model.path\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n</ng-template>\n", styles: [":host{display:block}:host .vertical-divider{width:1px;height:20px;background:#dbe3ea}:host .status-legend{border:1px solid #dbe3ea;background:#f5f7f9}::ng-deep .table{background-color:transparent}::ng-deep .table td.has-border-right{box-shadow:1px 0 #4c7194}::ng-deep .table .has-sub-rows.is-open>td:first-child:before,::ng-deep .table .is-sub-row>td:first-child:before{display:block;position:absolute;content:\" \";background-color:#4c719433;height:100%;width:1px;top:0;left:14px}::ng-deep .table .has-sub-rows.is-open>td:first-child:before{top:25px}::ng-deep .table .is-sub-row td:first-child{padding-left:12px}::ng-deep .table .is-sub-row .sub-sub-row-icon{display:none}::ng-deep .table .is-sub-row .open-node>he-svg-icon,::ng-deep .table .is-sub-row .sub-sub-row-icon{height:16px!important;width:16px!important}::ng-deep .table .is-sub-sub-row td:first-child{padding-left:24px}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon{display:inline-block}::ng-deep .table .is-sub-sub-row .sub-sub-row-icon+div{padding-left:0!important}::ng-deep .table .popover-body .table-container{max-height:260px;overflow-y:auto}\n"] }]
|
|
8156
8168
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: true }] }], originalValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "originalValues", required: false }] }], recalculatedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "recalculatedValues", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }], filterTermTypesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypesLabel", required: false }] }], logsKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "logsKey", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }] } });
|
|
8157
8169
|
|
|
8158
8170
|
var View$4;
|
|
@@ -8227,7 +8239,7 @@ class CyclesCompletenessComponent {
|
|
|
8227
8239
|
component.headerKeys.set(headerKeys$1);
|
|
8228
8240
|
}
|
|
8229
8241
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"
|
|
8242
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesCompletenessComponent, isStandalone: true, selector: "he-cycles-completeness", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n @if (selectedView() === View.logs) {\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\" 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 }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n }\n @case (View.logs) {\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", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8231
8243
|
}
|
|
8232
8244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesCompletenessComponent, decorators: [{
|
|
8233
8245
|
type: Component$1,
|
|
@@ -8238,7 +8250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
8238
8250
|
BlankNodeStateComponent,
|
|
8239
8251
|
BlankNodeStateNoticeComponent,
|
|
8240
8252
|
NodeLogsModelsComponent
|
|
8241
|
-
], template: "<div class=\"
|
|
8253
|
+
], template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n @if (selectedView() === View.logs) {\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\" 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 }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (completeness of completenessKeys(); track completeness) {\n <th [attr.title]=\"completeness\">\n <a [href]=\"schemaBaseUrl + '/Completeness#' + completeness\" target=\"_blank\">\n {{ keyToLabel(completeness) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of completenessKeys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ getCompleteness(cycle)[key] ? 'Complete' : 'Incomplete' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"getCompleteness(cycle)\"\n [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No completeness data</span>\n </div>\n }\n }\n @case (View.logs) {\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" }]
|
|
8242
8254
|
}], ctorParameters: () => [], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
|
|
8243
8255
|
|
|
8244
8256
|
const cycleValue = (cycle, values) => (values[cycle['@id']]?.nodes[0] || { value: [0] }).value;
|
|
@@ -8302,11 +8314,11 @@ class CyclesEmissionsChartComponent {
|
|
|
8302
8314
|
this.selectedTerm.set(term);
|
|
8303
8315
|
}
|
|
8304
8316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart
|
|
8317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
8306
8318
|
}
|
|
8307
8319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
|
|
8308
8320
|
type: Component$1,
|
|
8309
|
-
args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, BarChartComponent], template: "@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart
|
|
8321
|
+
args: [{ selector: 'he-cycles-emissions-chart', imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (terms().length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
|
|
8310
8322
|
}], ctorParameters: () => [], propDecorators: { cycles: [{ type: i0.Input, args: [{ isSignal: true, alias: "cycles", required: true }] }] } });
|
|
8311
8323
|
|
|
8312
8324
|
class CyclesFunctionalUnitMeasureComponent {
|
|
@@ -8377,7 +8389,7 @@ class CyclesMetadataComponent {
|
|
|
8377
8389
|
component.headerKeys.set(headerKeys);
|
|
8378
8390
|
}
|
|
8379
8391
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"
|
|
8392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesMetadataComponent, isStandalone: true, selector: "he-cycles-metadata", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (key of keys(); track key) {\n <th [attr.title]=\"key\">\n <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n {{ keyToLabel(key) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of keys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ cycle[key] | default: '-' }}\n </span>\n <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No data</span>\n </div>\n }\n }\n}\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "pipe", type: DefaultPipe, name: "default" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8381
8393
|
}
|
|
8382
8394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesMetadataComponent, decorators: [{
|
|
8383
8395
|
type: Component$1,
|
|
@@ -8388,7 +8400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
8388
8400
|
BlankNodeStateComponent,
|
|
8389
8401
|
BlankNodeStateNoticeComponent,
|
|
8390
8402
|
DefaultPipe
|
|
8391
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"
|
|
8403
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n\n@switch (selectedView()) {\n @case (View.table) {\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (key of keys(); track key) {\n <th [attr.title]=\"key\">\n <a [href]=\"schemaBaseUrl + '/Cycle#' + key\" target=\"_blank\">\n {{ keyToLabel(key) }}\n </a>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(i, cycle); let i = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycle\">\n <span>{{ i + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n @for (key of keys(); track key) {\n <td class=\"is-nowrap\">\n <span>\n {{ cycle[key] | default: '-' }}\n </span>\n <he-blank-node-state class=\"ml-1\" [dataState]=\"dataState()\" [node]=\"cycle\" [key]=\"key\" />\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n } @else {\n <div class=\"panel-block\">\n <span>No data</span>\n </div>\n }\n }\n}\n" }]
|
|
8392
8404
|
}], propDecorators: { dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
|
|
8393
8405
|
|
|
8394
8406
|
// TODO: compute from the list of unique properties
|
|
@@ -8636,11 +8648,11 @@ class CyclesNodesTimelineComponent {
|
|
|
8636
8648
|
}), ...(ngDevMode ? [{ debugName: "chartConfig" }] : []));
|
|
8637
8649
|
}
|
|
8638
8650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"chart-area-border\">\n <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }] }); }
|
|
8651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesNodesTimelineComponent, isStandalone: true, selector: "he-cycles-nodes-timeline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: true, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />\n\n<div class=\"chart-area-border\">\n <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }] }); }
|
|
8640
8652
|
}
|
|
8641
8653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesTimelineComponent, decorators: [{
|
|
8642
8654
|
type: Component$1,
|
|
8643
|
-
args: [{ selector: 'he-cycles-nodes-timeline', imports: [ChartComponent], template: "<div class=\"chart-area-border\">\n <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
|
|
8655
|
+
args: [{ selector: 'he-cycles-nodes-timeline', imports: [ChartComponent], template: "<ng-content />\n\n<div class=\"chart-area-border\">\n <he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" />\n</div>\n", styles: ["he-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
|
|
8644
8656
|
}], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: true }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }] } });
|
|
8645
8657
|
|
|
8646
8658
|
class TermsUnitsDescriptionComponent {
|
|
@@ -8750,6 +8762,7 @@ class CyclesNodesComponent {
|
|
|
8750
8762
|
this.cycles = computed(() => this.nodeKeyGroup()
|
|
8751
8763
|
? filterGroupNodesByTerm(this.nodeKeyGroup(), this.currentNodes(), this.selectedGroup())
|
|
8752
8764
|
: this.currentNodes(), ...(ngDevMode ? [{ debugName: "cycles" }] : []));
|
|
8765
|
+
this.showSelectCycle = computed(() => [View$2.timeline, View$2.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectCycle" }] : []));
|
|
8753
8766
|
this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
8754
8767
|
this.ogirinalSelectedCycle = computed(() => this.originalCycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedCycle" }] : []));
|
|
8755
8768
|
this.selectedCycle = computed(() => this.cycles()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "selectedCycle" }] : []));
|
|
@@ -8836,7 +8849,7 @@ class CyclesNodesComponent {
|
|
|
8836
8849
|
component.headerKeys.set(this.headerKeys());
|
|
8837
8850
|
}
|
|
8838
8851
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n <div class=\"column\">\n <div class=\"is-flex is-gap-8\">\n @if (hasData() && selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n @if (selectedView() === View.table) {\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n }\n </div>\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons | button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <div class=\"is-px-3 is-pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-shrink-0 is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n </div>\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n }\n }\n }\n @case (View.timeline) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\" />\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-mb-2\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\" />\n }\n }\n }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CyclesNodesComponent, isStandalone: true, selector: "he-cycles-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKeys: { classPropertyName: "nodeKeys", publicName: "nodeKeys", isSignal: true, isRequired: true, transformFunction: null }, nodeKeyGroup: { classPropertyName: "nodeKeyGroup", publicName: "nodeKeyGroup", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-my-2\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "component", type: CyclesFunctionalUnitMeasureComponent, selector: "he-cycles-functional-unit-measure", inputs: ["cycle"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: CyclesEmissionsChartComponent, selector: "he-cycles-emissions-chart", inputs: ["cycles"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CyclesNodesTimelineComponent, selector: "he-cycles-nodes-timeline", inputs: ["values", "maxDate", "minDate"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8840
8853
|
}
|
|
8841
8854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesNodesComponent, decorators: [{
|
|
8842
8855
|
type: Component$1,
|
|
@@ -8862,7 +8875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
8862
8875
|
KeyToLabelPipe,
|
|
8863
8876
|
PrecisionPipe,
|
|
8864
8877
|
PluralizePipe
|
|
8865
|
-
], template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n <div class=\"column\">\n <div class=\"is-flex is-gap-8\">\n @if (hasData() && selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n @if (selectedView() === View.table) {\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n }\n </div>\n </div>\n\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons | button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <div class=\"is-px-3 is-pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-shrink-0 is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n </div>\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\" />\n }\n }\n }\n @case (View.timeline) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\" />\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-mb-2\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\" />\n }\n }\n }\n}\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
|
|
8878
|
+
], template: "@if (isGroupNode()) {\n <div class=\"tabs is-mb-1 | group-nodes-tabs\">\n <ul>\n @for (value of groupNodeValues(); track value) {\n <li [class.is-active]=\"selectedGroup() === value\">\n <a (click)=\"selectedGroup.set(value)\">\n <span class=\"is-capitalized is-pr-1\">{{ nodeKeyGroup() | pluralize: 1 }}:</span>\n <span>{{ value }}</span>\n </a>\n </li>\n }\n </ul>\n </div>\n}\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n <span>{{ dataKey | keyToLabel }}</span>\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <a [href]=\"schemaBaseUrl + '/Cycle#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (cycle of cycles(); track trackById(cycleIndex, cycle); let cycleIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(cycle)\">\n <he-node-link [node]=\"cycleNode(cycle)\">\n <span>{{ cycleIndex + 1 }}. {{ defaultLabel(cycle) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [class.is-hidden]=\"isGroupNode()\">\n <he-cycles-functional-unit-measure [cycle]=\"cycle\" />\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let cycleData = node.value.values[cycle['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (cycleData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: cycleData, cycle, key: dataKey }\">\n <span pointer>\n {{ cycleData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"cycleData.node\"\n key=\"value\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice\n [dataState]=\"dataState()\"\n [showDeleted]=\"firstNodeKey() === BlankNodesKey.emissions\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n @if (showHideZeroValues()) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n }\n @if (cycles().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @switch (firstNodeKey()) {\n @case (BlankNodesKey.emissions) {\n <he-cycles-emissions-chart [cycles]=\"cycles()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-emissions-chart>\n }\n }\n }\n @case (View.timeline) {\n <he-cycles-nodes-timeline\n [values]=\"timelineValues()\"\n [minDate]=\"selectedCycle().startDate\"\n [maxDate]=\"selectedCycle().endDate\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-cycles-nodes-timeline>\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"selectedNodeKey()\"\n [logsKey]=\"selectedLogsKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n @if (nodeKeys().length > 1) {\n <div class=\"tabs is-my-2\">\n <ul>\n @for (nodeKey of nodeKeys(); track nodeKey) {\n <li [class.is-active]=\"selectedNodeKey() === nodeKey\">\n <a (click)=\"selectedNodeKey.set(nodeKey)\">{{ nodeKey | keyToLabel }}</a>\n </li>\n }\n </ul>\n </div>\n }\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectCycle()) {\n <ng-container *ngTemplateOutlet=\"selectCycle\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectCycle>\n @if (cycles().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectCycle\">Cycle</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectCycle\">\n @for (value of cycles(); track value; let cycleIndex = $index) {\n <option [value]=\"cycleIndex\">{{ cycleIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"cycle\" let-data=\"data\" let-key=\"key\">\n <p>\n <b>{{ defaultLabel(node) }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"key\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}\n"] }]
|
|
8866
8879
|
}], 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 }] }] } });
|
|
8867
8880
|
|
|
8868
8881
|
class CyclesResultComponent {
|
|
@@ -8924,7 +8937,7 @@ class CyclesResultComponent {
|
|
|
8924
8937
|
});
|
|
8925
8938
|
}
|
|
8926
8939
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8927
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesResultComponent, isStandalone: true, selector: "he-cycles-result", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" />\n", styles: [":host{display:block}he-chart ::ng-deep .chart-container{min-height:300px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CyclesResultComponent, isStandalone: true, selector: "he-cycles-result", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<he-chart class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig\" />\n", styles: [":host{display:block}he-chart ::ng-deep .chart-container{min-height:300px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8928
8941
|
}
|
|
8929
8942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CyclesResultComponent, decorators: [{
|
|
8930
8943
|
type: Component$1,
|
|
@@ -10489,11 +10502,13 @@ const customErrorMessage = {
|
|
|
10489
10502
|
You do not need to set a ${code('value')} for the Product, but adding a ${code('value')} is desirable.`,
|
|
10490
10503
|
'is not an allowed excreta product': ({ params }) => `This excreta product is not allowed for the animal products added to this Cycle.
|
|
10491
10504
|
Instead, please add one of the following excreta: ${listAsCode(params.expected)}`,
|
|
10492
|
-
'value should sum to 100 across all values': ({ params }) =>
|
|
10493
|
-
|
|
10505
|
+
'value should sum to 100 across all values': ({ params }, errorCount) => `${errorCount === 1
|
|
10506
|
+
? `The total value of the following terms should sum up to a value of 100%: ${formatList((params.termIds || []).map(code))}`
|
|
10507
|
+
: 'Some of the terms are grouped together, and their total value should sum up to 100%.'}
|
|
10494
10508
|
Make sure to add any missing term if needed and/or adjust the values of the existing terms you already recorded.`,
|
|
10495
|
-
'value should sum to maximum 100 across all values': ({ params }) =>
|
|
10496
|
-
|
|
10509
|
+
'value should sum to maximum 100 across all values': ({ params }, errorCount) => `${errorCount === 1
|
|
10510
|
+
? `The total value of the following terms should sum up to a maximum value of 100%: ${formatList((params.termIds || []).map(code))}`
|
|
10511
|
+
: 'Some of the terms are grouped together, and their total value should not go over 100%.'}
|
|
10497
10512
|
Make sure to add any missing term if needed and/or adjust the values of the existing terms you already recorded.`,
|
|
10498
10513
|
'rice products not allowed for this water regime practice': ({ params }) => `This practice is not allowed with the products ${params.products?.map(p => code(p.name || p['@id']))}.
|
|
10499
10514
|
Recording the right water regime for rice ensures methane emissions from flooded fields are correctly recalculated.
|
|
@@ -12651,7 +12666,9 @@ const showBar = (node) => [
|
|
|
12651
12666
|
class HierarchyChartComponent {
|
|
12652
12667
|
constructor() {
|
|
12653
12668
|
this.ngZone = inject(NgZone);
|
|
12654
|
-
this.
|
|
12669
|
+
this.chart = viewChild.required('chart');
|
|
12670
|
+
this.zoomContainer = viewChild.required('zoomContainer');
|
|
12671
|
+
this.chartContainer = viewChild.required('chartContainer');
|
|
12655
12672
|
this.tooltipOperator = viewChild.required('t');
|
|
12656
12673
|
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
12657
12674
|
this.terms = input({}, ...(ngDevMode ? [{ debugName: "terms" }] : []));
|
|
@@ -12702,7 +12719,7 @@ class HierarchyChartComponent {
|
|
|
12702
12719
|
this.endpoints = computed(() => this.linkedIndicators().filter(indicator => indicator.type === ChartNodeType.endpoint), ...(ngDevMode ? [{ debugName: "endpoints" }] : []));
|
|
12703
12720
|
this.chartChildren = computed(() => this.endpoints().length ? [...this.endpoints(), this.otherEndpoint()].filter(Boolean) : this.linkedIndicators(), ...(ngDevMode ? [{ debugName: "chartChildren" }] : []));
|
|
12704
12721
|
effect(() => {
|
|
12705
|
-
if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.
|
|
12722
|
+
if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chart()?.nativeElement].every(Boolean)) {
|
|
12706
12723
|
this.init();
|
|
12707
12724
|
}
|
|
12708
12725
|
});
|
|
@@ -12747,18 +12764,33 @@ class HierarchyChartComponent {
|
|
|
12747
12764
|
this.renderChart();
|
|
12748
12765
|
}
|
|
12749
12766
|
renderChart() {
|
|
12750
|
-
this.svg = select(this.
|
|
12751
|
-
this.
|
|
12767
|
+
this.svg = select(this.chart().nativeElement);
|
|
12768
|
+
this.svgContainer = select(this.chartContainer().nativeElement);
|
|
12769
|
+
this.svgContainer.selectAll('*').remove();
|
|
12752
12770
|
// root node is always positioned at ⟨0, 0⟩
|
|
12753
12771
|
const innerHeight = (this.root.children.length - 1) * nodeHeight * nodeSpacingFactor + nodeHeight;
|
|
12754
12772
|
this.yMin = (nodeHeight - innerHeight) / 2 - margin.top;
|
|
12755
|
-
this.yTotal =
|
|
12756
|
-
this.svg
|
|
12757
|
-
|
|
12758
|
-
|
|
12759
|
-
this.
|
|
12760
|
-
this.link = this.svg.append('g').selectAll('path');
|
|
12773
|
+
this.yTotal = this.chart().nativeElement.clientHeight;
|
|
12774
|
+
this.svg.attr('viewBox', [0, this.yMin, width, this.yTotal].join(' ')).attr('font-size', `${fontSize}px`);
|
|
12775
|
+
this.node = this.svgContainer.append('g').selectAll('g');
|
|
12776
|
+
this.link = this.svgContainer.append('g').selectAll('path');
|
|
12777
|
+
this.initZoom();
|
|
12761
12778
|
this.handleNodeClick(null, this.root.find(node => node.depth === 1));
|
|
12779
|
+
this.zoomToFit();
|
|
12780
|
+
}
|
|
12781
|
+
initZoom() {
|
|
12782
|
+
const zoomGroup = select(this.zoomContainer().nativeElement);
|
|
12783
|
+
// zoom and drag anywhere
|
|
12784
|
+
this.svg
|
|
12785
|
+
.insert('rect', ':first-child')
|
|
12786
|
+
.attr('width', '100%')
|
|
12787
|
+
.attr('height', '100%')
|
|
12788
|
+
.style('fill', 'none')
|
|
12789
|
+
.style('pointer-events', 'all');
|
|
12790
|
+
this.zoom = zoom()
|
|
12791
|
+
.scaleExtent([0.1, 4]) // Limit zoom: Min 0.1x, Max 4x
|
|
12792
|
+
.on('zoom', event => zoomGroup.attr('transform', event.transform));
|
|
12793
|
+
this.svg.call(this.zoom);
|
|
12762
12794
|
}
|
|
12763
12795
|
// flip x/y to go left-right instead of top-bottom
|
|
12764
12796
|
updateChart({ togglingGroup = false, switchingSelection = false } = {}) {
|
|
@@ -12802,7 +12834,7 @@ class HierarchyChartComponent {
|
|
|
12802
12834
|
previousTanslateY: 0,
|
|
12803
12835
|
previousYTotal: this.yTotal
|
|
12804
12836
|
});
|
|
12805
|
-
this.
|
|
12837
|
+
this.svgContainer.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, width, newHeight].join(' '));
|
|
12806
12838
|
this.node = this.node
|
|
12807
12839
|
.data(nodes, d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
|
|
12808
12840
|
.join(enter => enter
|
|
@@ -12878,13 +12910,38 @@ class HierarchyChartComponent {
|
|
|
12878
12910
|
d.children ? collapseChildren(d) : restoreChildren(d);
|
|
12879
12911
|
this.updateChart({ switchingSelection });
|
|
12880
12912
|
}
|
|
12913
|
+
zoomToFit() {
|
|
12914
|
+
const svg = this.chart().nativeElement;
|
|
12915
|
+
const container = this.chartContainer().nativeElement;
|
|
12916
|
+
const { width, height } = svg.viewBox.baseVal;
|
|
12917
|
+
// 2. Get the content bounds
|
|
12918
|
+
const bounds = container.getBBox();
|
|
12919
|
+
// 3. Calculate Scale
|
|
12920
|
+
const padding = 0.95; // 5% padding
|
|
12921
|
+
const scale = padding / Math.max(bounds.width / width, bounds.height / height);
|
|
12922
|
+
const transform = zoomIdentity.scale(scale);
|
|
12923
|
+
// Transition the SVG to this new state
|
|
12924
|
+
this.svg
|
|
12925
|
+
.transition()
|
|
12926
|
+
.duration(750) // 750ms animation
|
|
12927
|
+
.call(this.zoom.transform, transform);
|
|
12928
|
+
}
|
|
12929
|
+
zoomIn() {
|
|
12930
|
+
this.svg.transition().duration(750).call(this.zoom.scaleBy, 1.2); // Increase scale by 20%
|
|
12931
|
+
}
|
|
12932
|
+
zoomOut() {
|
|
12933
|
+
this.svg.transition().duration(750).call(this.zoom.scaleBy, 0.8); // Decrease scale by 20%
|
|
12934
|
+
}
|
|
12935
|
+
resetZoom() {
|
|
12936
|
+
this.zoomToFit();
|
|
12937
|
+
}
|
|
12881
12938
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "
|
|
12939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | zoom-controls\">\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n <button class=\"button is-small\" (click)=\"zoomIn()\">\n <he-svg-icon name=\"plus\" size=\"20\" />\n </button>\n <button class=\"button is-small\" (click)=\"zoomOut()\">\n <he-svg-icon name=\"minus\" size=\"20\" />\n </button>\n <!-- <button class=\"button is-small\" (click)=\"resetZoom()\">\n <he-svg-icon name=\"collapse\" size=\"20\" />\n </button> -->\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{rx:3px;ry:3px;fill-opacity:.3;stroke-opacity:.3;pointer-events:auto;stroke-width:2}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button{rx:3px;ry:3px;cursor:pointer;pointer-events:auto}:host ::ng-deep .group-button-text{fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line,:host ::ng-deep .group-button-border{stroke-dasharray:2,5;stroke:#b5b5b5;stroke-width:1;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#0a0a0a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{fill:#4a4a4a;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:3px;ry:3px;stroke-width:2;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#fff}:host ::ng-deep .link-path{fill:none;stroke:#b5b5b5}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
|
|
12883
12940
|
}
|
|
12884
12941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: HierarchyChartComponent, decorators: [{
|
|
12885
12942
|
type: Component$1,
|
|
12886
|
-
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></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 </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: ["@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{rx:3px;ry:3px;fill-opacity:.3;stroke-opacity:.3;pointer-events:auto;stroke-width:2}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button{rx:3px;ry:3px;cursor:pointer;pointer-events:auto}:host ::ng-deep .group-button-text{fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line,:host ::ng-deep .group-button-border{stroke-dasharray:2,5;stroke:#b5b5b5;stroke-width:1;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#0a0a0a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{fill:#4a4a4a;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:3px;ry:3px;stroke-width:2;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#fff}:host ::ng-deep .link-path{fill:none;stroke:#b5b5b5}\n"] }]
|
|
12887
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
12943
|
+
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart>\n <g #zoomContainer>\n <g #chartContainer></g>\n </g>\n </svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | zoom-controls\">\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n <button class=\"button is-small\" (click)=\"zoomIn()\">\n <he-svg-icon name=\"plus\" size=\"20\" />\n </button>\n <button class=\"button is-small\" (click)=\"zoomOut()\">\n <he-svg-icon name=\"minus\" size=\"20\" />\n </button>\n <!-- <button class=\"button is-small\" (click)=\"resetZoom()\">\n <he-svg-icon name=\"collapse\" size=\"20\" />\n </button> -->\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width: 1216px){.is-legend-item{min-width:130px}}.zoom-controls{top:0;right:0}.zoom-controls .button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{rx:3px;ry:3px;fill-opacity:.3;stroke-opacity:.3;pointer-events:auto;stroke-width:2}:host ::ng-deep .node-openable{cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button{rx:3px;ry:3px;cursor:pointer;pointer-events:auto}:host ::ng-deep .group-button-text{fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .group-border,:host ::ng-deep .group-line,:host ::ng-deep .group-button-border{stroke-dasharray:2,5;stroke:#b5b5b5;stroke-width:1;fill:none}:host ::ng-deep .group-label{font-weight:700;fill:#4a4a4a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label{font-weight:700;fill:#0a0a0a;text-anchor:middle;alignment-baseline:central}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .bar-label{fill:#4a4a4a;alignment-baseline:central}:host ::ng-deep .sibling-mask{fill:#fafafa;fill-opacity:.8;stroke-opacity:.9;stroke:#fafafa;rx:3px;ry:3px;stroke-width:2;pointer-events:none}:host ::ng-deep .mask-openable{pointer-events:all}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .bar-background{fill:#fff}:host ::ng-deep .link-path{fill:none;stroke:#b5b5b5}\n"] }]
|
|
12944
|
+
}], 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"] }] } });
|
|
12888
12945
|
|
|
12889
12946
|
const filterTermTypes$1 = [
|
|
12890
12947
|
TermTermType.resourceUse,
|
|
@@ -13086,18 +13143,17 @@ const csvHeaders = [
|
|
|
13086
13143
|
'Inputs value',
|
|
13087
13144
|
'Functional Unit'
|
|
13088
13145
|
];
|
|
13089
|
-
// Only show up to N emissions in the breakdown
|
|
13090
|
-
const maximumValues = 20;
|
|
13091
13146
|
const logsTotalValue = (logs, includeNegativeValues) => sum((includeNegativeValues ? logs : logs.filter(curr => curr.value >= 0)).map(v => v.value));
|
|
13092
13147
|
const valueRatio = (value, total) => toPrecision((value * 100) / total, 2);
|
|
13093
13148
|
const chartLabel = (value, total) => {
|
|
13094
13149
|
const ratio = valueRatio(value, total);
|
|
13095
13150
|
return value === 0 ? '0' : `${toPrecision(value, 3)}, ${ratio}%`;
|
|
13096
13151
|
};
|
|
13097
|
-
const chartBreakdownLabel = (logs, total) => {
|
|
13098
|
-
const values = logs.slice(
|
|
13152
|
+
const chartBreakdownLabel = (logs, total, maxValues) => {
|
|
13153
|
+
const values = logs.slice(maxValues);
|
|
13099
13154
|
return values.map(({ blankNodeTermId, value }) => `${blankNodeTermId}: ${chartLabel(value, total)}`).join('</br>');
|
|
13100
13155
|
};
|
|
13156
|
+
const chartTextColor = (value) => (isUndefined(value) ? '#b5b5b5' : '#4a4a4a');
|
|
13101
13157
|
const logToCsv = (logs, impact) => [
|
|
13102
13158
|
csvHeaders.join(','),
|
|
13103
13159
|
...logs
|
|
@@ -13113,9 +13169,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13113
13169
|
this.domSanitizer = inject(DomSanitizer);
|
|
13114
13170
|
this.searchService = inject(HeSearchService);
|
|
13115
13171
|
this.nodeService = inject(HeNodeService);
|
|
13172
|
+
this.responsiveService = inject(ResponsiveService);
|
|
13116
13173
|
this.impactAssessment = input.required(...(ngDevMode ? [{ debugName: "impactAssessment" }] : []));
|
|
13117
13174
|
this.indicators = input([], ...(ngDevMode ? [{ debugName: "indicators" }] : []));
|
|
13118
13175
|
this.tooltip = viewChild.required('tooltip');
|
|
13176
|
+
this.maximumValues = computed(() => (this.responsiveService.isMobile() ? 10 : 20), ...(ngDevMode ? [{ debugName: "maximumValues" }] : []));
|
|
13119
13177
|
this.logsResource = rxResource({
|
|
13120
13178
|
params: () => ({
|
|
13121
13179
|
impactAssessment: this.impactAssessment(),
|
|
@@ -13183,35 +13241,47 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13183
13241
|
this.noData = computed(() => this.nonZeroLogs()?.length === 0, ...(ngDevMode ? [{ debugName: "noData" }] : []));
|
|
13184
13242
|
this.hasNegativeContributions = computed(() => this.nonZeroLogs()?.some(log => log.value < 0), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
|
|
13185
13243
|
this.values = computed(() => {
|
|
13186
|
-
const includedValues = this.nonZeroLogs()?.slice(0, maximumValues);
|
|
13187
|
-
const excludedValues = this.nonZeroLogs()?.slice(maximumValues);
|
|
13244
|
+
const includedValues = this.nonZeroLogs()?.slice(0, this.maximumValues());
|
|
13245
|
+
const excludedValues = this.nonZeroLogs()?.slice(this.maximumValues());
|
|
13188
13246
|
return [
|
|
13189
13247
|
...includedValues,
|
|
13190
13248
|
excludedValues.length
|
|
13191
13249
|
? {
|
|
13192
13250
|
blankNodeTermId: `${excludedValues.length} others`,
|
|
13193
|
-
value: sum(excludedValues.map(({ value }) => value))
|
|
13251
|
+
value: sum(excludedValues.map(({ value }) => value)),
|
|
13252
|
+
subLogs: excludedValues.map(value => ({
|
|
13253
|
+
...value,
|
|
13254
|
+
name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId
|
|
13255
|
+
}))
|
|
13194
13256
|
}
|
|
13195
13257
|
: null
|
|
13196
|
-
]
|
|
13258
|
+
]
|
|
13259
|
+
.filter(Boolean)
|
|
13260
|
+
.map((value, index) => ({
|
|
13261
|
+
...value,
|
|
13262
|
+
name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId,
|
|
13263
|
+
color: listColor(value, index),
|
|
13264
|
+
secondaryColor: listColorWithAlpha()(value, index)
|
|
13265
|
+
}));
|
|
13197
13266
|
}, ...(ngDevMode ? [{ debugName: "values" }] : []));
|
|
13198
13267
|
this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.logs(), this.impactAssessment()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
|
|
13199
13268
|
this.id = computed(() => this.impactAssessment()?.['@id'] || this.impactAssessment()?.id, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
13200
13269
|
this.downloadFilename = computed(() => `${this.id()}-logs.csv`, ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
|
|
13270
|
+
this.displayValue = signal(false, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
13201
13271
|
this.total = computed(() => logsTotalValue(this.nonZeroLogs(), false), ...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
13202
|
-
this.labels = computed(() => this.values().map(({
|
|
13272
|
+
this.labels = computed(() => this.values().map(({ name }) => name), ...(ngDevMode ? [{ debugName: "labels" }] : []));
|
|
13203
13273
|
this.datasets = computed(() => [
|
|
13204
13274
|
{
|
|
13205
13275
|
label: this.selectedTerm()?.name ?? '',
|
|
13206
13276
|
// do not show negative values in the chart
|
|
13207
13277
|
data: this.values().map(({ value }) => Math.max(0, value)),
|
|
13208
|
-
backgroundColor: this.values().map(
|
|
13209
|
-
borderColor: this.values().map(
|
|
13278
|
+
backgroundColor: this.values().map(({ color }) => color),
|
|
13279
|
+
borderColor: this.values().map(({ color }) => color),
|
|
13210
13280
|
barThickness: 2,
|
|
13211
13281
|
barPercentage: 1,
|
|
13212
13282
|
categoryPercentage: 1,
|
|
13213
|
-
hoverBackgroundColor: this.values().map(
|
|
13214
|
-
hoverBorderColor: this.values().map(
|
|
13283
|
+
hoverBackgroundColor: this.values().map(({ secondaryColor }) => secondaryColor),
|
|
13284
|
+
hoverBorderColor: this.values().map(({ secondaryColor }) => secondaryColor),
|
|
13215
13285
|
hoverBorderWidth: 3
|
|
13216
13286
|
}
|
|
13217
13287
|
], ...(ngDevMode ? [{ debugName: "datasets" }] : []));
|
|
@@ -13220,9 +13290,15 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13220
13290
|
lollipopChartPlugin(),
|
|
13221
13291
|
afterBarDrawPlugin({
|
|
13222
13292
|
xPosFn: (x, index, width, chart) => (x || chart.scales['x-axis-0'].getPixelForValue(0)) + 10,
|
|
13223
|
-
|
|
13224
|
-
|
|
13225
|
-
|
|
13293
|
+
colorFn: (m, index, chart, data) => chartTextColor(data),
|
|
13294
|
+
emptyValueLabel: 'No value',
|
|
13295
|
+
...(this.displayValue()
|
|
13296
|
+
? {
|
|
13297
|
+
textFn: ({ label, data }, index) => index === this.maximumValues()
|
|
13298
|
+
? `${label} at ${toPrecision(data)}`
|
|
13299
|
+
: `${toPrecision(data)}`
|
|
13300
|
+
}
|
|
13301
|
+
: { textFn: ({ data }) => `${valueRatio(data, this.total())}%` })
|
|
13226
13302
|
}),
|
|
13227
13303
|
backgroundHoverPlugin({ threshold: 5 })
|
|
13228
13304
|
],
|
|
@@ -13234,10 +13310,16 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13234
13310
|
scales: {
|
|
13235
13311
|
xAxes: [
|
|
13236
13312
|
{
|
|
13313
|
+
display: !this.responsiveService.isMobile(),
|
|
13237
13314
|
scaleLabel: {
|
|
13238
|
-
labelString: this.selectedTerm()
|
|
13315
|
+
labelString: this.selectedTerm()?.units
|
|
13239
13316
|
}
|
|
13240
13317
|
}
|
|
13318
|
+
],
|
|
13319
|
+
yAxes: [
|
|
13320
|
+
{
|
|
13321
|
+
display: !this.responsiveService.isMobile()
|
|
13322
|
+
}
|
|
13241
13323
|
]
|
|
13242
13324
|
}
|
|
13243
13325
|
}
|
|
@@ -13265,23 +13347,26 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
|
|
|
13265
13347
|
}
|
|
13266
13348
|
});
|
|
13267
13349
|
}
|
|
13350
|
+
trackByLog({ blankNodeTermId, modelId, impactTermId }) {
|
|
13351
|
+
return [blankNodeTermId, modelId, impactTermId].join('-');
|
|
13352
|
+
}
|
|
13268
13353
|
showTooltip(index, x, y) {
|
|
13269
13354
|
this.tooltipX.set(x);
|
|
13270
13355
|
this.tooltipY.set(y);
|
|
13271
13356
|
const { value } = this.values()[index] || {};
|
|
13272
13357
|
const text = value
|
|
13273
|
-
? index === maximumValues
|
|
13274
|
-
? chartBreakdownLabel(this.nonZeroLogs(), this.total())
|
|
13358
|
+
? index === this.maximumValues()
|
|
13359
|
+
? chartBreakdownLabel(this.nonZeroLogs(), this.total(), this.maximumValues())
|
|
13275
13360
|
: chartLabel(value, this.total())
|
|
13276
13361
|
: '';
|
|
13277
13362
|
text && setTimeout(() => this.tooltip().open({ data: text }));
|
|
13278
13363
|
}
|
|
13279
13364
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13280
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <
|
|
13365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-mb-3\">\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"is-flex is-justify-content-space-between w-100\">\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"button is-small\"\n type=\"button\"\n aria-haspopup=\"true\"\n aria-controls=\"download-menu\">\n <span class=\"is-pr-1 is-align-middle\">Download</span>\n <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n </button>\n <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"chart.exportAsSvg()\">\n <he-svg-icon size=\"20\" name=\"chart\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n </a>\n\n <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n <he-svg-icon size=\"20\" name=\"table\" />\n <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n id=\"displayValue\"\n name=\"displayValue\"\n [(ngModel)]=\"displayValue\" />\n <label for=\"displayValue\">Show numerical value</label>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"rawHtmlContent\"\n triggers=\"manual\"\n autoClose=\"outside\"\n placement=\"bottom\"\n #tooltip=\"ngbTooltip\"></div>\n\n <ng-template #rawHtmlContent let-rawString=\"data\">\n <div [innerHTML]=\"rawString\"></div>\n </ng-template>\n </he-bar-chart>\n\n @if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n }\n</div>\n\n<div\n class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of values(); track trackByLog(value)) {\n @if (value.subLogs?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.subLogs.length }} others grouped together\n </span>\n }\n\n <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n @if (value.subLogs?.length) {\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (subValue of value.subLogs; track trackByLog(subValue)) {\n <span class=\"is-size-7\">{{ subValue.name }}</span>\n }\n </div>\n } @else {\n <span class=\"is-size-7\">{{ value.name }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13281
13366
|
}
|
|
13282
13367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
|
|
13283
13368
|
type: Component$1,
|
|
13284
|
-
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, BarChartComponent], template: "@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <
|
|
13369
|
+
args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbTooltip, NgbDropdownModule, BarChartComponent], template: "<div class=\"is-mb-3\">\n <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n <div class=\"has-text-center py-3\">\n <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n </div>\n} @else if (terms()?.length) {\n <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n @if (terms()?.length) {\n <div class=\"control is-expanded is-flex-grow-1\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n @if (methods()?.length) {\n <div class=\"control is-expanded\">\n <div class=\"select is-fullwidth is-small\">\n <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n @if (methods().length > 1) {\n <option [ngValue]=\"undefined\">Filter Model</option>\n }\n @for (term of methods(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n }\n\n <div class=\"is-flex is-justify-content-space-between w-100\">\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"button is-small\"\n type=\"button\"\n aria-haspopup=\"true\"\n aria-controls=\"download-menu\">\n <span class=\"is-pr-1 is-align-middle\">Download</span>\n <he-svg-icon name=\"chevron-down\" aria-hidden=\"true\" />\n </button>\n <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <a ngbDropdownItem (click)=\"chart.exportAsSvg()\">\n <he-svg-icon size=\"20\" name=\"chart\" />\n <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n </a>\n\n <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n <he-svg-icon size=\"20\" name=\"table\" />\n <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded is-secondary\"\n id=\"displayValue\"\n name=\"displayValue\"\n [(ngModel)]=\"displayValue\" />\n <label for=\"displayValue\">Show numerical value</label>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n @if (!logsResource.isLoading() && noData()) {\n <p class=\"has-text-centered\">\n <span>No breakdown available for</span>\n @if (selectedTerm()) {\n <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n }\n @if (selectedMethod()) {\n <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n }\n <span>.</span>\n </p>\n }\n\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [max]=\"total()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\">\n <div\n class=\"is-invisible is-absolute | shadow-tooltip\"\n [style.left.px]=\"tooltipX()\"\n [style.top.px]=\"tooltipY()\"\n [ngbTooltip]=\"rawHtmlContent\"\n triggers=\"manual\"\n autoClose=\"outside\"\n placement=\"bottom\"\n #tooltip=\"ngbTooltip\"></div>\n\n <ng-template #rawHtmlContent let-rawString=\"data\">\n <div [innerHTML]=\"rawString\"></div>\n </ng-template>\n </he-bar-chart>\n\n @if (hasNegativeContributions()) {\n <p class=\"is-mt-2 is-italic is-size-7 has-text-center\">\n <span class=\"is-pr-1\">This chart includes negative contributions that will appear as</span>\n <b>0</b>\n <span>.</span>\n </p>\n }\n</div>\n\n<div\n class=\"is-hidden-tablet is-flex is-flex-direction-column is-align-items-flex-start is-gap-4 is-py-1 is-px-2 is-mt-3 is-radius-3 w-100 | breakdown-legend\">\n @for (value of values(); track trackByLog(value)) {\n @if (value.subLogs?.length) {\n <span class=\"has-text-secondary has-text-weight-bold is-size-7\">\n {{ value.subLogs.length }} others grouped together\n </span>\n }\n\n <div class=\"is-flex is-align-items-center is-gap-4 w-100\">\n <div class=\"breakdown-legend--color\" [style.backgroundColor]=\"value.color\"></div>\n\n @if (value.subLogs?.length) {\n <div class=\"is-flex is-flex-direction-column is-gap-4\">\n @for (subValue of value.subLogs; track trackByLog(subValue)) {\n <span class=\"is-size-7\">{{ subValue.name }}</span>\n }\n </div>\n } @else {\n <span class=\"is-size-7\">{{ value.name }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}.shadow-tooltip{width:1px;height:1px;pointer-events:none}he-bar-chart ::ng-deep .chart-container{min-height:400px}@media screen and (max-width: 767px){he-bar-chart ::ng-deep .chart-container{min-height:200px}}@media screen and (max-width: 767px){.chart-area-border{padding:0}}@media screen and (max-width: 767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
|
|
13285
13370
|
}], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], tooltip: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
|
|
13286
13371
|
|
|
13287
13372
|
const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
|
|
@@ -13350,11 +13435,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
|
|
|
13350
13435
|
this.selectedTerm.set(term);
|
|
13351
13436
|
}
|
|
13352
13437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart
|
|
13438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: BarChartComponent, selector: "he-bar-chart", inputs: ["data", "max", "datasets", "labels", "config", "showExportButton"], exportAs: ["barChart"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13354
13439
|
}
|
|
13355
13440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
|
|
13356
13441
|
type: Component$1,
|
|
13357
|
-
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, BarChartComponent], template: "@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart
|
|
13442
|
+
args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgbTooltip, BarChartComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (terms()?.length) {\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n @for (term of terms(); track term) {\n <option [value]=\"term['@id']\">{{ term.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-bar-chart\n #chart=\"barChart\"\n class=\"is-relative h-100\"\n [datasets]=\"datasets()\"\n [labels]=\"labels()\"\n [config]=\"chartConfig()\"\n [showExportButton]=\"false\" />\n</div>\n", styles: [":host{display:block;overflow:visible}he-bar-chart ::ng-deep .chart-container{min-height:400px}\n"] }]
|
|
13358
13443
|
}], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
|
|
13359
13444
|
|
|
13360
13445
|
var View$1;
|
|
@@ -13365,7 +13450,7 @@ var View$1;
|
|
|
13365
13450
|
View["logs"] = "Recalculations logs";
|
|
13366
13451
|
})(View$1 || (View$1 = {}));
|
|
13367
13452
|
const viewIcon$1 = {
|
|
13368
|
-
[View$1.breakdown]: '
|
|
13453
|
+
[View$1.breakdown]: 'breakdown',
|
|
13369
13454
|
[View$1.chart]: 'chart',
|
|
13370
13455
|
[View$1.logs]: 'calculator',
|
|
13371
13456
|
[View$1.table]: 'table'
|
|
@@ -13436,6 +13521,7 @@ class ImpactAssessmentsProductsComponent {
|
|
|
13436
13521
|
dataState: DataState.recalculated
|
|
13437
13522
|
}
|
|
13438
13523
|
: null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
|
|
13524
|
+
this.showSelectImpact = computed(() => [View$1.breakdown, View$1.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectImpact" }] : []));
|
|
13439
13525
|
this.isOriginal = computed(() => this.dataState() === DataState.original, ...(ngDevMode ? [{ debugName: "isOriginal" }] : []));
|
|
13440
13526
|
this.isNodeKeyAllowed = computed(() => nodeKeyViews$1[this.nodeKey()].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "isNodeKeyAllowed" }] : []));
|
|
13441
13527
|
this.shouldFilterByMethodModel = computed(() => this.enableFilterMethodModel() && !this.isOriginal(), ...(ngDevMode ? [{ debugName: "shouldFilterByMethodModel" }] : []));
|
|
@@ -13495,7 +13581,7 @@ class ImpactAssessmentsProductsComponent {
|
|
|
13495
13581
|
component.headerKeys.set(this.headerKeys());
|
|
13496
13582
|
}
|
|
13497
13583
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n <div class=\"column\">\n <div class=\"is-flex is-gap-8\">\n @if (hasData() && selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n @if (selectedView() === View.table) {\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n }\n </div>\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons | button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <div class=\"is-px-3 is-pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n </div>\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n }\n @case (View.breakdown) {\n <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\" />\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13584
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: ImpactAssessmentsProductsComponent, isStandalone: true, selector: "he-impact-assessments-products", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null }, enableFilterMethodModel: { classPropertyName: "enableFilterMethodModel", publicName: "enableFilterMethodModel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n <div class=\"is-hidden-mobile\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "component", type: ImpactAssessmentsIndicatorsChartComponent, selector: "he-impact-assessments-indicators-chart", inputs: ["key", "filterTermTypes"] }, { kind: "component", type: ImpactAssessmentsIndicatorBreakdownChartComponent, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: ["impactAssessment", "indicators"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13499
13585
|
}
|
|
13500
13586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: ImpactAssessmentsProductsComponent, decorators: [{
|
|
13501
13587
|
type: Component$1,
|
|
@@ -13519,7 +13605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
13519
13605
|
EllipsisPipe,
|
|
13520
13606
|
PrecisionPipe,
|
|
13521
13607
|
KeyToLabelPipe
|
|
13522
|
-
], template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n <div class=\"column\">\n <div class=\"is-flex is-gap-8\">\n @if (hasData() && selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n @if (selectedView() === View.table) {\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n }\n </div>\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons | button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <div class=\"is-px-3 is-pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n </div>\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\" />\n }\n @case (View.breakdown) {\n <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\" />\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectImpactAssessment\" />\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\" />\n }\n }\n }\n}\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectImpactAssessment>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
|
|
13608
|
+
], template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n <div class=\"is-hidden-tablet is-mt-3\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n @if (dataKeys().length > 1) {\n <tr class=\"has-text-weight-bold\">\n <th class=\"width-auto\"></th>\n <th></th>\n <th></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @if (isGroupVisible(blankNodes)) {\n <th [attr.colspan]=\"blankNodes.length\" [class.has-border-right]=\"!dataKeyLast\">\n @if (dataKey) {\n <span>{{ dataKey | keyToLabel }}</span>\n }\n </th>\n }\n }\n </tr>\n }\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right is-py-0\">\n <div class=\"is-hidden-mobile\">\n <ng-container *ngTemplateOutlet=\"filterModel\" />\n </div>\n </th>\n <th class=\"has-border-right\"></th>\n <th class=\"has-border-right\"></th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.name\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#functionalUnit'\" target=\"_blank\">Functional unit</a>\n </th>\n <th class=\"has-border-right\">\n <a [href]=\"schemaBaseUrl + '/ImpactAssessment#product'\" target=\"_blank\">Product</a>\n </th>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n <th\n [attr.title]=\"node.value.term.units\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (\n impactAssessment of impactAssessments();\n track trackById(impactIndex, impactAssessment);\n let impactIndex = $index\n ) {\n @let product = productTerm(impactAssessment);\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"impactName(impactAssessment)\">\n <he-node-link [node]=\"impactAssessment\">\n <span>{{ impactIndex + 1 }}. {{ impactName(impactAssessment) }}</span>\n </he-node-link>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.units\">\n <span>1 {{ product?.units }}</span>\n </td>\n <td class=\"has-border-right\" [attr.title]=\"product?.name\">\n @if (product) {\n <he-node-link [node]=\"product\">\n <span>{{ product.name | ellipsis: 30 }}</span>\n </he-node-link>\n }\n </td>\n @for (dataKey of dataKeys(); track dataKey; let dataKeyLast = $last) {\n @let blankNodes = data()[dataKey];\n @for (node of blankNodes; track node.value.term.name; let nodeLast = $last) {\n @if (node.value.visible) {\n @let impactData = node.value.values[impactAssessment['@id']];\n <td\n class=\"is-nowrap\"\n [class.has-border-right]=\"dataKeys().length > 1 && !dataKeyLast && nodeLast\">\n @if (impactData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{\n data: impactData,\n impactAssessment\n }\">\n <span pointer>\n {{ impactData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"impactData.node\"\n key=\"value\"\n [state]=\"impactAssessment.aggregated ? 'aggregated' : undefined\" />\n </span>\n } @else {\n <span>-</span>\n }\n </td>\n }\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n @if (impactAssessments().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n } @else if (noDataMessage()) {\n <div class=\"is-pt-3 has-text-centered\">\n <span>{{ noDataMessage() }}</span>\n </div>\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n <he-impact-assessments-indicators-chart [key]=\"nodeKey()\" [filterTermTypes]=\"filterTermTypes()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicators-chart>\n }\n @case (View.breakdown) {\n @if (selectedNode()) {\n <he-impact-assessments-indicator-breakdown-chart\n [impactAssessment]=\"selectedNode()\"\n [indicators]=\"selectedRecalculatedValues()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-impact-assessments-indicator-breakdown-chart>\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [noDataMessage]=\"noDataMessage()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #filterModel>\n @if (enableFilterMethodModel()) {\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"updateSelectedMethodModel($event.target.value)\">\n <option [ngValue]=\"undefined\">Filter Model</option>\n @for (term of methodModels(); track term) {\n <option [ngValue]=\"term\">{{ term.name }}</option>\n }\n </select>\n </div>\n }\n</ng-template>\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectImpact()) {\n <ng-container *ngTemplateOutlet=\"selectImpact\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectImpact>\n @if (impactAssessments().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary is-nowrap\" for=\"selectImpactAssessment\">Impact Assessment</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectImpactAssessment\">\n @for (value of impactAssessments(); track value; let i = $index) {\n <option [value]=\"i\">{{ i + 1 }}. {{ impactName(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #details let-node=\"impactAssessment\" let-data=\"data\">\n <p>\n <b>\n @if (data.cycle) {\n <span>{{ cycleLabel(node.cycle) }}</span>\n }\n @if (!data.cycle) {\n <span>{{ data.name }}</span>\n }\n </b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}he-data-table ::ng-deep .table thead tr th:nth-child(2),he-data-table ::ng-deep .table tbody tr td:nth-child(2){max-width:102px;width:102px}he-data-table ::ng-deep .table thead tr th:nth-child(3),he-data-table ::ng-deep .table tbody tr td:nth-child(3){min-width:110px}\n"] }]
|
|
13523
13609
|
}], 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 }] }] } });
|
|
13524
13610
|
|
|
13525
13611
|
const hasValidationError = (errors = [], level) => {
|
|
@@ -13932,11 +14018,11 @@ class SitesManagementChartComponent {
|
|
|
13932
14018
|
});
|
|
13933
14019
|
}
|
|
13934
14020
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesManagementChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13935
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (termTypes().length > 1) {\n <he-horizontal-buttons-group
|
|
14021
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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 <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (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: "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: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["termRemoved"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
|
|
13936
14022
|
}
|
|
13937
14023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
|
|
13938
14024
|
type: Component$1,
|
|
13939
|
-
args: [{ selector: 'he-sites-management-chart', imports: [FormsModule, KeyValuePipe, ChartComponent, HorizontalButtonsGroupComponent], template: "@if (termTypes().length > 1) {\n <he-horizontal-buttons-group
|
|
14025
|
+
args: [{ selector: 'he-sites-management-chart', imports: [FormsModule, KeyValuePipe, NgbTooltip, ChartComponent, HorizontalButtonsGroupComponent, HESvgIconComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <button\n class=\"button is-small is-ghost\"\n (click)=\"chart.exportAsSvg()\"\n ngbTooltip=\"Download Chart (SVG)\"\n placement=\"right\">\n <he-svg-icon name=\"download\" />\n </button>\n\n <ng-content />\n</div>\n\n@if (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"] }]
|
|
13940
14026
|
}], ctorParameters: () => [], propDecorators: { site: [{ type: i0.Input, args: [{ isSignal: true, alias: "site", required: true }] }] } });
|
|
13941
14027
|
|
|
13942
14028
|
var View;
|
|
@@ -13984,6 +14070,7 @@ class SitesNodesComponent {
|
|
|
13984
14070
|
this.originalSites = toSignal(this.nodeStoreService.findByState$(NodeType.Site, DataState.original));
|
|
13985
14071
|
this._allSites = toSignal(this.nodeStoreService.find$(NodeType.Site));
|
|
13986
14072
|
this.sites = computed(() => this._allSites()?.map(data => data[this.dataState()]) || [], ...(ngDevMode ? [{ debugName: "sites" }] : []));
|
|
14073
|
+
this.showSelectSite = computed(() => [View.chart, View.logs].includes(this.selectedView()), ...(ngDevMode ? [{ debugName: "showSelectSite" }] : []));
|
|
13987
14074
|
this.selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
|
|
13988
14075
|
this.ogirinalSelectedSite = computed(() => this.originalSites()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "ogirinalSelectedSite" }] : []));
|
|
13989
14076
|
this.selectedSite = computed(() => this.sites()?.[this.selectedIndex()], ...(ngDevMode ? [{ debugName: "selectedSite" }] : []));
|
|
@@ -14033,7 +14120,7 @@ class SitesNodesComponent {
|
|
|
14033
14120
|
component.headerKeys.set(this.headerKeys());
|
|
14034
14121
|
}
|
|
14035
14122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"columns is-variable is-mobile is-align-items-center is-2 is-m-0\">\n <div class=\"column\">\n <div class=\"is-flex is-gap-8\">\n @if (hasData() && selectedView() === View.table) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n @if (selectedView() === View.table) {\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n }\n </div>\n </div>\n @if (views()?.length > 1) {\n <div class=\"column is-narrow\">\n <div class=\"field has-addons | button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon [name]=\"selectedView() === view ? 'checkmark' : viewIcon[view]\" aria-hidden=\"true\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n </div>\n }\n</div>\n\n@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <div class=\"is-px-3 is-pb-3\">\n @if (hasData()) {\n <he-data-table class=\"mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"\n node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\n \"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n <he-node-link [node]=\"site\">\n <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n </he-node-link>\n </td>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n @let siteData = node.value.values[site['@id']];\n <td class=\"is-nowrap\">\n @if (siteData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: siteData, site }\">\n <span pointer>\n {{ siteData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"siteData.node\"\n key=\"value\" />\n </span>\n }\n @if (isMeasurement() && !siteData) {\n <span>\n <span>-</span>\n @if (siteTooBig(site)) {\n <sup class=\"pl-1\">(1)</sup>\n }\n </span>\n }\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-shrink-0 is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n </div>\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n @if (selectedNode()) {\n <div class=\"is-px-3 is-pb-3\">\n <he-sites-management-chart [site]=\"selectedNode()\" />\n </div>\n }\n }\n }\n @case (View.logs) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\" />\n }\n }\n }\n}\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
|
|
14123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SitesNodesComponent, isStandalone: true, selector: "he-sites-nodes", inputs: { dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, enableChart: { classPropertyName: "enableChart", publicName: "enableChart", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n <he-node-link [node]=\"site\">\n <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n </he-node-link>\n </td>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n @let siteData = node.value.values[site['@id']];\n <td class=\"is-nowrap\">\n @if (siteData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: siteData, site }\">\n <span pointer>\n {{ siteData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"siteData.node\"\n key=\"value\" />\n </span>\n }\n @if (isMeasurement() && !siteData) {\n <span>\n <span>-</span>\n @if (siteTooBig(site)) {\n <sup class=\"pl-1\">(1)</sup>\n }\n </span>\n }\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n @if (selectedNode()) {\n <he-sites-management-chart [site]=\"selectedNode()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-sites-management-chart>\n }\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectSite()) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: SearchExtendComponent, selector: "he-search-extend", inputs: ["value", "disabled", "placeholder", "class"], outputs: ["valueChange", "searchText"] }, { kind: "component", type: DataTableComponent, selector: "he-data-table", inputs: ["minHeight", "maxHeight", "small"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: TermsUnitsDescriptionComponent, selector: "he-terms-units-description", inputs: ["term", "iconTemplate"] }, { kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: BlankNodeStateComponent, selector: "he-blank-node-state", inputs: ["dataState", "nodeType", "dataKey", "key", "node", "state", "linkClass"] }, { kind: "component", type: BlankNodeStateNoticeComponent, selector: "he-blank-node-state-notice", inputs: ["dataState", "showDeleted"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeLogsModelsComponent, selector: "he-node-logs-models", inputs: ["node", "nodeKey", "originalValues", "recalculatedValues", "terms", "filterTermTypes", "filterTermTypesLabel", "logsKey", "noDataMessage"] }, { kind: "component", type: NodeValueDetailsComponent, selector: "he-node-value-details", inputs: ["data", "nodeType", "dataState", "dataKey"] }, { kind: "component", type: SitesManagementChartComponent, selector: "he-sites-management-chart", inputs: ["site"] }, { kind: "pipe", type: CompoundPipe, name: "compound" }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }] }); }
|
|
14037
14124
|
}
|
|
14038
14125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SitesNodesComponent, decorators: [{
|
|
14039
14126
|
type: Component$1,
|
|
@@ -14056,7 +14143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
|
|
|
14056
14143
|
PrecisionPipe,
|
|
14057
14144
|
CapitalizePipe,
|
|
14058
14145
|
SitesManagementChartComponent
|
|
14059
|
-
], template: "
|
|
14146
|
+
], template: "@if (isNodeKeyAllowed()) {\n @switch (selectedView()) {\n @case (View.table) {\n <ng-container *ngTemplateOutlet=\"selectView\" />\n\n @if (hasData()) {\n <he-data-table class=\"is-mt-3 is-mb-1 is-bordered\" [small]=\"true\" maxHeight=\"320\">\n <table class=\"table is-fullwidth is-narrow is-striped\">\n <thead>\n <tr class=\"has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.name\">\n <he-node-link [node]=\"node.value.term\">\n <span\n [innerHtml]=\"node.value.term.name | ellipsis: 30 | compound: node.value.term.termType\"></span>\n </he-node-link>\n </th>\n }\n }\n </tr>\n <tr class=\"is-italic has-text-weight-semibold\">\n <th class=\"width-auto has-border-right\"></th>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n <th [attr.title]=\"node.value.term.units\">\n <span [innerHtml]=\"node.value.term.units | compound: node.value.term.termType\"></span>\n <he-terms-units-description class=\"is-inline-block is-ml-2\" [term]=\"node.value.term\" />\n </th>\n }\n }\n </tr>\n </thead>\n <tbody>\n @for (site of sites(); track trackById(siteIndex, site); let siteIndex = $index) {\n <tr>\n <td class=\"width-auto has-border-right\" [attr.title]=\"defaultLabel(site)\">\n <he-node-link [node]=\"site\">\n <span>{{ siteIndex + 1 }}. {{ defaultLabel(site) }}</span>\n </he-node-link>\n </td>\n @for (node of data(); track node.value.term.name) {\n @if (node.value.visible) {\n @let siteData = node.value.values[site['@id']];\n <td class=\"is-nowrap\">\n @if (siteData) {\n <span\n class=\"trigger-popover\"\n [ngbPopover]=\"details\"\n autoClose=\"outside\"\n popoverClass=\"is-narrow is-overflow-visible\"\n placement=\"left bottom auto\"\n container=\"body\"\n [popoverContext]=\"{ data: siteData, site }\">\n <span pointer>\n {{ siteData.propertyValue | precision: 3 | default: '-' }}\n </span>\n <he-blank-node-state\n class=\"ml-1\"\n [dataState]=\"dataState()\"\n [node]=\"siteData.node\"\n key=\"value\" />\n </span>\n }\n @if (isMeasurement() && !siteData) {\n <span>\n <span>-</span>\n @if (siteTooBig(site)) {\n <sup class=\"pl-1\">(1)</sup>\n }\n </span>\n }\n </td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n </he-data-table>\n <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-justify-content-space-between\">\n <he-blank-node-state-notice [dataState]=\"dataState()\" />\n <div class=\"is-flex is-flex-wrap-wrap is-gap-8\">\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideZeroValues'\"\n name=\"hideZeroValues\"\n [(ngModel)]=\"hideZeroValues\" />\n <label [for]=\"componentId() + 'hideZeroValues'\">\n <span>\n Hide\n <b>0</b>\n values\n </span>\n </label>\n </div>\n @if (sites().length > 1) {\n <div class=\"field is-relative is-mb-0\">\n <input\n type=\"checkbox\"\n class=\"switch is-small is-rounded\"\n [id]=\"componentId() + 'hideIdenticalValues'\"\n name=\"hideIdenticalValues\"\n [(ngModel)]=\"hideIdenticalValues\" />\n <label [for]=\"componentId() + 'hideIdenticalValues'\">\n <span>Hide identical values</span>\n </label>\n </div>\n }\n </div>\n </div>\n @if (showAreaTooBig()) {\n <p class=\"is-size-7 is-italic\">\n (1) This region is >{{ maxAreaSize }}km2 and is too large to reliably gap fill Measurements.\n </p>\n }\n } @else {\n <div class=\"is-pt-3 has-text-centered\">\n <span>No data available</span>\n @if (filterTerm()) {\n <span class=\"is-pl-1\">matching your search criteria</span>\n }\n <span>.</span>\n @if (showSwitchToRecalculated()) {\n <span>\n Switch to\n <code>recalculated</code>\n version.\n </span>\n }\n </div>\n }\n }\n @case (View.chart) {\n @if (nodeKey() === BlankNodesKey.management) {\n @if (selectedNode()) {\n <he-sites-management-chart [site]=\"selectedNode()\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-sites-management-chart>\n }\n }\n }\n @case (View.logs) {\n @if (selectedNode()) {\n <he-node-logs-models\n [node]=\"selectedNode()\"\n [nodeKey]=\"nodeKey()\"\n [originalValues]=\"selectedOriginalValues()\"\n [recalculatedValues]=\"selectedRecalculatedValues()\"\n [filterTermTypes]=\"filterTermTypes()\"\n [filterTermTypesLabel]=\"nodeKey() | capitalize\">\n <ng-container *ngTemplateOutlet=\"selectView\" />\n </he-node-logs-models>\n }\n }\n }\n}\n\n<ng-template #selectView>\n <div class=\"is-flex is-gap-8 is-align-items-center is-justify-content-space-between\">\n @if (selectedView() === View.table) {\n <div class=\"is-flex is-gap-8 is-align-items-center\">\n @if (hasData()) {\n <button class=\"button is-small is-ghost\" (click)=\"showDownload()\">\n <he-svg-icon name=\"download\" />\n </button>\n }\n\n <he-search-extend\n class=\"is-secondary\"\n placeholder=\"Filter terms by name\"\n (searchText)=\"filterTerm.set($event)\" />\n </div>\n }\n\n @if (showSelectSite()) {\n <ng-container *ngTemplateOutlet=\"selectSite\" />\n }\n\n @if (views()?.length > 1) {\n <div class=\"field has-addons button-segments\">\n @for (view of views(); track view) {\n <div class=\"control\">\n <button\n class=\"button is-small\"\n [class.is-selected]=\"selectedView() === view\"\n (click)=\"selectedView.set(view)\">\n <he-svg-icon\n name=\"checkmark\"\n aria-hidden=\"true\"\n class=\"is-hidden-mobile\"\n [class.is-hidden-tablet]=\"selectedView() !== view\" />\n <he-svg-icon\n [name]=\"viewIcon[view]\"\n aria-hidden=\"true\"\n [class.is-hidden-tablet]=\"selectedView() === view\" />\n <span class=\"is-hidden-mobile\">{{ view }}</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #selectSite>\n @if (sites().length > 1) {\n <div class=\"field is-horizontal is-mb-0\">\n <div class=\"field-label is-normal\">\n <label class=\"label has-text-secondary\" for=\"selectSite\">Site</label>\n </div>\n <div class=\"field-body\">\n <div class=\"field\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select (change)=\"selectIndex($event)\" if=\"selectSite\">\n @for (value of sites(); track value; let siteIndex = $index) {\n <option [value]=\"siteIndex\">{{ siteIndex + 1 }}. {{ defaultLabel(value) }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n</ng-template>\n\n<ng-template #emptyValue>\n <span>-</span>\n</ng-template>\n\n<ng-template #details let-node=\"site\" let-data=\"data\">\n <p>\n <b>{{ node.name }}</b>\n </p>\n <he-node-value-details\n class=\"is-overflow-visible\"\n [data]=\"data\"\n [dataState]=\"dataState()\"\n [nodeType]=\"node['@type']\"\n [dataKey]=\"nodeKey()\" />\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
14060
14147
|
}], 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 }] }] } });
|
|
14061
14148
|
|
|
14062
14149
|
class TermsPropertyContentComponent {
|