@hestia-earth/ui-components 0.43.11 → 0.43.13

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

@@ -6899,7 +6899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
-    lightBlue: 'rgba(132, 160, 220, 1)'
+    lightBlue: 'rgba(132, 160, 220, 1)',
+    // `$warning` — marks the reported value, and is the one colour that reads against both a white
+    // page and the dark blue popover the parametric chart is shown in
+    orange: 'rgba(255, 136, 27, 1)'
 };
 const opaqueColor = (color, opacity = 0.5) => color.replace(', 1)', `, ${opacity})`);
 const defaultSettings$1 = Object.freeze({
@@ -6960,6 +6963,96 @@ const createDynamicHistogramData = (values, numberOfBins) => {
     frequencies[numberOfBins - 1] += values.filter(p => p === max).length;
     return { labels, frequencies };
 };
+/**
+ * Parametric mode: how far either side of the mean the curve is drawn, in standard deviations.
+ * Four covers ~99.99% of the density, so the tails are visually flat by the time it stops.
+ */
+const curveSpread = 4;
+const curvePoints = 120;
+/** Fraction of the drawn range kept clear at each end, so a marker on the edge is not clipped. */
+const curvePadding = 0.05;
+const normalPdf = (x, mu, sd) => Math.exp(-0.5 * ((x - mu) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI));
+/**
+ * The x range to draw. The reported value is included when it is known, because the whole point of
+ * the chart is to show how far outside the interval it sits — clipping it to the curve would hide
+ * exactly what the reader came to see.
+ */
+const curveRange = (mu, sd, value, minX) => {
+    const values = [mu - curveSpread * sd, mu + curveSpread * sd, ...(Number.isFinite(value) ? [value] : [])];
+    const from = Math.min(...values);
+    const to = Math.max(...values);
+    const padding = (to - from) * curvePadding;
+    // a fitted normal has mass either side of the mean, but the quantity it describes may not:
+    // drawing a physical amount below its floor invites the reader to think that is possible
+    return { from: Number.isFinite(minX) ? Math.max(from - padding, minX) : from - padding, to: to + padding };
+};
+/** Samples the normal PDF, as `{x, y}` points for a linear x axis. */
+const createNormalCurve = (mu, sd, value, minX) => {
+    const { from, to } = curveRange(mu, sd, value, minX);
+    return Array.from({ length: curvePoints + 1 }, (_, index) => from + ((to - from) * index) / curvePoints).map(x => ({
+        x,
+        y: normalPdf(x, mu, sd)
+    }));
+};
+/**
+ * The shaded confidence interval, the mean, and the vertical marker at the reported value.
+ *
+ * The mean earns its line: the y axis is a probability density, whose absolute value means nothing
+ * to a reader, so without it there is no way to tell what the peak of the curve represents.
+ */
+const distributionAnnotations = (min, max, value, mean) => ({
+    ...(Number.isFinite(min) && Number.isFinite(max)
+        ? {
+            interval: {
+                type: 'box',
+                xMin: min,
+                xMax: max,
+                backgroundColor: opaqueColor(colors.lightBlue, 0.3),
+                borderWidth: 0,
+                drawTime: 'beforeDatasetsDraw'
+            }
+        }
+        : {}),
+    ...(Number.isFinite(mean)
+        ? {
+            mean: {
+                type: 'line',
+                xMin: mean,
+                xMax: mean,
+                borderColor: colors.lightBlue,
+                borderWidth: 1,
+                borderDash: [4, 4],
+                label: {
+                    display: true,
+                    content: 'average',
+                    position: 'start',
+                    backgroundColor: colors.lightBlue,
+                    color: colors.darkBlue,
+                    font: { size: 9 }
+                }
+            }
+        }
+        : {}),
+    ...(Number.isFinite(value)
+        ? {
+            value: {
+                type: 'line',
+                xMin: value,
+                xMax: value,
+                borderColor: colors.orange,
+                borderWidth: 2,
+                label: {
+                    display: true,
+                    content: `${transform(value, 3, true)}`,
+                    position: 'start',
+                    backgroundColor: colors.orange,
+                    color: '#fff',
+                    font: { size: 10 }
+                }
+            }
+        }
+        : {})
+});
 const createSinglePointDataset = (labels, pointValue) => {
     // Create an array with the same length as the labels, filled with nulls.
     const pointData = new Array(labels.length).fill(null);
@@ -7003,6 +7096,34 @@ class DistributionChartComponent {
          */
         this.maxPercentile = input(0, ...(ngDevMode ? [{ debugName: "maxPercentile" }] : []));
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Parametric mode: the mean of the distribution. Set `mu` and `sd` to plot the normal curve
+         * instead of binning `distribution` into a histogram — used where only the parameters are known
+         * and there are no samples to bin.
+         */
+        this.mu = input(...(ngDevMode ? [undefined, { debugName: "mu" }] : []));
+        /**
+         * Parametric mode: the standard deviation of the distribution. See `mu`.
+         */
+        this.sd = input(...(ngDevMode ? [undefined, { debugName: "sd" }] : []));
+        /**
+         * Parametric mode: lower bound of the confidence interval to shade.
+         */
+        this.intervalMin = input(...(ngDevMode ? [undefined, { debugName: "intervalMin" }] : []));
+        /**
+         * Parametric mode: upper bound of the confidence interval to shade.
+         */
+        this.intervalMax = input(...(ngDevMode ? [undefined, { debugName: "intervalMax" }] : []));
+        /**
+         * Parametric mode: floor for the drawn range, for a quantity that cannot go below it — pass `0`
+         * for a physical amount. Left unset the curve is drawn symmetrically about `mu`.
+         */
+        this.minX = input(...(ngDevMode ? [undefined, { debugName: "minX" }] : []));
+        /**
+         * `sd` must be strictly positive: a zero or negative deviation makes the PDF a division by zero.
+         */
+        this.parametric = computed(() => Number.isFinite(this.mu()) && Number.isFinite(this.sd()) && this.sd() > 0, ...(ngDevMode ? [{ debugName: "parametric" }] : []));
+        this.curve = computed(() => createNormalCurve(this.mu(), this.sd(), this.value(), this.minX()), ...(ngDevMode ? [{ debugName: "curve" }] : []));
         this.maxPercentileValue = computed(() => this.maxPercentile() ? getPercentileValue(this.distribution(), this.maxPercentile()) : null, ...(ngDevMode ? [{ debugName: "maxPercentileValue" }] : []));
         this.groupedData = computed(() => createDynamicHistogramData(this.maxPercentileValue()
             ? (this.distribution() ?? []).filter(v => v <= this.maxPercentileValue())
@@ -7050,7 +7171,51 @@ class DistributionChartComponent {
                 }
             }
         }), ...(ngDevMode ? [{ debugName: "defaultConfig" }] : []));
-        this.dataConfig = computed(() => ({
+        /**
+         * The x axis is `linear` here, not the category axis the histogram uses: the curve is `{x, y}`
+         * points, and the annotations position the interval and the marker at real x values.
+         */
+        this.parametricConfig = computed(() => ({
+            options: {
+                plugins: {
+                    annotation: {
+                        annotations: distributionAnnotations(this.intervalMin(), this.intervalMax(), this.value(), this.mu())
+                    }
+                },
+                scales: {
+                    x: {
+                        type: 'linear',
+                        display: true,
+                        ticks: {
+                            font: {
+                                family: defaultTicksFont.family,
+                                size: 10,
+                                weight: 400
+                            },
+                            color: '#4A4A4A',
+                            callback: value => `${transform(value, 3, true)}`
+                        },
+                        title: {
+                            display: true,
+                            text: this.label()
+                        }
+                    },
+                    y: {
+                        // the density itself carries no meaning for the reader, only the shape does
+                        ticks: {
+                            display: false
+                        },
+                        grid: {
+                            display: false
+                        },
+                        title: {
+                            display: false
+                        }
+                    }
+                }
+            }
+        }), ...(ngDevMode ? [{ debugName: "parametricConfig" }] : []));
+        this.histogramData = computed(() => ({
             datasets: [
                 this.distribution()
                     ? [
@@ -7089,16 +7254,32 @@ class DistributionChartComponent {
                     : []
             ].flat(),
             labels: this.groupedData().labels
-        }), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
-        this.configuration = computed(() => merge$1({}, defaultSettings$1, this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        }), ...(ngDevMode ? [{ debugName: "histogramData" }] : []));
+        this.parametricData = computed(() => ({
+            datasets: [
+                {
+                    label: 'Distribution',
+                    data: this.curve(),
+                    backgroundColor: opaqueColor(colors.lightBlue, 0.2),
+                    // light enough to read on a dark panel, dark enough to read on a white one
+                    borderColor: colors.lightBlue,
+                    borderWidth: 1,
+                    fill: true,
+                    pointRadius: 0,
+                    type: 'line'
+                }
+            ]
+        }), ...(ngDevMode ? [{ debugName: "parametricData" }] : []));
+        this.dataConfig = computed(() => this.parametric() ? this.parametricData() : this.histogramData(), ...(ngDevMode ? [{ debugName: "dataConfig" }] : []));
+        this.configuration = computed(() => merge$1({}, defaultSettings$1, this.parametric() ? this.parametricConfig() : this.defaultConfig(), this.config()), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DistributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 } }, exportAs: ["distributionChart"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 }, mu: { classPropertyName: "mu", publicName: "mu", isSignal: true, isRequired: false, transformFunction: null }, sd: { classPropertyName: "sd", publicName: "sd", isSignal: true, isRequired: false, transformFunction: null }, intervalMin: { classPropertyName: "intervalMin", publicName: "intervalMin", isSignal: true, isRequired: false, transformFunction: null }, intervalMax: { classPropertyName: "intervalMax", publicName: "intervalMax", isSignal: true, isRequired: false, transformFunction: null }, minX: { classPropertyName: "minX", publicName: "minX", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["distributionChart"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DistributionChartComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-distribution-chart', exportAs: 'distributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], nbBins: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbBins", required: false }] }], maxPercentile: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPercentile", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+        }], propDecorators: { distribution: [{ type: i0.Input, args: [{ isSignal: true, alias: "distribution", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], nbBins: [{ type: i0.Input, args: [{ isSignal: true, alias: "nbBins", required: false }] }], maxPercentile: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPercentile", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], mu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mu", required: false }] }], sd: [{ type: i0.Input, args: [{ isSignal: true, alias: "sd", required: false }] }], intervalMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMin", required: false }] }], intervalMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMax", required: false }] }], minX: [{ type: i0.Input, args: [{ isSignal: true, alias: "minX", required: false }] }] } });
 
 const defaultSettings = Object.freeze({
     type: 'line',
@@ -9130,6 +9311,39 @@ const toTextParts = (value) => {
     return parts;
 };
 
+/**
+ * A titled block that can be folded away, with room for a control beside its heading.
+ *
+ * Presentation only: it holds no opinion on what it contains, so several of them stacked read as
+ * one document a reader can collapse section by section.
+ */
+class CollapsibleBlockComponent {
+    constructor() {
+        /**
+         * The label above the content.
+         */
+        this.heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+        /**
+         * Whether the block can be folded away. Turn it off and it renders as a plain titled block.
+         */
+        this.collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        /**
+         * Whether the content is shown. Two-way, so the caller can fold a block from outside.
+         */
+        this.open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    }
+    toggle() {
+        if (this.collapsible())
+            this.open.set(!this.open());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CollapsibleBlockComponent, isStandalone: true, selector: "he-collapsible-block", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "<div class=\"collapsible-block is-mb-2\">\n  <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n    <span\n      class=\"is-flex is-align-items-center is-gap-4 is-uppercase has-text-weight-semibold\"\n      [class.is-clickable]=\"collapsible()\"\n      (click)=\"toggle()\">\n      @if (collapsible()) {\n        <he-svg-icon [name]=\"open() ? 'chevron-down' : 'chevron-right'\" />\n      }\n      <span>{{ heading() }}</span>\n    </span>\n\n    <!-- a control that belongs to the block rather than to its content, e.g. a display switch -->\n    <ng-content select=\"[blockActions]\" />\n  </div>\n\n  @if (open()) {\n    <ng-content />\n  }\n</div>\n", styles: [".collapsible-block{border-bottom:1px solid rgba(255,255,255,.2)}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CollapsibleBlockComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-collapsible-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent], template: "<div class=\"collapsible-block is-mb-2\">\n  <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n    <span\n      class=\"is-flex is-align-items-center is-gap-4 is-uppercase has-text-weight-semibold\"\n      [class.is-clickable]=\"collapsible()\"\n      (click)=\"toggle()\">\n      @if (collapsible()) {\n        <he-svg-icon [name]=\"open() ? 'chevron-down' : 'chevron-right'\" />\n      }\n      <span>{{ heading() }}</span>\n    </span>\n\n    <!-- a control that belongs to the block rather than to its content, e.g. a display switch -->\n    <ng-content select=\"[blockActions]\" />\n  </div>\n\n  @if (open()) {\n    <ng-content />\n  }\n</div>\n", styles: [".collapsible-block{border-bottom:1px solid rgba(255,255,255,.2)}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
+
 /**
  * Displays a set of formulas with the variables documented under them, and a switch between the
  * symbolic and the substituted view.
@@ -9167,10 +9381,19 @@ class FormulaBlockComponent {
          * several blocks: they share one state, so repeating the switch only repeats the same control.
          */
         this.showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : []));
+        /**
+         * Whether the block can be folded away, so a reader can put aside the part they are not reading.
+         */
+        this.collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+        /**
+         * Whether the block is unfolded. Two-way, so the caller can fold it from outside.
+         */
+        this.open = model(true, ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * Whether the substituted view is shown. Two-way, so the caller can render accordingly.
          */
         this.substituted = model(false, ...(ngDevMode ? [{ debugName: "substituted" }] : []));
+        this.blockHeading = computed(() => this.heading() || `Formula${this.formulas().length > 1 ? 's' : ''}`, ...(ngDevMode ? [{ debugName: "blockHeading" }] : []));
         // unique per instance so a label only toggles its own checkbox - several can co-exist on a page
         this.toggleId = uuid('formulaSubstituted-');
         /**
@@ -9192,12 +9415,12 @@ class FormulaBlockComponent {
         this.substituted.set(!this.substituted());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormulaBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FormulaBlockComponent, isStandalone: true, selector: "he-formula-block", inputs: { formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, hasSubstitutions: { classPropertyName: "hasSubstitutions", publicName: "hasSubstitutions", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "@if (items().length) {\n  <div class=\"formula-block is-mb-2\">\n    <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n      <span class=\"is-uppercase has-text-weight-semibold\">\n        {{ heading() || 'Formula' + (items().length > 1 ? 's' : '') }}\n      </span>\n      @if (showToggle()) {\n        <div class=\"field\">\n          <input\n            type=\"checkbox\"\n            class=\"switch is-small is-rounded\"\n            [id]=\"toggleId\"\n            [checked]=\"substituted()\"\n            [disabled]=\"!hasSubstitutions()\"\n            (change)=\"toggle()\" />\n          <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n            <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n          </label>\n        </div>\n      }\n    </div>\n\n    @if (note()) {\n      <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n    }\n\n    @for (item of items(); track $index) {\n      @if (item.section) {\n        <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n      }\n\n      @if (item.contextParts.length) {\n        <p class=\"is-size-7 is-mt-1 | formula-context\">\n          <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n        </p>\n      }\n\n      <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n      @if (item.variables.length) {\n        <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n          @for (variable of item.variables; track $index) {\n            <li>\n              <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                <span class=\"formula-variable-symbol is-nowrap\">\n                  <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                  @if (variable.descriptionParts.length) {\n                    <span>:</span>\n                  }\n                </span>\n                @if (variable.descriptionParts.length) {\n                  <span class=\"is-italic | formula-variable-desc\">\n                    <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                  </span>\n                }\n                @if (variable.note) {\n                  <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                } @else if (variable.missing) {\n                  <span class=\"has-text-warning\">(missing)</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      }\n    }\n  </div>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FormulaBlockComponent, isStandalone: true, selector: "he-formula-block", inputs: { formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, hasSubstitutions: { classPropertyName: "hasSubstitutions", publicName: "hasSubstitutions", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", substituted: "substitutedChange" }, ngImport: i0, template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: CollapsibleBlockComponent, selector: "he-collapsible-block", inputs: ["heading", "collapsible", "open"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormulaBlockComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-formula-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, KatexDirective, MarkdownComponent], template: "@if (items().length) {\n  <div class=\"formula-block is-mb-2\">\n    <div class=\"is-flex is-align-items-center is-justify-content-space-between is-gap-8 is-mb-1 is-size-8\">\n      <span class=\"is-uppercase has-text-weight-semibold\">\n        {{ heading() || 'Formula' + (items().length > 1 ? 's' : '') }}\n      </span>\n      @if (showToggle()) {\n        <div class=\"field\">\n          <input\n            type=\"checkbox\"\n            class=\"switch is-small is-rounded\"\n            [id]=\"toggleId\"\n            [checked]=\"substituted()\"\n            [disabled]=\"!hasSubstitutions()\"\n            (change)=\"toggle()\" />\n          <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n            <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n          </label>\n        </div>\n      }\n    </div>\n\n    @if (note()) {\n      <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n    }\n\n    @for (item of items(); track $index) {\n      @if (item.section) {\n        <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n      }\n\n      @if (item.contextParts.length) {\n        <p class=\"is-size-7 is-mt-1 | formula-context\">\n          <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n        </p>\n      }\n\n      <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n      @if (item.variables.length) {\n        <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n          @for (variable of item.variables; track $index) {\n            <li>\n              <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                <span class=\"formula-variable-symbol is-nowrap\">\n                  <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                  @if (variable.descriptionParts.length) {\n                    <span>:</span>\n                  }\n                </span>\n                @if (variable.descriptionParts.length) {\n                  <span class=\"is-italic | formula-variable-desc\">\n                    <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                  </span>\n                }\n                @if (variable.note) {\n                  <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                } @else if (variable.missing) {\n                  <span class=\"has-text-warning\">(missing)</span>\n                }\n              </div>\n            </li>\n          }\n        </ul>\n      }\n    }\n  </div>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [".formula-block{border-bottom:1px solid rgba(255,255,255,.2)}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"] }]
-        }], propDecorators: { formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], hasSubstitutions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubstitutions", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
+            args: [{ selector: 'he-formula-block', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, KatexDirective, MarkdownComponent, CollapsibleBlockComponent], template: "@if (items().length) {\n  <he-collapsible-block [heading]=\"blockHeading()\" [collapsible]=\"collapsible()\" [(open)]=\"open\">\n    @if (showToggle()) {\n      <div blockActions class=\"field\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded\"\n          [id]=\"toggleId\"\n          [checked]=\"substituted()\"\n          [disabled]=\"!hasSubstitutions()\"\n          (change)=\"toggle()\" />\n        <label [for]=\"toggleId\" [title]=\"hasSubstitutions() ? '' : emptyTitle()\">\n          <span>{{ substituted() ? 'Substituted' : 'Raw' }}</span>\n        </label>\n      </div>\n    }\n\n    <div class=\"formula-block\">\n      @if (note()) {\n        <p class=\"is-size-8 is-mb-1 | formula-note\">{{ note() }}</p>\n      }\n\n      @for (item of items(); track $index) {\n        @if (item.section) {\n          <p class=\"is-size-8 is-uppercase has-text-weight-semibold is-mt-2 | formula-section\">{{ item.section }}</p>\n        }\n\n        @if (item.contextParts.length) {\n          <p class=\"is-size-7 is-mt-1 | formula-context\">\n            <ng-container *ngTemplateOutlet=\"textParts; context: { parts: item.contextParts }\" />\n          </p>\n        }\n\n        <div class=\"formula\" [heKatex]=\"item.rendered\"></div>\n\n        @if (item.variables.length) {\n          <ul class=\"is-size-7 is-mt-1 is-mb-2 is-list-style-disc | formula-variables\">\n            @for (variable of item.variables; track $index) {\n              <li>\n                <div class=\"is-flex is-align-items-baseline is-gap-4\">\n                  <span class=\"formula-variable-symbol is-nowrap\">\n                    <span [heKatex]=\"variable.symbol\" [heKatexInline]=\"true\"></span>\n                    @if (variable.descriptionParts.length) {\n                      <span>:</span>\n                    }\n                  </span>\n                  @if (variable.descriptionParts.length) {\n                    <span class=\"is-italic | formula-variable-desc\">\n                      <ng-container *ngTemplateOutlet=\"textParts; context: { parts: variable.descriptionParts }\" />\n                    </span>\n                  }\n                  @if (variable.note) {\n                    <span class=\"formula-variable-note\">({{ variable.note }})</span>\n                  } @else if (variable.missing) {\n                    <span class=\"has-text-warning\">(missing)</span>\n                  }\n                </div>\n              </li>\n            }\n          </ul>\n        }\n      }\n    </div>\n  </he-collapsible-block>\n}\n\n<!-- documentation text: the symbols it names render as math, the rest as markdown -->\n<ng-template #textParts let-parts=\"parts\">\n  @for (part of parts; track $index) {\n    @if (part.math) {\n      <span class=\"formula-inline-math\" [heKatex]=\"part.math\" [heKatexInline]=\"true\"></span>\n    } @else {\n      <markdown class=\"is-inline-block\" [data]=\"part.text\" />\n    }\n  }\n</ng-template>\n", styles: [":host{display:block}.formula-section{opacity:.7;letter-spacing:.03em}.formula-note{opacity:.7}.formula-context{opacity:.9}.formula-variables{padding-inline-start:1rem}.formula-variable-symbol{flex-shrink:0}.formula-variable-symbol ::ng-deep .katex{font-size:1em}.formula-variable-desc{opacity:.85}.formula-variable-note{opacity:.7;white-space:nowrap}.formula-context ::ng-deep markdown,.formula-context ::ng-deep markdown *,.formula-variable-desc ::ng-deep markdown,.formula-variable-desc ::ng-deep markdown *{display:inline;margin:0;white-space:pre-wrap}.formula-context .formula-inline-math ::ng-deep .katex,.formula-variable-desc .formula-inline-math ::ng-deep .katex{font-size:1em}.formula{overflow-x:auto;overflow-y:hidden}.formula ::ng-deep .katex-display{margin:.35rem 0}\n"] }]
+        }], propDecorators: { formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], hasSubstitutions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSubstitutions", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
 
 const isMissing$1 = (value) => value === undefined || value === null || value === '';
 // the result symbol (left-hand side) - it is the model's output, not an input that "was not logged", so
@@ -9350,7 +9573,7 @@ class NodeLogsModelsFormulaComponent {
         return omitKeys(values, omit);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsFormulaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NodeLogsModelsFormulaComponent, isStandalone: true, selector: "he-node-logs-models-formula", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, logs: { classPropertyName: "logs", publicName: "logs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "<he-formula-block\n  [formulas]=\"renderedFormulas()\"\n  [hasSubstitutions]=\"hasSubstitutions()\"\n  [(substituted)]=\"substituted\" />\n", dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "substituted"], outputs: ["substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: NodeLogsModelsFormulaComponent, isStandalone: true, selector: "he-node-logs-models-formula", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, logs: { classPropertyName: "logs", publicName: "logs", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "<he-formula-block\n  [formulas]=\"renderedFormulas()\"\n  [hasSubstitutions]=\"hasSubstitutions()\"\n  [(substituted)]=\"substituted\" />\n", dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "collapsible", "open", "substituted"], outputs: ["openChange", "substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeLogsModelsFormulaComponent, decorators: [{
             type: Component$1,
@@ -11549,7 +11772,7 @@ class NodeValueDetailsComponent {
         this.updateKeys(selectedKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null }, aggregated: { classPropertyName: "aggregated", publicName: "aggregated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1 is-inline-block\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null }, aggregated: { classPropertyName: "aggregated", publicName: "aggregated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  @if (node().distribution?.length) {\n    <p>\n      <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n        <b>distribution</b>\n      </a>\n      <span class=\"pr-2\">:</span>\n      <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n    </p>\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <ng-container *ngTemplateOutlet=\"showModels\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\"\n      [maxPercentile]=\"0.99\" />\n  </div>\n}\n\n<ng-template #showModels>\n  @if (models().length) {\n    <p>\n      <span class=\"is-inline-block\">\n        <b>possible models used</b>\n      </span>\n      <span class=\"pr-2\">:</span>\n      @for (model of models(); track model; let lastModel = $last) {\n        <a class=\"is-dark\" [href]=\"model.link\">{{ model.name }}</a>\n        @if (!lastModel) {\n          <span class=\"is-pr-1 is-inline-block\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config", "mu", "sd", "intervalMin", "intervalMax", "minX"], exportAs: ["distributionChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeValueDetailsComponent, decorators: [{
             type: Component$1,
@@ -11566,6 +11789,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeType", required: true }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: true }] }], aggregated: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregated", required: false }] }] } });
 
 const isMissing = (value) => value === undefined || value === null || value === '';
+/**
+ * The quantities only a weighting rule binds, so a rule is placed by what it computes rather than
+ * by where the documentation happens to write it. The weight normalisation stores none of its
+ * symbols, so it is named by the one it defines.
+ */
+const WEIGHT_KEYS = [
+    'organic_factor',
+    'organic_weight_lookup_value',
+    'irrigated_area',
+    'plantation_lifespan',
+    'world_production'
+];
+const WEIGHT_SYMBOLS = ['\\hat{w}_i'];
+const formulaGroup = (formula) => formula.bindings.some(({ key, symbol }) => WEIGHT_KEYS.includes(key ?? '') || WEIGHT_SYMBOLS.includes(symbol ?? ''))
+    ? 'weights'
+    : 'value';
 /**
  * A symbol that should carry a value: the result and the inputs, but never a fixed constant or a
  * quantity the aggregation deliberately does not store.
@@ -11575,10 +11814,11 @@ const isSubstitutable = (binding) => !!binding.key && binding.constant === undef
  * The number of rows a table would have had, which the aggregation records under `<table>_count`
  * when there were too many contributors to name every one of them.
  */
-const rowCount = (values, binding) => {
-    const count = binding.column ? values[`${binding.key}_count`] : undefined;
+const tableCount = (values, key) => {
+    const count = key ? values[`${key}_count`] : undefined;
     return typeof count === 'number' && count > 0 ? count : undefined;
 };
+const rowCount = (values, binding) => binding.column ? tableCount(values, binding.key) : undefined;
 /**
  * How a symbol that did not resolve is explained: the contributors were not recorded one by one,
  * only counted - which is a different thing from a value the aggregation never logged.
@@ -11599,6 +11839,73 @@ const isMissingValue = (values, binding) => isSubstitutable(binding) && isMissin
  * identical to the symbolic one.
  */
 const hasAnySubstitution = (values, bindings) => bindings.some(binding => isSubstitutable(binding) && !isMissing(values[binding.key]));
+// a symbol reading one column of a contributors table: `key` names the table, `column` the field
+const isTableBinding = (binding) => !!binding.key && !!binding.column && !binding.match;
+// the packed `log_as_table` string: rows split on `;`, columns on `_`, each column a `key:value`
+const parseRows = (packed) => typeof packed !== 'string'
+    ? []
+    : packed
+        .split(';')
+        .filter(Boolean)
+        .map(row => row.split('_').reduce((columns, pair) => {
+        const at = pair.indexOf(':');
+        return at === -1 ? columns : { ...columns, [pair.slice(0, at)]: pair.slice(at + 1) };
+    }, {}));
+const ID_COLUMN$1 = 'id';
+// how many leading segments every id shares, e.g. the product and country of a sub-aggregation
+const commonPrefix = (ids) => {
+    const [first = [], ...rest] = ids;
+    const shared = first.findIndex((segment, index) => rest.some(other => other[index] !== segment));
+    return shared === -1 ? first.length : shared;
+};
+/**
+ * How many trailing segments every id shares, counting only the period and run date they are all
+ * stamped with. Stopping at the first word is what keeps a compound apart from what it is compared
+ * against: `irrigated` and `non-irrigated` share a word, and dropping it would lose the difference.
+ */
+const commonPeriod = (ids) => {
+    const [first = [], ...rest] = ids;
+    const shared = [...first]
+        .reverse()
+        .findIndex((segment, index) => !/^\d+$/.test(segment) || rest.some(other => other[other.length - 1 - index] !== segment));
+    return shared === -1 ? first.length : shared;
+};
+/**
+ * The part of each id that tells the contributors apart, dropping what they all share - the
+ * product, country and period, which the Cycle being read already names. Falls back to the full id
+ * where that leaves nothing, so a row is never unlabelled.
+ */
+const distinguishingLabels = (ids) => {
+    const segments = ids.map(id => id.split('-'));
+    const start = commonPrefix(segments);
+    const end = commonPeriod(segments);
+    return ids.map((id, index) => segments[index].slice(start, segments[index].length - end).join('-') || id);
+};
+/**
+ * The contributors table these formulas read from: the first one the aggregation recorded, since
+ * they all list the same Cycles - the zero-filled table is the wider of the two.
+ *
+ * Undefined when nothing was recorded, which is every aggregation that logs no values at all.
+ */
+const contributorsTable = (values, formulas) => {
+    const bindings = formulas.flatMap(formula => formula.bindings.filter(isTableBinding));
+    const key = bindings
+        .map(binding => binding.key)
+        .find(name => !isMissing(values[name]) || tableCount(values, name));
+    if (!key)
+        return undefined;
+    const columns = bindings
+        .filter(binding => binding.key === key)
+        .map(({ symbol, description, column }) => ({ symbol, description, column: column }));
+    const parsed = parseRows(values[key]);
+    const labels = distinguishingLabels(parsed.map(row => row[ID_COLUMN$1]));
+    const rows = parsed.map((row, index) => ({
+        id: row[ID_COLUMN$1],
+        label: labels[index],
+        values: columns.map(({ column }) => row[column])
+    }));
+    return { columns, rows, count: tableCount(values, key) };
+};
 
 // The page every aggregation follows, whatever the product.
 const GENERAL_PAGE = 'general-process';
@@ -11608,16 +11915,17 @@ const PRODUCT_PAGES = {
     crop: 'crop',
     processedFood: 'processed-food'
 };
-// How each page's rules relate to the others, so a reader told "here are two sets of formulas" knows
-// which is which. Named after the guide pages they come from, which the row's guide button opens.
-const PAGE_HEADINGS = {
-    'general-process': { heading: 'General rules', applies: 'Applied to every aggregation, whatever the product.' },
-    crop: { heading: 'Crop aggregation', applies: 'Applied on top of the general rules, for crop products.' },
-    'processed-food': {
-        heading: 'Processed food aggregation',
-        applies: 'Applied on top of the general rules, for processed food.'
-    }
-};
+/**
+ * The rules are shown in the order they answer a reader's questions: how this value was calculated,
+ * which values went into it, then how each of those was weighted. Grouping them by what they
+ * compute rather than by the page they are documented on is what puts the two calculations either
+ * side of the values they combine.
+ */
+const GROUPS = [
+    { id: 'value', heading: 'How the value is calculated', pageOrder: pages => pages },
+    // a weight is derived by the product's own rules first, then normalised by the general one
+    { id: 'weights', heading: 'How the weights are calculated', pageOrder: pages => [...pages].reverse() }
+];
 // A symbol worth listing under its formula: it carries documentation the reader needs. Constants
 // (e.g. `365`) are self-evident in the formula itself.
 const isDocumented = (binding) => !!binding.symbol && !!binding.description;
@@ -11693,17 +12001,30 @@ class NodeAggregatedFormulasComponent {
             return this.sections().some(section => section.formulas.some(formula => hasAnySubstitution(values, formula.bindings)));
         }, ...(ngDevMode ? [{ debugName: "hasSubstitutions" }] : []));
         /**
-         * Each page with its formulas, rendered symbolically or with values substituted, and the
-         * variables documented under each. A variable with nothing to substitute is flagged, so the
-         * reader can tell a value that was not recorded from one that is genuinely absent.
+         * The rules that produced this value, grouped by what each one computes.
          */
-        this.sections = computed(() => this.pages()
-            .map(page => ({
-            page,
-            ...(PAGE_HEADINGS[page] ?? { heading: 'Formulas', applies: '' }),
-            formulas: getFormulas$1(page).filter((formula) => this.applies(formula))
-        }))
-            .filter(section => section.formulas.length > 0), ...(ngDevMode ? [{ debugName: "sections" }] : []));
+        this.sections = computed(() => GROUPS.map(({ id, heading, pageOrder }) => ({
+            id,
+            heading,
+            formulas: pageOrder(this.pages())
+                .flatMap(page => getFormulas$1(page))
+                .filter(formula => formulaGroup(formula) === id && this.applies(formula))
+        })).filter(section => section.formulas.length > 0), ...(ngDevMode ? [{ debugName: "sections" }] : []));
+        /**
+         * The values this one was combined from, as the aggregation recorded them: one row per Cycle or
+         * sub-aggregation, under the symbols the formulas above read them with. Absent where the
+         * contributors were too many to record, which is every aggregation built straight from source
+         * Cycles - their number is shown instead.
+         */
+        this.contributors = computed(() => {
+            const table = contributorsTable(this.values(), this.sections().flatMap(section => section.formulas));
+            // the node each row links to is built here rather than in the template, so it keeps its
+            // identity between change detection runs
+            return (table && {
+                ...table,
+                rows: table.rows.map(row => ({ ...row, node: { '@type': NodeType.Cycle, '@id': row.id } }))
+            });
+        }, ...(ngDevMode ? [{ debugName: "contributors" }] : []));
         this.renderedSections = computed(() => {
             const values = this.values();
             const showValues = this.substituted() && this.hasSubstitutions();
@@ -11765,11 +12086,18 @@ class NodeAggregatedFormulasComponent {
         return this.ranForAggregation(formula) && this.appliesToNodeKey(formula);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedFormulasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregatedFormulasComponent, isStandalone: true, selector: "he-node-aggregated-formulas", inputs: { termType: { classPropertyName: "termType", publicName: "termType", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, worldAggregation: { classPropertyName: "worldAggregation", publicName: "worldAggregation", isSignal: true, isRequired: false, transformFunction: null }, subAggregation: { classPropertyName: "subAggregation", publicName: "subAggregation", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "@if (renderedSections().length) {\n  <div class=\"aggregated-formulas\">\n    <p class=\"is-size-7 is-mb-2 | formula-intro\">\n      Aggregated values are calculated from the underlying Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.page; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [note]=\"section.applies\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.aggregated-formulas-rules{max-height:50vh;overflow-y:auto;padding-right:.25rem}\n"], dependencies: [{ kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "substituted"], outputs: ["substitutedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NodeAggregatedFormulasComponent, isStandalone: true, selector: "he-node-aggregated-formulas", inputs: { termType: { classPropertyName: "termType", publicName: "termType", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, worldAggregation: { classPropertyName: "worldAggregation", publicName: "worldAggregation", isSignal: true, isRequired: false, transformFunction: null }, subAggregation: { classPropertyName: "subAggregation", publicName: "subAggregation", isSignal: true, isRequired: false, transformFunction: null }, substituted: { classPropertyName: "substituted", publicName: "substituted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { substituted: "substitutedChange" }, ngImport: i0, template: "@if (renderedSections().length) {\n  <div class=\"aggregated-formulas\">\n    <p class=\"is-size-7 is-mb-2 | formula-intro\">\n      Aggregated values are calculated from the underlying Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"is-pt-2 is-pr-1 is-overflow-y-auto | aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.id; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [collapsible]=\"true\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n\n        <!-- the values combined sit between the two calculations: what went in, above how each was weighted -->\n        @if (section.id === 'value' && contributors(); as table) {\n          <he-collapsible-block heading=\"Values combined\">\n            @if (table.rows.length) {\n              <table class=\"table is-narrow is-size-7 w-100 | contributors-table\">\n                <thead>\n                  <tr>\n                    <th>Cycle</th>\n                    @for (column of table.columns; track column.symbol) {\n                      <th class=\"has-text-right\">\n                        <span [heKatex]=\"column.symbol\" [heKatexInline]=\"true\"></span>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of table.rows; track row.id) {\n                    <tr>\n                      <td [attr.title]=\"row.id\">\n                        <he-node-link [node]=\"row.node\" linkClass=\"has-text-white\">\n                          <span class=\"break-word\">{{ row.label }}</span>\n                        </he-node-link>\n                      </td>\n                      @for (value of row.values; track $index) {\n                        <td class=\"has-text-right is-nowrap\">{{ value | precision: 4 | default: '-' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <p class=\"is-size-7\">\n                Combined from {{ table.count }} Cycles, too many for the aggregation to record one by one.\n              </p>\n            }\n          </he-collapsible-block>\n        }\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.contributors-table{background-color:transparent;color:inherit}.contributors-table th,.contributors-table td{border-color:#fff3;color:inherit;padding:.15rem .5rem .15rem 0;vertical-align:top}.contributors-table th{opacity:.7}.contributors-table ::ng-deep .katex{font-size:1em}.aggregated-formulas-rules{max-height:50vh}\n"], dependencies: [{ kind: "directive", type: KatexDirective, selector: "[heKatex]", inputs: ["heKatex", "heKatexInline"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: FormulaBlockComponent, selector: "he-formula-block", inputs: ["formulas", "hasSubstitutions", "emptyTitle", "heading", "note", "showToggle", "collapsible", "open", "substituted"], outputs: ["openChange", "substitutedChange"] }, { kind: "component", type: CollapsibleBlockComponent, selector: "he-collapsible-block", inputs: ["heading", "collapsible", "open"], outputs: ["openChange"] }, { kind: "pipe", type: DefaultPipe, name: "default" }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NodeAggregatedFormulasComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-aggregated-formulas', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormulaBlockComponent], template: "@if (renderedSections().length) {\n  <div class=\"aggregated-formulas\">\n    <p class=\"is-size-7 is-mb-2 | formula-intro\">\n      Aggregated values are calculated from the underlying Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.page; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [note]=\"section.applies\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.aggregated-formulas-rules{max-height:50vh;overflow-y:auto;padding-right:.25rem}\n"] }]
+            args: [{ selector: 'he-node-aggregated-formulas', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DefaultPipe,
+                        PrecisionPipe,
+                        KatexDirective,
+                        NodeLinkComponent,
+                        FormulaBlockComponent,
+                        CollapsibleBlockComponent
+                    ], template: "@if (renderedSections().length) {\n  <div class=\"aggregated-formulas\">\n    <p class=\"is-size-7 is-mb-2 | formula-intro\">\n      Aggregated values are calculated from the underlying Cycles, not measured. These are the rules that produced this\n      one, in the order they are applied.\n    </p>\n\n    <div class=\"is-pt-2 is-pr-1 is-overflow-y-auto | aggregated-formulas-rules\">\n      @for (section of renderedSections(); track section.id; let first = $first) {\n        <he-formula-block\n          [formulas]=\"section.formulas\"\n          [heading]=\"section.heading\"\n          [collapsible]=\"true\"\n          [showToggle]=\"first\"\n          [hasSubstitutions]=\"hasSubstitutions()\"\n          [(substituted)]=\"substituted\"\n          emptyTitle=\"No recorded values to substitute\" />\n\n        <!-- the values combined sit between the two calculations: what went in, above how each was weighted -->\n        @if (section.id === 'value' && contributors(); as table) {\n          <he-collapsible-block heading=\"Values combined\">\n            @if (table.rows.length) {\n              <table class=\"table is-narrow is-size-7 w-100 | contributors-table\">\n                <thead>\n                  <tr>\n                    <th>Cycle</th>\n                    @for (column of table.columns; track column.symbol) {\n                      <th class=\"has-text-right\">\n                        <span [heKatex]=\"column.symbol\" [heKatexInline]=\"true\"></span>\n                      </th>\n                    }\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (row of table.rows; track row.id) {\n                    <tr>\n                      <td [attr.title]=\"row.id\">\n                        <he-node-link [node]=\"row.node\" linkClass=\"has-text-white\">\n                          <span class=\"break-word\">{{ row.label }}</span>\n                        </he-node-link>\n                      </td>\n                      @for (value of row.values; track $index) {\n                        <td class=\"has-text-right is-nowrap\">{{ value | precision: 4 | default: '-' }}</td>\n                      }\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            } @else {\n              <p class=\"is-size-7\">\n                Combined from {{ table.count }} Cycles, too many for the aggregation to record one by one.\n              </p>\n            }\n          </he-collapsible-block>\n        }\n      }\n    </div>\n  </div>\n}\n", styles: [".formula-intro{opacity:.85}.contributors-table{background-color:transparent;color:inherit}.contributors-table th,.contributors-table td{border-color:#fff3;color:inherit;padding:.15rem .5rem .15rem 0;vertical-align:top}.contributors-table th{opacity:.7}.contributors-table ::ng-deep .katex{font-size:1em}.aggregated-formulas-rules{max-height:50vh}\n"] }]
         }], propDecorators: { termType: [{ type: i0.Input, args: [{ isSignal: true, alias: "termType", required: false }] }], termId: [{ type: i0.Input, args: [{ isSignal: true, alias: "termId", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], worldAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "worldAggregation", required: false }] }], subAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "subAggregation", required: false }] }], substituted: [{ type: i0.Input, args: [{ isSignal: true, alias: "substituted", required: false }] }, { type: i0.Output, args: ["substitutedChange"] }] } });
 
 // the `.jlog` entries the aggregation records are tagged with its own model name
@@ -11788,16 +12116,18 @@ const WORLD_STAGE_KEY = 'world_production';
 // the sub-system stage: the organic and irrigated factors a sub-aggregation's weight is the product of
 const SUB_SYSTEM_KEY = 'organic_factor';
 /**
- * The shares of the country's area an aggregation is weighted by. They come from lookups keyed by
- * country and period, so every sub-aggregation of the same country and period records the same
- * values, and any one of them answers for the aggregation as a whole.
+ * The lookups an aggregation is weighted by: the shares of the country's area, keyed by country and
+ * period, and the plantation lifespans, keyed by product. Every sub-aggregation of the same country
+ * and period records the same values, so any one of them answers for the aggregation as a whole.
  */
 const LOOKUP_KEYS = [
     'organic_weight',
     'organic_weight_lookup_value',
     'irrigated_weight',
     'irrigated_area',
-    'total_area'
+    'total_area',
+    'plantation_lifespan',
+    'plantation_non_productive_lifespan'
 ];
 /**
  * A Cycle combined from sub-aggregations has a handful of contributors (organic or conventional,
@@ -11861,11 +12191,12 @@ const tableIds = (packed) => typeof packed === 'string'
  * the only place a sub-aggregation is named, as the Cycle links the source Cycles it covers rather
  * than the sub-aggregations it was built from.
  *
- * Empty when the Cycle already records the country shares itself (nothing to look up), and when
- * there are more contributors than sub-systems (they are source Cycles, which log nothing).
+ * Empty for a sub-aggregation, which records the lookups itself and was built from source Cycles
+ * that log nothing, and when there are more contributors than there are sub-systems - a longer list
+ * is source Cycles rather than sub-aggregations.
  */
 const contributorIds = (jlog) => {
-    if (!isEmpty(sharedLookups([jlog])))
+    if (SUB_SYSTEM_KEY in nodeValues(jlog))
         return [];
     const tables = Object.values(jlog ?? {})
         .filter(section => !!section && typeof section === 'object' && !Array.isArray(section))
@@ -14407,6 +14738,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-sites-maps', changeDetection: ChangeDetectionStrategy.OnPush, imports: [GoogleMap, MapMarker, MapPolygon, AsyncPipe], template: "@if (mapLoaded$ | async) {\n  <google-map (mapInitialized)=\"mapLoaded()\" height=\"100%\" width=\"100%\" [zoom]=\"zoom()\" [center]=\"mapCenter()\">\n    @for (marker of markers(); track trackByMarker($index, marker)) {\n      <map-marker [position]=\"marker.position\" [icon]=\"marker.icon\"></map-marker>\n    }\n    @for (polygon of sitePolygons(); track trackByPolygon($index, polygon)) {\n      <map-polygon [paths]=\"polygon.paths\" [options]=\"polygon.options\" />\n    }\n    @for (polygon of termPolygons(); track trackByPolygon($index, polygon)) {\n      <map-polygon [paths]=\"polygon.paths\" [options]=\"polygon.options\" />\n    }\n  </google-map>\n}\n\n@if (showNotice()) {\n  <p class=\"mt-2 is-italic is-size-7\">The information provided might not be complete</p>\n}\n\n@if (showNoLocation()) {\n  <div class=\"no-location has-text-center has-text-light\">\n    <span>No precise location data</span>\n  </div>\n}\n", styles: [":host{display:block;height:100%;position:relative;width:100%}.no-location{background-color:#0000004d;left:0;height:100%;position:absolute;top:0;width:100%;z-index:9}.no-location>span{display:inline-block;margin-top:12%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], loadPolygons: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadPolygons", required: false }] }], sites: [{ type: i0.Input, args: [{ isSignal: true, alias: "sites", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], showNotice: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotice", required: false }] }] } });
 
+/**
+ * The distribution behind an `is outside confidence interval` warning, shown on demand.
+ *
+ * The chart cannot be part of the error message itself: the catalog is framework-agnostic and its
+ * output is injected with `[innerHTML]`, which Angular sanitizes — canvas and inline SVG are
+ * stripped. So the message stays text and this sits beside it.
+ */
+class FilesErrorDistributionComponent {
+    constructor() {
+        this.error = input(...(ngDevMode ? [undefined, { debugName: "error" }] : []));
+        this.params = computed(() => this.error()?.params, ...(ngDevMode ? [{ debugName: "params" }] : []));
+        /**
+         * `mu`/`sd` are only sent by the validation service from `@hestia-earth/data-validation` 0.41.1
+         * on. Older warnings carry `min`/`max` alone, which cannot reconstruct the curve — `min` is
+         * clamped at 0 — so the button is hidden rather than opening onto a wrong distribution.
+         */
+        this.available = computed(() => Number.isFinite(this.params()?.mu) && Number.isFinite(this.params()?.sd) && this.params()?.sd > 0, ...(ngDevMode ? [{ debugName: "available" }] : []));
+        /** What was checked: the grouped input key where there is one, else the term itself. */
+        this.label = computed(() => this.params()?.group || this.params()?.term?.name, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.country = computed(() => this.params()?.country?.name, ...(ngDevMode ? [{ debugName: "country" }] : []));
+        /**
+         * The reported value to mark. `outliers` holds every value that fell outside for this field —
+         * in practice one, since each warning is raised per value.
+         */
+        this.value = computed(() => this.params()?.outliers?.[0], ...(ngDevMode ? [{ debugName: "value" }] : []));
+        /** `threshold` is the share of the data the shaded interval covers, e.g. `0.95` → `95%`. */
+        this.thresholdPercent = computed(() => Number.isFinite(this.params()?.threshold) ? this.params().threshold * 100 : null, ...(ngDevMode ? [{ debugName: "thresholdPercent" }] : []));
+        this.isPrior = computed(() => this.params()?.source === 'prior', ...(ngDevMode ? [{ debugName: "isPrior" }] : []));
+        /**
+         * The warning is always raised on an Input or Product `value` — a physical amount, which cannot
+         * be negative however far the fitted normal's left tail reaches. The validation service clamps
+         * `min` at 0 for the same reason.
+         */
+        this.minX = 0;
+        /**
+         * The popover body is the platform's dark blue (`$blue`), so the axis has to be drawn light on
+         * it. The chart's own colours are background-agnostic; only the axis needs saying.
+         */
+        this.chartConfig = {
+            options: {
+                scales: {
+                    x: {
+                        ticks: { color: '#fff' },
+                        title: { color: '#fff' },
+                        grid: { color: 'rgba(255, 255, 255, 0.15)' },
+                        border: { color: 'rgba(255, 255, 255, 0.3)' }
+                    }
+                }
+            }
+        };
+    }
+    get hidden() {
+        return !this.available();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesErrorDistributionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesErrorDistributionComponent, isStandalone: true, selector: "he-files-error-distribution", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.is-none": "this.hidden" } }, ngImport: i0, template: "@if (available()) {\n  <a\n    class=\"is-nowrap\"\n    [ngbPopover]=\"distributionPopover\"\n    triggers=\"click\"\n    autoClose=\"outside\"\n    placement=\"bottom auto\"\n    popoverClass=\"he-distribution-popover\"\n    container=\"body\">\n    <he-svg-icon name=\"chart\" size=\"24\" />\n    <span class=\"is-pl-2\">Show distribution</span>\n  </a>\n}\n\n<ng-template #distributionPopover>\n  <div>\n    <he-distribution-chart\n      [mu]=\"params().mu\"\n      [sd]=\"params().sd\"\n      [intervalMin]=\"params().min\"\n      [intervalMax]=\"params().max\"\n      [value]=\"value()\"\n      [label]=\"label()\"\n      [minX]=\"minX\"\n      [config]=\"chartConfig\" />\n\n    <p class=\"is-size-7\">\n      How common each value of\n      <b>{{ label() }}</b>\n      is\n      @if (country()) {\n        in\n        <b>{{ country() }}</b>\n      }\n      on the HESTIA platform: the taller the curve, the more common the value. It peaks at the average,\n      <b>{{ params().mu | precision }}</b>\n      <span>.</span>\n    </p>\n\n    <p class=\"is-size-7 is-mt-2\">\n      The shaded band is the\n      @if (thresholdPercent()) {\n        {{ thresholdPercent() }}%\n      }\n      confidence interval, from\n      <b>{{ params().min | precision }}</b>\n      to\n      <b>{{ params().max | precision }}</b>\n      <span>. The orange line marks your value.</span>\n    </p>\n\n    @if (isPrior()) {\n      <p class=\"is-size-7 is-mt-2\">\n        This is the FAOSTAT prior (national average), not HESTIA Cycle data for this product, so it is weak evidence.\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:0}::ng-deep .he-distribution-popover .popover-body{width:320px;max-width:100%}::ng-deep .he-distribution-popover he-distribution-chart{display:block;height:200px}\n"], dependencies: [{ kind: "ngmodule", type: NgbPopoverModule }, { kind: "directive", type: i1$1.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"] }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "maxPercentile", "config", "mu", "sd", "intervalMin", "intervalMax", "minX"], exportAs: ["distributionChart"] }, { kind: "pipe", type: PrecisionPipe, name: "precision" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesErrorDistributionComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-files-error-distribution', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgbPopoverModule, HESvgIconComponent, DistributionChartComponent, PrecisionPipe], template: "@if (available()) {\n  <a\n    class=\"is-nowrap\"\n    [ngbPopover]=\"distributionPopover\"\n    triggers=\"click\"\n    autoClose=\"outside\"\n    placement=\"bottom auto\"\n    popoverClass=\"he-distribution-popover\"\n    container=\"body\">\n    <he-svg-icon name=\"chart\" size=\"24\" />\n    <span class=\"is-pl-2\">Show distribution</span>\n  </a>\n}\n\n<ng-template #distributionPopover>\n  <div>\n    <he-distribution-chart\n      [mu]=\"params().mu\"\n      [sd]=\"params().sd\"\n      [intervalMin]=\"params().min\"\n      [intervalMax]=\"params().max\"\n      [value]=\"value()\"\n      [label]=\"label()\"\n      [minX]=\"minX\"\n      [config]=\"chartConfig\" />\n\n    <p class=\"is-size-7\">\n      How common each value of\n      <b>{{ label() }}</b>\n      is\n      @if (country()) {\n        in\n        <b>{{ country() }}</b>\n      }\n      on the HESTIA platform: the taller the curve, the more common the value. It peaks at the average,\n      <b>{{ params().mu | precision }}</b>\n      <span>.</span>\n    </p>\n\n    <p class=\"is-size-7 is-mt-2\">\n      The shaded band is the\n      @if (thresholdPercent()) {\n        {{ thresholdPercent() }}%\n      }\n      confidence interval, from\n      <b>{{ params().min | precision }}</b>\n      to\n      <b>{{ params().max | precision }}</b>\n      <span>. The orange line marks your value.</span>\n    </p>\n\n    @if (isPrior()) {\n      <p class=\"is-size-7 is-mt-2\">\n        This is the FAOSTAT prior (national average), not HESTIA Cycle data for this product, so it is weak evidence.\n      </p>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-grow:0}::ng-deep .he-distribution-popover .popover-body{width:320px;max-width:100%}::ng-deep .he-distribution-popover he-distribution-chart{display:block;height:200px}\n"] }]
+        }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hidden: [{
+                type: HostBinding,
+                args: ['class.is-none']
+            }] } });
+
 const stringify = (value) => JSON.stringify(value);
 const focusFirstGroupError = (element) => {
     const groupError = (element.querySelectorAll('.is-group-error-danger')?.[0] ||
@@ -14527,7 +14923,7 @@ class FilesFormComponent {
         return focusFirstError(this.ref.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "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: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "hideIcon", "size", "clipboardClass", "tooltipPlacement"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilesFormComponent, isStandalone: true, selector: "he-files-form", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, showNodeLink: { classPropertyName: "showNodeLink", publicName: "showNodeLink", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeErorrResolved: "nodeErorrResolved" }, exportAs: ["filesForm"], ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-direction-column is-align-items-start is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n        <he-files-error-distribution [error]=\"property.error\" />\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "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: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: SitesMapsComponent, selector: "he-sites-maps", inputs: ["loadPolygons", "sites", "zoom", "showNotice"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ClipboardComponent, selector: "he-clipboard", inputs: ["icon", "value", "disabled", "hideText", "hideIcon", "size", "clipboardClass", "tooltipPlacement"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "component", type: FilesErrorDistributionComponent, selector: "he-files-error-distribution", inputs: ["error"] }, { kind: "pipe", type: EllipsisPipe, name: "ellipsis" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilesFormComponent, decorators: [{
             type: Component$1,
@@ -14542,8 +14938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         HESvgIconComponent,
                         ClipboardComponent,
                         GuideOverlayComponent,
+                        FilesErrorDistributionComponent,
                         EllipsisPipe
-                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch | files-form-container\">\n  <div\n    class=\"is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center is-align-self-stretch is-gap-16 px-4 py-2 has-text-secondary | files-form-header\"\n    (click)=\"isOpen.set(!isOpen())\"\n    pointer>\n    <div class=\"is-flex is-gap-8 is-align-items-center\">\n      @if (nodeProperty()) {\n        <he-node-icon class=\"is-flex\" [type]=\"schemaType()\" [size]=\"24\" />\n        <span class=\"has-text-weight-bold has-text-secondary is-size-5\">{{ schemaType() }}</span>\n        @if (nodeProperty().hasError || hasError()) {\n          <he-svg-icon name=\"xmark-circle\" class=\"has-text-danger is-flex is-align-items-center\" />\n          <span class=\"has-text-danger has-text-weight-bold is-italic\">Error</span>\n        } @else if (nodeProperty().hasWarning || hasWarning()) {\n          <he-svg-icon name=\"exclamation-triangle\" class=\"has-text-warning is-flex is-align-items-center\" />\n          <span class=\"has-text-warning has-text-weight-bold is-italic\">Warning</span>\n        }\n      }\n    </div>\n    @if ((showNodeLink() && nodeUrl()) || canOpen()) {\n      <div class=\"is-flex is-flex-direction-row is-align-items-center is-gap-16\">\n        @if (showNodeLink() && nodeUrl()) {\n          <ng-container *ngTemplateOutlet=\"nodeLink; context: { url: nodeUrl(), nodeType: schemaType() }\" />\n        }\n        @if (canOpen()) {\n          <he-svg-icon [name]=\"isOpen() ? 'minus' : 'plus'\" />\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            propertyError;\n            context: { property: nodeProperty(), classes: 'is-my-1 is-py-1 is-px-3' }\n          \" />\n      }\n    }\n\n    @if (unmatchedErrors().length) {\n      @for (property of unmatchedErrors(); track property.id) {\n        <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-py-1 is-px-3' }\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n\n    @if (isOpen()) {\n      <ng-container *ngTemplateOutlet=\"propertyMap; context: { $implicit: nodeProperty() }\" />\n    }\n  </div>\n\n  <ng-content />\n</div>\n\n<ng-template #propertyKeyTooltip let-property=\"property\">\n  <markdown [data]=\"property.schema.description\" />\n</ng-template>\n\n<ng-template #propertyKey let-property=\"property\">\n  @if (property.schema?.description) {\n    <span\n      class=\"trigger-popover | property-key\"\n      [ngbTooltip]=\"propertyKeyTooltip\"\n      [tooltipContext]=\"{ property }\"\n      triggers=\"click\"\n      autoClose=\"outside\"\n      tooltipClass=\"property-tooltip\"\n      placement=\"bottom-left auto\"\n      container=\"body\"\n      (click)=\"$event.stopPropagation()\">\n      <span>{{ property.key }}</span>\n    </span>\n  } @else {\n    <span>{{ property.key }}</span>\n  }\n</ng-template>\n\n<ng-template #propertyContent let-property=\"property\">\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap is-gap-4\">\n    <div class=\"is-flex has-text-secondary\">\n      <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n      <span>:</span>\n    </div>\n\n    @if (property.isCollapsible && property.showMaxLength) {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value | ellipsis: property.showMaxLength }}\n      </span>\n\n      <a class=\"is-flex is-size-7\" (click)=\"property.showMaxLength = 0\">Show more</a>\n    } @else {\n      <span class=\"is-flex is-size-7 | property-value\">\n        {{ property.value }}\n      </span>\n    }\n\n    @if (property.schema?.internal && property.key !== 'originalId') {\n      <div class=\"property-internal\" ngbTooltip=\"This value is auto-generated.\">\n        <he-svg-icon name=\"autogenerate-circle\" />\n      </div>\n    }\n\n    <div class=\"copy-button\">\n      <he-clipboard [value]=\"property.value\" [hideText]=\"true\" />\n    </div>\n  </div>\n\n  <div class=\"is-flex is-gap-8\">\n    @if (property.externalUrl?.url) {\n      <a\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        class=\"ml-2\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" />\n      </a>\n    }\n  </div>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    @if (property.properties.length) {\n      <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n        <div\n          class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 has-text-secondary w-100 | properties-container--title\"\n          (click)=\"property.isOpen = !property.isOpen\"\n          pointer\n          [class.is-open]=\"property.isOpen\"\n          [class.is-group-error-danger]=\"property.hasError\"\n          [class.is-group-error-warning]=\"!property.hasError && property.hasWarning\">\n          <div class=\"is-flex is-gap-8 has-text-weight-bold\">\n            <!-- @if (property.schemaType === SchemaType.Term) {\n              <he-node-icon [type]=\"property.schemaType\" />\n            } -->\n            <ng-container *ngTemplateOutlet=\"propertyKey; context: { property }\" />\n          </div>\n          <he-svg-icon [name]=\"property.isOpen ? 'minus' : 'plus'\" />\n        </div>\n        @if (property.isOpen) {\n          @if (property.error) {\n            <ng-container *ngTemplateOutlet=\"propertyError; context: { property, classes: 'is-my-1 is-px-3' }\" />\n          }\n          @if (property.isArray) {\n            <div class=\"py-2 px-3 w-100\">\n              @if (property.hasError) {\n                <div class=\"is-flex is-align-items-center is-size-7 is-italic is-mb-2 has-text-warning\">\n                  <he-svg-icon name=\"exclamation-triangle\" />\n                  @if (showAllErrors()) {\n                    <a class=\"is-pl-2\" (click)=\"showAllErrors.set(false)\">Only show items in error.</a>\n                  } @else {\n                    <span class=\"is-pl-2\">Only showing items in error.</span>\n                    <a class=\"is-pl-1\" (click)=\"showAllErrors.set(true)\">Show all items</a>\n                  }\n                </div>\n              }\n\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                @if (prop2.key && (showAllErrors() || !property.hasError || prop2.hasError)) {\n                  <div class=\"pt-2 my-4 | property-array-container\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                    <div class=\"ml-2 is-mb-2 | property-array-number\">\n                      <span class=\"has-text-info is-px-1 | number-tag\">{{ prop2.key }}</span>\n                    </div>\n                    @if (prop2.error) {\n                      <ng-container\n                        *ngTemplateOutlet=\"propertyError; context: { property: prop2, classes: 'is-py-1 is-px-3' }\" />\n                    }\n                    <div class=\"p-3\">\n                      <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n                        @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                          <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                        }\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <div class=\"is-flex is-flex-direction-row is-flex-wrap-wrap is-align-self-stretch\">\n              @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n              }\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div\n        class=\"is-flex is-flex-direction-column is-gap-4 | property-container\"\n        [class.is-error-danger]=\"property.hasError\"\n        [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n        <div\n          class=\"is-flex is-flex-direction-row is-align-items-center is-justify-content-space-between is-gap-4 | field-container\">\n          @if (property.key) {\n            <ng-container *ngTemplateOutlet=\"propertyContent; context: { property }\" />\n          }\n        </div>\n        @if (property.hasError || property.hasWarning) {\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n        }\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\" let-classes=\"classes\">\n  @if (property.error?.message) {\n    <div\n      class=\"is-flex is-flex-direction-row is-gap-8 is-size-6 is-m-0 w-100 has-text-grey {{ classes }} | property-error\"\n      [class.is-error-danger]=\"property.hasError\"\n      [class.is-error-warning]=\"!property.hasError && property.hasWarning\">\n      @if (property.hasError) {\n        <he-svg-icon name=\"xmark-circle\" size=\"24\" class=\"has-text-danger is-flex-grow-0\" />\n      } @else {\n        <he-svg-icon name=\"exclamation-triangle\" size=\"24\" class=\"has-text-warning is-flex-grow-0\" />\n      }\n\n      <div class=\"is-flex is-flex-direction-column is-align-items-start is-flex-grow-1\">\n        <span [innerHTML]=\"property.error.message\"></span>\n        <he-files-error-distribution [error]=\"property.error\" />\n      </div>\n\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay class=\"is-flex-grow-0\" [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n\n      @if (property.error.index >= 0) {\n        @if (property.hasWarning) {\n          <a (click)=\"resolveError(property)\">\n            <he-svg-icon name=\"checkmark\" />\n            <span class=\"is-pl-2\">Resolved</span>\n          </a>\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #propertyMap let-property>\n  @if (showMap()) {\n    <div class=\"is-flex is-flex-direction-column is-flex-wrap-wrap w-100 | properties-container\">\n      <div\n        class=\"is-flex is-flex-direction-row is-justify-content-space-between is-gap-4 w-100 | properties-container--title\"\n        (click)=\"mapVisible.set(!mapVisible())\"\n        pointer\n        [class.is-open]=\"mapVisible()\">\n        <span class=\"is-size-6\">View on Map</span>\n        <he-svg-icon [name]=\"mapVisible() ? 'minus' : 'plus'\" />\n      </div>\n      @if (mapVisible()) {\n        <he-sites-maps [sites]=\"[node()]\" [showNotice]=\"false\" />\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #nodeLink let-url=\"url\" let-nodeType=\"nodeType\">\n  <a class=\"external-link\" [href]=\"url\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n    <span class=\"is-hidden-mobile\">View</span>\n    <span class=\"is-hidden-mobile is-pl-1\">{{ nodeType }}</span>\n    <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n  </a>\n</ng-template>\n", styles: [".notification{color:#0a0a0a!important}.notification.is-success{background-color:#d5f3d8}.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-success>fa-icon,.notification.is-success *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-success>he-svg-icon{color:#2b8434}.notification.is-info{background-color:#d3ebed}.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-info>fa-icon,.notification.is-info *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-info>he-svg-icon{color:#249da5}.notification.is-warning{background-color:#ffdec0}.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-warning>fa-icon,.notification.is-warning *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-warning>he-svg-icon{color:#ff881b}.notification.is-danger{background-color:#ffcdd0}.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>fa-icon,.notification.is-danger>fa-icon,.notification.is-danger *:not(.button):not(.icon):not(.dropdown-item)>he-svg-icon,.notification.is-danger>he-svg-icon{color:#ff3844}he-sites-maps{height:200px}.external-link{color:#4c7194}.files-form-container{box-shadow:2px 2px 4px #00000029;background-color:#fff}.files-form-header{padding:10px 12px;background-color:#dbe3ea;border-top-left-radius:3px;border-top-right-radius:3px}.properties-container--title,.property-container{padding:6px 12px}.property-container{flex:none;flex-grow:1;min-width:50%;max-width:100%;border:1px solid #f5f5f5}.property-container.is-error-danger{border-color:#ff3844}.property-container.is-error-warning{border-color:#ff881b}.properties-container--title{border-top:1px solid #dbe3ea;border-bottom:1px solid #dbe3ea;background:#f5f7f9}.properties-container .properties-container{border-radius:6px;border:1px solid #dbe3ea;margin:4px 0}.properties-container .properties-container--title{border-top:none}.property-internal{color:#249da5}.property-key,.property-value{word-break:break-word}.property-array-container{border-radius:6px;border:1px solid #dbdbdb}.number-tag{border:1px solid #249da5;border-radius:50%}.copy-button{visibility:hidden}.field-container:hover .copy-button{visibility:visible}.is-group-error-danger{background-color:#ffcdd0}.is-group-error-warning{background-color:#ffdec0}.property-error.is-error-danger{background-color:#ffeced}.field-container+.property-error.is-error-danger{background-color:transparent;color:#ff3844!important}.property-error.is-error-warning{background-color:#fff5ec}.field-container+.property-error.is-error-warning{background-color:transparent;color:#ff881b!important}::ng-deep .property-tooltip{background-color:#fff;color:#0a0a0a;border:1px solid #dbdbdb;z-index:11;max-width:50vw;max-height:50vh;overflow:auto}::ng-deep .property-tooltip pre{white-space:pre-wrap}\n"] }]
         }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], showNodeLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNodeLink", required: false }] }], errorGuidePrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorGuidePrefix", required: false }] }], nodeErorrResolved: [{ type: i0.Output, args: ["nodeErorrResolved"] }] } });
 
 class SchemaInfoComponent {
@@ -17422,5 +17819,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupDataByCategory, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, ignoreKeys$2 as ignoreKeys, increaseScaleLimits, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, locationQuery, logToCsv$2 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, sumValues, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBlockComponent, CollapsibleBoxComponent, CollapsibleBoxStyle, ColorPalette, CompoundDirective, CompoundPipe, ContributionChartComponent, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsCategoryService, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionInfoComponent, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesDragDropDirective, FilesDropZoneComponent, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, FormulaBlockComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MaxPipe, MeanPipe, MedianPipe, MendeleySearchResult, MinPipe, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedFormulasComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeAggregationLogsComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJLogModelsComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PipelineStagesProgressComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SiteNodesKeyGroup, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, SumPipe, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, availableProperties, axisHoverPlugin, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countGroupVisibleNodes, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, dataVersionHeader, dataVersionHeaderKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultTicksFont, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorText, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupBlankNodesByTermIdentity, groupChanged, groupDataByCategory, groupJLogByField, groupJLogByTerm, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, ignoreKeys$2 as ignoreKeys, increaseScaleLimits, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, jLogModelCount, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, locationQuery, logToCsv$2 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, noValue, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeDataStates, nodeDataVersion, nodeId, nodeIdWithoutDataVersion, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeRequestId, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeTypeIconSchema, nodeUrl, nodeUrlParams, nodeVersion, nodeVersionKey, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, simplifyContributions, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, subValueKeys, suggestMatchQuery, suggestQuery, sumValues, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toTextParts, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueLink, valueToString, valueTypeToDefault, valueValue, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map